封装的原因肯定是各种变态需求
上图，左边是下拉框，右边是封装的控件
如何修改黑点背景色，那只能封装一个控件了
分三步解决这个问题，写HTML/CSS/JS
步骤分解：
1、布局好你想呈现的效果，JS控制它什么时候显示隐藏
2、隐藏好下拉框，用布局好的标签显示于当前下拉框的位置上
3、点击选中项则改变下拉框的值
index.html：
上图，左边是下拉框，右边是封装的控件
如何修改黑点背景色，那只能封装一个控件了
分三步解决这个问题，写HTML/CSS/JS
步骤分解：
1、布局好你想呈现的效果，JS控制它什么时候显示隐藏
2、隐藏好下拉框，用布局好的标签显示于当前下拉框的位置上
3、点击选中项则改变下拉框的值
index.html：
<!DOCTYPE html>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>
下
拉
框
控
件
</
title
>
<
link
href
=
"Scripts/dropdown/dropdown.css"
rel
=
"stylesheet"
/>
<
script
type
=
"text/javascript"
src
=
"Scripts/jquery-1.8.3.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"Scripts/dropdown/dropdown.js"
>
</
script
>
</
head
>
<
body
>
<!--记得ID是必要的-->
<
select
class
=
"dropdownlist"
id
=
"DDLCSList"
name
=
"DDLCSList"
>
<
option
value
=
"0"
>
请
选
择
客
服
</
option
>
<
option
value
=
"17"
>
哈
希
小
小
在
厅
要
</
option
>
<
option
value
=
"18"
>CC22
工
</
option
>
</
select
>
</
body
>
</
html
>
dropdown.css：
.dropdownlist
{
display:
none;
}
.combo
{
position:
relative;
border:
1
px
solid
#e66021;
display:
inline-block;
height:
26
px;
line-height:
26
px
}
.combo-text
{
line-height:
normal;
border:
0
px
solid
#e66021;
padding:
3
px
0
3
px
3
px;
font-size:
14
px;
color:
#e66021;
cursor:
default;
}
.combo-icon
{
background:
url(
'images/combo_icon.png'
)
no-repeat
scroll
0
0;
position:
absolute;
top:
10
px;
right:
5
px;
width:
9
px;
height:
8
px;
}
.combo-pl
{
border:
1
px
solid
#3399ff;
border-radius:
0;
margin:
0;
overflow:
hidden;
text-align:
left;
background-color:
#fefffd;
}
.combo-item
{
padding:
3
px
0
3
px
3
px;
font-size:
14
px;
color:
#e66021;
background-color:
#fefffd;
cursor:
default;
}
.combo-item
:hover
{
background-color:
#3399ff;
color:
#fff;
}
.combo-item-selected
{
background-color:
#ffe48d;
color:
#535353;
}
dropdown.js：
$
(
function
(
)
{
$
(
".dropdownlist"
)
.
each
(
function
(
)
{
var
$currentObj
=
$
(
this
)
;
$currentObj
.
hide
(
)
;
var
width
=
$currentObj
.
width
(
)
;
var
height
=
$currentObj
.
height
(
)
;
var
span_combo
=
document
.
createElement
(
"span"
)
;
$
(
span_combo
)
.
addClass
(
"combo"
)
;
$
(
span_combo
)
.
css
({
width
:
width
+
10
})
;
var
input_combo
=
document
.
createElement
(
"span"
)
;
$
(
input_combo
)
.
addClass
(
"combo-text"
)
;
$
(
input_combo
)
.
css
({
width
:
width
-
20
,
height
:
height
-
6
})
;
var
defaultOption
=
$currentObj
.
find
(
"option:selected"
)
.
length
==
1
?
$currentObj
.
find
(
"option:selected"
)
:
$currentObj
.
find
(
"option"
)
.
first
(
)
;
$
(
input_combo
)
.
attr
(
"data-value"
,
defaultOption
.
val
(
))
;
$
(
input_combo
)
.
html
(
defaultOption
.
text
(
))
;
var
a_combo
=
document
.
createElement
(
"a"
)
;
$
(
a_combo
)
.
addClass
(
"combo-icon"
)
;
span_combo
.
appendChild
(
input_combo
)
;
span_combo
.
appendChild
(
a_combo
)
;
$currentObj
.
after
(
span_combo
)
;
var
dataValue
=
$
(
input_combo
)
.
attr
(
"data-value"
)
;
$
(
span_combo
)
.
click
(
function
(
)
{
if
(
$
(
".combo-pl"
)
.
attr
(
"data-href"
)
==
$currentObj
.
attr
(
"id"
))
{
$
(
".combo-pl[data-href='"
+
$currentObj
.
attr
(
"id"
)
+
"']"
)
.
show
(
)
;
return
;
}
var
div_combo
=
document
.
createElement
(
"div"
)
;
$
(
div_combo
)
.
addClass
(
"combo-pl"
)
;
$
(
div_combo
)
.
attr
(
"data-href"
,
$currentObj
.
attr
(
"id"
))
;
var
position
=
$
(
this
)
.
offset
(
)
;
$
(
div_combo
)
.
css
({
position
:
"absolute"
,
left
:
position
.
left
,
top
:
position
.
top
+
28
,
width
:
width
+
10
})
;
var
optionlist
=
$currentObj
.
find
(
"option"
)
.
each
(
function
(
index
,
item
)
{
var
childItem
=
document
.
createElement
(
"div"
)
;
$
(
childItem
)
.
addClass
(
"combo-item"
)
;
var
currVal
=
$
(
this
)
.
val
(
)
;
$
(
childItem
)
.
attr
(
"id"
,
"combo-item-"
+
currVal
)
;
$
(
childItem
)
.
attr
(
"data-value"
,
currVal
)
;
if
(
dataValue
==
currVal
)
{
$
(
childItem
)
.
addClass
(
"combo-item-selected"
)
;
}
$
(
childItem
)
.
html
(
$
(
this
)
.
text
(
))
;
div_combo
.
appendChild
(
childItem
)
;
})
;
$
(
"body"
)
.
append
(
div_combo
)
;
$
(
div_combo
)
.
find
(
".combo-item"
)
.
click
(
function
(
)
{
$
(
input_combo
)
.
html
(
$
(
this
)
.
text
(
))
;
$currentObj
.
val
(
$
(
this
)
.
attr
(
"data-value"
))
;
$
(
this
)
.
addClass
(
"combo-item-selected"
)
.
siblings
(
"div"
)
.
removeClass
(
"combo-item-selected"
)
;
$
(
div_combo
)
.
hide
(
)
;
})
})
;
})
})
最后用火狐看页面加载后的DOM文档结构：
1381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
