效果图:
IE6.0上存在大家都熟知的一个Bug:div不能覆盖select控件
js code :
Code
1(function($) {
2 $.fn.multiSelect = function(options) {
3
4 var opts = $.extend({}, $.fn.multiSelect.defaults, options);
5
6 return this.each(function() {
7
8 $this = $(this);
9 $.fn.multiSelect.createSelectDiv($this.attr("id"), opts);
10
11 });
12 }
13
14 //创建div
15 $.fn.multiSelect.createSelectDiv = function(select_id, opts) {
16
17 //固定select的宽,以免被撑大
18 $("#" + select_id).width($("#" + select_id).width());
19
20 //取得select的jquery对象
21 var $obj = $("#" + select_id);
22 //取得该select的坐标对象
23 var offset = $obj.offset();
24 //获取select的title值
25 var title = $obj.attr("title") == undefined ? opts.titleName : $obj.attr("title");
26 // //如果是IE的话将该div往上移一个像素
27 if ($.browser.msie) {
28 offset.top -= 1;
29 }
30 offset.top += 20;
31 //开始构建div
32 var div_str = "<div id=" + select_id + "_div class='select_div' style='width:" + opts.width + "px;display:none;position:absolute;top:" + offset.top + "px;left:" + offset.left + "px'>";
33 //构建iframe,用来在IE里挡住select,如果iframe参数为true的话
34 var iframeStr = '<iframe src="javascript:false" style="display:none;position:absolute; visibility:inherit;border:0px; top:0px; left:-1px; width:' + (opts.width + 20) + '; height:100%; z-index:-1;-moz-opacity:0; filter=\'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)\';"></iframe>';
35 if (opts.iframe) {
36 if ($.browser.msie) {
37 div_str += iframeStr;
38 }
39 }
40
41 div_str += "<div class='select_div_title'>" + title + "</div>";
42 div_str += "<table class='select_div_table' id=" + select_id + "_table width=100% cellpadding=0 cellspacing=0>";
43 //创建table内容tr和td
44 //alert(select_id);
45 div_table_trtd = $.fn.multiSelect.createTrTd(select_id, opts.arr);
46 div_str += div_table_trtd + "</table><div class='select_div_bottom'><input id=" + select_id + "_ok type=button value='确定'></div></div>";
47 //添加到页面上
48 $(div_str).appendTo('body');
49
50 //如果div过高,则显示滚动条
51 if ($("#" + select_id + "_div").height() > opts.height) {
52 $("#" + select_id + "_div").height(opts.height);
53 //IE这个老家伙总是要来点hack才舒服
54 if ($.browser.msie) {
55 $("#" + select_id + "_div .select_div_title").width($("#" + select_id + "_div").width() - 10);
56 $("#" + select_id + "_div .select_div_bottom").width($("#" + select_id + "_div").width() - 16);
57 }
58 }
59
60 //定义打开函数
61 $.fn.multiSelect.opener(select_id, opts);
62 //定义div里的checkbox点击事件
63 $.fn.multiSelect.checkboxClick(select_id, opts);
64 //定义确定按钮的点击事件
65 $.fn.multiSelect.okClick(select_id, opts);
66 }
67
68 $.fn.multiSelect.checkboxClick = function(select_id, opts) {
69 //获取div的jquery对象
70 $obj = $("#" + select_id + "_div :checkbox");
71
72 //定义点击事件
73 $obj.click(function() {
74
75 //改变背景颜色
76 if ($(this).attr("checked")) {
77 $(this).parent().parent().addClass("selected");
78 }
79 else {
80 $(this).parent().parent().removeClass("selected");
81 }
82
83 $checked_obj = $("#" + select_id + "_div :checkbox:checked");
84
85 var val = '';
86 var text = '';
87 for (var i = 0; i < $checked_obj.length; i++) {
88 val += $checked_obj.eq(i).val() + ",";
89 text += $checked_obj.eq(i).attr("text") + ",";
90
91 }
92 val = val.substr(0, val.length - 1);
93 text = text.substr(0, text.length - 1);
94 if (text == "") text = opts.titleName;
95 //把值赋给一个控件
96 document.getElementById(opts.hiddenFieldID).value = text;
97 if (text.length > 5 && text != opts.titleName) text = text.substr(0, 5) + "..";
98 document.getElementById(select_id).value = text;
99 });
100 }
101
102 //定义确定按钮的点击事件,点击后div消失
103 $.fn.multiSelect.okClick = function(select_id, opts) {
104 $("#" + select_id + "_ok").click(function() {
105 $("#" + select_id + "_div").slideUp("fast", function() {
106 $("#" + select_id).css("visibility", "visible");
107 });
108 });
109 }
110
111 //定义打开div函数
112 $.fn.multiSelect.opener = function(select_id, opts) {
113 $obj = $("#" + select_id); // + "_open"
114 $obj.click(function() {
115 //关掉所有打开的div
116 $(".select_div").slideUp("fast");
117 $("select").css("visibility", "visible");
118 if (opts.iframe) {
119 //定义iframe的css
120 if ($.browser.msie) {
121 $("#" + select_id + "_div iframe").css("display", "block").css("height", $("#" + select_id + "_div").height());
122 }
123 }
124 else {
125 $("#" + select_id).css("visibility", "hidden");
126 }
127 $("#" + select_id + "_div").slideDown("fast");
128 });
129 }
130
131 //创建tr和td
132 $.fn.multiSelect.createTrTd = function(select_id, arr) {
133 var trtd = "";
134 var bg_class = "odd";
135 var b = arr;
136
137 for (var i = 0; i < b.length; i++) {
138
139 trtd = trtd + "<tr class='" + bg_class + "'><td>" + b[i] + "</td><td class='right_td'><input text='" + b[i] + "' type=checkbox value='" + i + "'></td></tr>";
140 }
141 return trtd;
142 }
143
144
145 $.fn.multiSelect.defaults = {
146 width: 300,
147 height: 200,
148 iframe: true,
149 titleName: ""
150 }
151
152})(jQuery);
153
154
在页面上添加一个textbox和一个隐藏域:
<input id="select_park1" class="CityBD_3 maall5 ListText" runat="server" type="text"
readonly="readonly" value="-花园类型-" />
<asp:HiddenField ID="hiddenGarden" runat="server" />
同时添加脚本:
Code
1 /**//**
2 * 参数说明:
3 * width:定义该多选div的宽度
4 * height:定义该div的最大高度
5 * iframe:定义是否启用iframe,如果有多个select,并需要盖住的话,将iframe设为true
6 */
7 $(document).ready(function() {
8 $("#<%= select_park1.ClientID %>").multiSelect({
9 width: 90, height: 300,
10 iframe: true,
11 titleName: "-花园类型-",
12 arr: new Array("入户花园", "天台花园", "露台花园"),
13 hiddenFieldID: "<%= hiddenGarden.ClientID %>"
14 });
15 });
CSS样式:
Code
1<style type="text/css">
2 /**//* select div的样式 */.select_div
3 {}{
4 font-size: 12px;
5 font-family: Verdana;
6 border: 1px solid #333;
7 overflow-y: auto;
8 }
9 .select_div table
10 {}{
11 border: 0px;
12 table-layout: fixed;
13 }
14 .select_div .select_div_title
15 {}{
16 padding: 5px;
17 background: #658BB2;
18 color: #fff;
19 font-weight: bold;
20 font-size: 14px;
21 white-space: nowrap;
22 height: 20px;
23 }
24 .select_div tr
25 {}{
26 font-weight: bold;
27 color: #000;
28 height: 24px;
29 }
30 .select_div .odd
31 {}{
32 background: #fff;
33 }
34 .select_div .even
35 {}{
36 background: #fff;
37 }
38 .select_div .selected
39 {}{
40 background: #D9E9FE;
41 }
42 .select_div td
43 {}{
44 padding-left: 5px;
45 white-space: nowrap;
46 }
47 .select_div .right_td
48 {}{
49 text-align: right;
50 width: 20px;
51 padding: 5px;
52 }
53 .select_div .select_div_bottom
54 {}{
55 background: #ddd;
56 padding: 8px;
57 text-align: right;
58 }
59</style>
1<style type="text/css">
2 /**//* select div的样式 */.select_div
3 {}{
4 font-size: 12px;
5 font-family: Verdana;
6 border: 1px solid #333;
7 overflow-y: auto;
8 }
9 .select_div table
10 {}{
11 border: 0px;
12 table-layout: fixed;
13 }
14 .select_div .select_div_title
15 {}{
16 padding: 5px;
17 background: #658BB2;
18 color: #fff;
19 font-weight: bold;
20 font-size: 14px;
21 white-space: nowrap;
22 height: 20px;
23 }
24 .select_div tr
25 {}{
26 font-weight: bold;
27 color: #000;
28 height: 24px;
29 }
30 .select_div .odd
31 {}{
32 background: #fff;
33 }
34 .select_div .even
35 {}{
36 background: #fff;
37 }
38 .select_div .selected
39 {}{
40 background: #D9E9FE;
41 }
42 .select_div td
43 {}{
44 padding-left: 5px;
45 white-space: nowrap;
46 }
47 .select_div .right_td
48 {}{
49 text-align: right;
50 width: 20px;
51 padding: 5px;
52 }
53 .select_div .select_div_bottom
54 {}{
55 background: #ddd;
56 padding: 8px;
57 text-align: right;
58 }
59</style>
Code
图片:
1/**//**下拉列表2009-05-09**/
2.ListText{}{background:url(../images/DropDown/TextBtn.jpg) no-repeat;height:20px;width:92px!important;width:84px;border:0px;line-height:20px;cursor:pointer;padding:2px 0px 0px 0px!important;padding:0px 0px 0px 8px}