[1].[代码] jquery 插件
001 | ( function ($) { |
002 | $.fn.DhoverClass = function (className) { |
003 | return $( this ).hover( function () { $( this ).addClass(className); }, function () { $( this ).removeClass(className); }); |
004 | } |
005 | function getDulyOffset(target, w, h) { |
006 | var pos = target.offset(); |
007 | var height = target.outerHeight(); |
008 | var newpos = { left: pos.left, top: pos.top + height - 1 } |
009 | var bw = document.documentElement.clientWidth; |
010 | var bh = document.documentElement.clientHeight; |
011 | if ((newpos.left + w) >= bw) { |
012 | newpos.left = bw - w - 2; |
013 | } |
014 | if ((newpos.top + h) >= bh && bw > newpos.top) { |
015 | newpos.top = pos.top - h - 2; |
016 | } |
017 | return newpos; |
018 | } |
019 | function returnfalse() { return false ; }; |
020 | $.fn.dropdown = function (o) { |
021 | var options = $.extend({ |
022 | vinputid: null , |
023 | cssClass: "dropdown" , |
024 | containerCssClass: "dropdowncontainer" , |
025 | dropwidth: false , |
026 | dropheight: "auto" , |
027 | autoheight: true , |
028 | editable: false , |
029 | selectedchange: false , |
030 | items: [], |
031 | selecteditem: false , |
032 | parse: { |
033 | name: "list" , |
034 | render: function (parent) { |
035 | var m = this ; |
036 | var p = this .target; |
037 | var ul = $( "<ul/>" ); |
038 | if ( this .items && this .items.length > 0) { |
039 | $.each( this .items, function () { |
040 | var item = this ; |
041 | var d = $( "<div/>" ).html(item.text).data( "data" , item); |
042 | var li = $( "<li/>" ); |
043 | li.DhoverClass( "hover" ).append(d) |
044 | .click( function () { |
045 | var t = li.find( ">div" ).data( "data" ); |
046 | p.SelectedChanged(t); |
047 | }); |
048 | if (item.classes && item.classes != "" ) { |
049 | d.addClass(item.classes); |
050 | } |
051 | ul.append(li); |
052 | }); |
053 | } |
054 | parent.append(ul); |
055 | this .parent = parent; |
056 | ul = null ; |
057 | //绑定键盘事件 TODO |
058 | }, |
059 | items: [], |
060 | setValue: function (item) { }, |
061 | target: null |
062 | } |
063 | }, o); |
064 | var me = $( this ); |
065 | var v; |
066 | if (options.vinputid) { |
067 | v = $( "#" + options.vinputid); |
068 | } |
069 | if (options.selecteditem) { |
070 | me.val(options.selecteditem.text); |
071 | if (v && options.selecteditem.value) { |
072 | v.val(options.selecteditem.value); |
073 | } |
074 | } |
075 | if (!options.editable) { |
076 | me.attr( "readonly" , true ); |
077 | } |
078 |
079 | me.addClass(options.cssClass).DhoverClass( "hover" ); |
080 | if (!options.dropwidth) { |
081 | options.dropwidth = me.outerWidth(); |
082 | } |
083 | var d = $( "<div/>" ).addClass(options.containerCssClass) |
084 | .css({ position: "absolute" , "z-index" : "999" , "overflow" : "auto" , width: options.dropwidth, display: "none" }) |
085 | .click( function (event) { event.stopPropagation(); }) |
086 | .appendTo($( "body" )); |
087 | if (options.autoheight) { |
088 | d.css( "max-height" , options.dropheight); |
089 | } |
090 | else { |
091 | d.css( "height" , options.dropheight); |
092 | } |
093 |
094 | if ($.browser.msie) { |
095 | if (parseFloat($.browser.version) <= 6) { |
096 | var ie6hack = $( "<div/>" ).css({ position: "absolute" , "z-index" : "-2" , "overflow" : "hidden" , "height" : "100%" , width: "100%" }); |
097 | ie6hack.append($( '<iframe style="position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>' )); |
098 | d.append(ie6hack); |
099 | } |
100 | } |
101 |
102 | me.click( function () { |
103 | var m = this ; |
104 | if (d.attr( "isinited" ) != "true" ) { |
105 | options.parse.items = options.items; |
106 | options.parse.selectedItem = options.selecteditem; |
107 | options.parse.render(d); |
108 | if (options.selecteditem) { |
109 | options.parse.setValue.call(d, options.selecteditem); |
110 | } |
111 | d.attr( "isinited" , "true" ); |
112 | } |
113 | if (d.css( "display" ) == "none" ) { |
114 | if (options.parse.onshow) { |
115 | options.parse.onshow(d); |
116 | } |
117 | var pos = getDulyOffset(me, options.dropwidth, options.dropheight); |
118 | d.css(pos); |
119 | d.show(); |
120 | if ($.browser.msie) { |
121 | if (parseFloat($.browser.version) <= 6) { |
122 | var h = d.height(); |
123 | if (h > options.dropheight) { |
124 | d.height(options.dropheight); |
125 | } |
126 | } |
127 | } |
128 | $(document).one( "click" , function (event) { d.hide(); }); |
129 | } |
130 | else { |
131 | $(document).click(); |
132 | } |
133 | return false ; |
134 | }); |
135 | me.SelectedChanged = function (t) { |
136 | var b = true ; |
137 | if (options.selectedchange) { |
138 | b = options.selectedchange.apply(me, [t]); |
139 | } |
140 | if (b != false ) { |
141 | me.val(t.text); |
142 | if (v && t.value) { |
143 | v.val(t.value); |
144 | } |
145 | } |
146 | d.hide(); |
147 |
148 | }; |
149 | me.Invaildate = function () { |
150 | d.attr( "isinited" , "false" ); |
151 | } |
152 | me.ExtendOption = function (o) { |
153 | $.extend(options, o); |
154 | } |
155 | me.Cancel = function () { |
156 | d.hide(); |
157 | } |
158 | options.parse.target = me; |
159 | return me; |
160 | } |
161 |
162 |
163 | })(jQuery); |
[2].[代码] html 跳至 [1] [2] [3] [4] [5] [6]
1 | <input type= "text" id= "dplist1" name= "dplist1" class= "_w150" /> |
2 | <input type= "hidden" id= "hdvalue1" name= "hdvalue1" /> |
[3].[代码] css 文件 跳至 [1] [2] [3] [4] [5] [6]
001 | input.dropdown |
002 | { |
003 | border:solid 1px #b4b4b4 !important; |
004 | background:url( "../image/plugin/dropdown/dparrow.png" ) no-repeat right 4px; |
005 | cursor: default ; |
006 | overflow:hidden; |
007 | height: 17px; |
008 | line-height: 17px; |
009 | padding: 4px 22px 4px 4px; |
010 | font-size:14px; |
011 | } |
012 | input.dropdown.hover |
013 | { |
014 | padding-right:15; |
015 | background:url( "../image/plugin/dropdown/dparrow.png" ) no-repeat right -29px; |
016 | } |
017 | .dropdowncontainer |
018 | { |
019 | cursor: default ; |
020 | padding:0; |
021 | overflow-x:hidden !important; |
022 | font-size:14px; |
023 | border:1px solid #555; |
024 | background-color: #fff; |
025 | } |
026 | .dropdowncontainer ul |
027 | { |
028 | list-style: none; |
029 | margin: 0; |
030 | padding: 0; |
031 | border: none; |
032 | |
033 | } |
034 | .dropdowncontainer ul li |
035 | { |
036 | padding:2px 4px; |
037 | margin: 0; |
038 | list-style: none; |
039 | white-space:nowrap; |
040 | } |
041 | .dropdowncontainer ul li.hover |
042 | { |
043 | color: #fff; |
044 | background: #3161c5; |
045 | } |
046 | .dropdowncontainer ul li.selected |
047 | { |
048 | color: #fff; |
049 | background: #3161c5; |
050 | } |
051 | input.dropdown._w60 |
052 | { |
053 | width:43px; |
054 | } |
055 | input.dropdown._w90 |
056 | { |
057 | width:63px; |
058 | } |
059 | input.dropdown._w120 |
060 | { |
061 | width:93px; |
062 | } |
063 | input.dropdown._w150 |
064 | { |
065 | width:123px; |
066 | } |
067 | input.dropdown._w180 |
068 | { |
069 | width:153px; |
070 | } |
071 | input.dropdown._w200 |
072 | { |
073 | width:173px; |
074 | } |
075 |
076 | .qtableContainer |
077 | { |
078 | padding:2px; |
079 | background: #dfe8f6; |
080 | border: #ccc solid 1px; |
081 | /* |
082 | box-shadow:2px 2px 4px #666; |
083 | -moz-box-shadow:2px 2px 4px #666; |
084 | -webkit-box-shadow:2px 2px 4px #666; |
085 | */ |
086 | } |
087 | .qtableContainer .querytainer |
088 | { |
089 | border: 1px solid #99bbe8; |
090 | border-bottom:none; |
091 | background: #fff url("../image/plugin/dropdown/tbg.gif") repeat-x left top; |
092 | display:block; |
093 | overflow:hidden; |
094 | text-align:right; |
095 | padding:2px 5px; |
096 | } |
097 | .qtableContainer .querytainer input |
098 | { |
099 | height:17px; |
100 | line-height:17px; |
101 | padding:2px 4px; |
102 | margin:0px; |
103 | width:150px; |
104 | background: #fff; |
105 | } |
106 | .qtableContainer .querytainer input.watermark |
107 | { |
108 | color: #999; |
109 | } |
110 | .qtableContainer .querytainer a |
111 | { |
112 | margin-top:4px; |
113 | margin-left:-20px; |
114 | display:block; |
115 | float:left; |
116 | width:16px; |
117 | height:16px; |
118 | background:url( "../image/plugin/dropdown/uquery.gif" ) no-repeat center center; |
119 | } |
120 | .qtableContainer .tablecontaienr |
121 | { |
122 | background: #fff; |
123 | } |
124 | .qtableContainer .tablecontaienr table |
125 | { |
126 | border-left: 1px solid #99bbe8; |
127 | |
128 | } |
129 | .qtableContainer .tablecontaienr th |
130 | { |
131 | font-size:12px; |
132 | font-weight:normal; |
133 | color: #000; |
134 | border-right: 1px solid #99bbe8; |
135 | border-bottom: 3px double #99bbe8; |
136 | border-top: 1px solid #99bbe8; |
137 | } |
138 | .qtableContainer .tablecontaienr tr.hover |
139 | { |
140 | background: #FFFFBB; |
141 | } |
142 | .qtableContainer .tablecontaienr td |
143 | { |
144 | border-right: 1px solid #99bbe8; |
145 | border-bottom: 1px solid #99bbe8; |
146 | padding:2px 0px; |
147 | font-size:12px; |
148 | text-align:center; |
149 | color: #333; |
150 | } |
151 | .qtableContainer .tablecontaienr th div |
152 | { |
153 | padding:4px 4px; |
154 | overflow:hidden; |
155 | } |
156 | .qtableContainer .tablecontaienr td div |
157 | { |
158 | padding:2px 4px; |
159 | overflow:hidden; |
160 | } |
161 | .qtableContainer .pagecontainer |
162 | { |
163 | padding:6px 4px 4px 0px; |
164 | text-align:right; |
165 | border: 1px solid #99bbe8; |
166 | border-top:none; |
167 | background: #fff; |
168 | } |
169 | .qtableContainer .pagecontainer a |
170 | { |
171 | margin:2px 4px; |
172 | color: #1e5494; |
173 | } |
174 | .qtableContainer .pagecontainer a:hover |
175 | { |
176 | text-decoration:underline; |
177 | } |
178 | .qtableContainer .pagecontainer span |
179 | { |
180 | margin:2px 4px; |
181 | color: #1e5494; |
182 | } |
183 | .dtreecontainer |
184 | { |
185 | padding:2px; |
186 | background: #dfe8f6; |
187 | border: #ccc solid 1px; |
188 | /* |
189 | box-shadow:2px 2px 4px #666; |
190 | -moz-box-shadow:2px 2px 4px #666; |
191 | -webkit-box-shadow:2px 2px 4px #666; |
192 | */ |
193 | } |
[4].[代码] 调用 跳至 [1] [2] [3] [4] [5] [6]
01 | $( "#dplist1" ).dropdown({ vinputid: "hdvalue1" , |
02 | selecteditem: { text: "英国" , value: "en" }, |
03 | items: [ |
04 | { text: "中国" , value: "china" , classes: "ch" }, |
05 | { text: "美国" , value: "us" , classes: "us" }, |
06 | { text: "英国" , value: "en" , classes: "en" }, |
07 | { text: "日本" , value: "jp" , classes: "jp" }, |
08 | { text: "法国" , value: "fr" , classes: "fr" } |
09 | ] |
10 | }); |
[5].[代码] 自定义样式 跳至 [1] [2] [3] [4] [5] [6]
01 | .ch |
02 | { |
03 | padding-left : 20px ; |
04 | background : url ( "../../statics/image/flag/cn.gif" ) no-repeat left center ; |
05 | } |
06 | .us |
07 | { |
08 | padding-left : 20px ; |
09 | background : url ( "../../statics/image/flag/us.gif" ) no-repeat left center ; |
10 | } |
11 | .en |
12 | { |
13 | padding-left : 20px ; |
14 | background : url ( "../../statics/image/flag/en.gif" ) no-repeat left center ; |
15 | } |
16 | .jp |
17 | { |
18 | padding-left : 20px ; |
19 | background : url ( "../../statics/image/flag/jp.gif" ) no-repeat left center ; |
20 | } |
21 | .fr |
22 | { |
23 | padding-left : 20px ; |
24 | background : url ( "../../statics/image/flag/fr.gif" ) no-repeat left center ; |
25 | } |