[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 |
}
|
相关推荐
可以在http://www.cnblogs.com/strick/p/3884721.html查看到相关说明
js 实现combox 树选择 js 实现combox 树选择
NULL 博文链接:https://javabean96.iteye.com/blog/1179065
combox 实现搜寻功能combox 实现搜寻功能
WPF .Net6 实现DataGrid嵌入ComBox绑定 通过绑定实现报表内容通过ComBox实现
combox加Cekbox实现多选按钮 combox实现多选功能并输出到textbox中
简单的实现了两个combox之间的二级联动,代码可以直接运行。
c#实现简单的combox自动搜索功能,类似百度的搜索输入框功能
可以实现vb的Combox自动下拉,用了别人的代码修改了一下。
C# winform实现combox绑定XML实现级联数据绑定
用html的格式,往combox加载数据项,方便用户对每项数据的大小字体颜色图片等的控制
datagridview中绑定combox,有代码 通过代码实现,向DataGridView中绑定combox.
可实现combox样式,可自已编辑,一个文本框加下拉
6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9.jquery仿flash的图片幻灯片播放特效实例完整版 10....
Unity3D中实现类似Combox控件功能 点击按钮弹出按钮列表执行选择(无法直接使用数据源读取的是我的本地mysql数据库)
combox实现的可编辑下拉框 可编辑下拉框,其实就是在下拉框的上面放了个无边框的输入框,在输入框输数据时,下拉框自动定位,下拉框选中某项时,下拉框的值赋给输入框,从而产生错觉
Winform中的ComBox控件实现换行 当文本长度达到最大时实现换行
combox下拉树combox下拉树combox下拉树combox下拉树combox下拉树combox下拉树combox下拉树
combox的栏数如何生成?
Flex写的一个combox多选控件,小主一直用着的,暂未发现BUG,请大神多多指教!