1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=utf-8"
/>
<style type=
"text/css"
>
body{font-size:12px;}
.selectItemcont{padding:8px;}
#selectItem{border:1px solid #f00;background:#FFF;position:absolute;top:0px;left:center;overflow:hidden;width:240px;z-index:1000;}
.selectItemhidden{display:none;}
</style>
<script type=
"text/javascript"
src=
"引入jquery库"
></script>
<script>
(
function
($){
$.fn.bgIframe=$.fn.bgiframe =
function
(s){
return
this
;
};
})(jQuery);
jQuery.fn.selectCity =
function
(targetId) {
var
_seft =
this
;
var
targetId = $(targetId);
this
.click(
function
(){
var
A_top = $(
this
).offset().top + $(
this
).outerHeight(
true
);
// 1
var
A_left = $(
this
).offset().left;
targetId.bgiframe();
targetId.show().css({
"position"
:
"absolute"
,
"top"
:A_top+
"px"
,
"left"
:A_left+
"px"
});
});
targetId.find(
"#selectSub :checkbox"
).click(
function
(){
targetId.find(
":checkbox"
).attr(
"checked"
,
false
);
$(
this
).attr(
"checked"
,
true
);
_seft.val( $(
this
).val() );
targetId.hide();
});
$(document).click(
function
(event){
if
(event.target.id!=_seft.selector.substring(1)){
targetId.hide();
}
});
targetId.click(
function
(e){
e.stopPropagation();
// 2
});
return
this
;
}
$(document).ready(
function
(){
$(
"#address"
).selectCity(
"#selectItem"
);
})
</script>
</head>
<body>
<input type=
"text"
name=
"address"
id=
"address"
>
<div id=
"selectItem"
class=
"selectItemhidden"
>
<div id=
"selectItemCount"
class=
"selectItemcont"
>
<div id=
"selectSub"
>
<input type=
"checkbox"
name=
"cr01"
id=
"cr01"
value=
"搜索记录1"
/><label
for
=
"cr01"
>搜索记录1</label><br />
<input type=
"checkbox"
name=
"cr02"
id=
"cr02"
value=
"搜索记录2"
/><label
for
=
"cr02"
>搜索记录2</label><br />
<input type=
"checkbox"
name=
"cr03"
id=
"cr03"
value=
"登陆账号3"
/><label
for
=
"cr03"
>登陆账号3</label><br />
<input type=
"checkbox"
name=
"cr04"
id=
"cr04"
value=
"登陆账号4"
/><label
for
=
"cr04"
>登陆账号4</label><br />
清除历史记录...
</div>
</div>
</div>
</body>
</html>
|
本文转自许琴 51CTO博客,原文链接:http://blog.51cto.com/xuqin/1344942,如需转载请自行联系原作者