對於我來說,標准的HTML元素(Select)已經讓我感到討厭。它不能夠正常的在IE浏覽器上顯示。還有一點就是他並不僅僅包含簡單的文本。本實例將完全摒棄select元素,通過JQuery和CSS來構建DropDown元素。
我們在進行表單設計時,可能要用到select下拉選項控件,遺憾的是,IE浏覽器默認的select控件外觀非常丑陋,而且不能用樣式來控制,不能在選項中添加圖片等信息。今天我將通過實例來講解如何用CSS和jQuery來制作漂亮的下拉選項菜單。
XHTML
?
1 2 3 4 5 6 7 8 9 10<
div
id
=
"dropdown"
>
<
p
>請選擇城市</
p
>
<
ul
>
<
li
><
a
href
=
"#"
>長沙</
a
></
li
>
<
li
><
a
href
=
"#"
>北京</
a
></
li
>
<
li
><
a
href
=
"#"
>南京</
a
></
li
>
<
li
><
a
href
=
"#"
>堪培拉</
a
></
li
>
<
li
><
a
href
=
"#"
>多倫多</
a
></
li
>
</
ul
>
</
div
>
可以看出,我們使用div來替換下拉選項控件原生的select標簽。
CSS
?
1 2 3 4 5 6 7 8 9#dropdown{
width
:
186px
;
margin
:
80px
auto
;
position
:
relative
}
#dropdown p{
width
:
150px
;
height
:
24px
;
line-height
:
24px
;
padding-left
:
4px
;
padding-right
:
30px
;
border
:
1px
solid
#a9c9e2
;
background
:
#e8f5fe
url
(arrow.gif)
no-repeat
right
4px
;
color
:
#807a62
;
cursor
:
pointer
}
#dropdown ul{
width
:
184px
;
background
:
#e8f5fe
;
margin-top
:
2px
;
border
:
1px
solid
#a9c9e2
;
position
:
absolute
;
display
:
none
}
#dropdown ul li{
height
:
24px
;
line-height
:
24px
;
text-indent
:
10px
}
#dropdown ul li a{
display
:
block
;
height
:
24px
;
color
:
#807a62
;
text-decoration
:
none
}
#dropdown ul li a:hover{
background
:
#c6dbfc
;
color
:
#369
}
樣式不要多講,你可以修改CSS中的背景色和字體顏色,甚至其他任意定義的樣式。有一個下拉箭頭的小圖標,已經打包在附件裡了。
jQuery
首先,當單擊“請選擇城市”時,判斷下拉的層“ul”是否處於顯示狀態,如果是則隱藏下拉選項,否則則打開(下滑)下拉選項
?
1 2 3 4 5 6 7 8$(
"#dropdown p"
).click(
function
(){
var
ul = $(
"#dropdown ul"
);
if
(ul.css(
"display"
)==
"none"
){
ul.slideDown(
"fast"
);
}
else
{
ul.slideUp(
"fast"
);
}
});
然後,當單擊下拉選項時,獲取選項內容,將選項內容寫入到
標簽中,同時隱藏下拉選項。
?
1 2 3 4 5$(
"#dropdown ul li a"
).click(
function
(){
var
txt = $(
this
).text();
$(
"#dropdown p"
).html(txt);
$(
"#dropdown ul"
).hide();
});
這樣就完成了一個簡單的下拉選項的操作,是不是很簡單啊。
當然,如果與後台交互,需要獲取選項的value值,那就需要先定義XHTML。
?
1 2 3 4 5 6 7 8 9 10 11<
div
id
=
"dropdown"
>
<
p
>請選擇城市</
p
>
<
ul
>
<
li
><
a
href
=
"#"
rel
=
"1"
>長沙</
a
></
li
>
<
li
><
a
href
=
"#"
rel
=
"2"
>北京</
a
></
li
>
<
li
><
a
href
=
"#"
rel
=
"3"
>南京</
a
></
li
>
<
li
><
a
href
=
"#"
rel
=
"4"
>堪培拉</
a
></
li
>
<
li
><
a
href
=
"#"
rel
=
"5"
>多倫多</
a
></
li
>
</
ul
>
</
div
>
<
div
id
=
"result"
></
div
>
從代碼中可以看出,在給a標簽加個rel屬性,並賦值,就相當於select的option標簽的value值。接下來就是通過jQuery獲取rel值,請看代碼:
?
1 2 3 4 5 6 7$(
"#dropdown ul li a"
).click(
function
(){
var
txt = $(
this
).text();
$(
"#dropdown p"
).html(txt);
var
value = $(
this
).attr(
"rel"
);
$(
"#dropdown ul"
).hide();
$(
"#result"
).html(
"您選擇了"
+txt+
",值為:"
+value);
});
這樣就完成了一個完整的下拉選項的操作。
以上所述就是本文的全部內容了,希望大家能夠喜歡。