jquery 插件 实现一个combox

[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

}

 

[6].[图片] 123333.jpg