短小快捷的EasyCombox (^__^) 嘻嘻……

最新推荐文章于 2022-02-25 20:00:37 发布

最新推荐文章于 2022-02-25 20:00:37 发布 · 105 阅读

文章标签：

#jQuery #Dojo #YUI #C #C++ #ViewUI

JavaScript练习专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一个基于jQuery的自定义下拉框插件的实现过程，包括样式设置及交互逻辑，通过简单的代码示例展示了如何加载配置并显示一个包含多种选项的下拉菜单。


		<style type="text/css">
			.easy-combox {
				padding : 0px ;
				margin : 0 auto ;
				margin-top : 40px ;
				width : 227px ;
				border : none  ;
				background : #fff ;
			}
			.combox-console {
				padding : 0px ;
				margin : 0px ;
				width : 227px ;
				background : #fff ;
			}
			.combox-console .v {
				padding-left : 6px ;
				margin : 0px ;
				width : 194px ;
				height : 24px ;
				line-height : 24px ;
				font-size : 13px ;
				font-family : arial ;
				font-weight : bold ;
				color : #999 ;
				border : 1px solid #7D0000 ;
				float : left ;
			}
			.combox-console .c {
				padding : 0px ;
				margin : 0px ;
				width : 24px ;
				height : 24px ;
				line-height : 24px ;
				font-size : 12px ;
				font-family : arial ;
				color : #000 ;
				border : 1px solid #7D0000 ;
				border-left : 0px ;
				text-align : center ;
				float : right ;
				cursor : pointer ;
			}
			.combox-data {
				padding : 0px ;
				margin : 0px ;
				width : 225px ;
				border : 1px solid #7D0000 ;
				border-top : 0px ;
				clear : both ;
			}
			.combox-data ul {
				padding : 0px ;
				margin : 0px ;
				list-style : none ;
				width : 225px ;
			}
			.combox-data ul li {
				padding : 0px ;
				margin : 0px ;
				width : 225px ;
				height : 24px ;
			}
			.combox-data ul li a {
				padding-left : 10px ;
				margin : 0px ;
				width : 215px ;
				height : 24px ;
				line-height : 24px ;
				font-size : 13px ;
				font-family : arial ;
				color : #000 ;
				display : block ;
				text-decoration : none ;
			}
			.combox-data ul li a:hover {
				color : #fff ;
				background :  #555 ;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

		<script type="text/javascript">
			$(function(){
				var config = {
					renderTo : "foo" ,
					items : [
						"JQuery","Prototype","ExtJS","Dojo","YAHOO-YUI"
					]
				} ;
				EasyCombox.load(config) ;
			}) ;
			var EasyCombox = function(){
				function _showOrHide(jq){
					jq.slideToggle() ;
				} ;
				function _render(renderTo,items){
					var easyCombox = $("<div></div>")
								.addClass("easy-combox")
								.appendTo(renderTo) ;
					var comboxConsole = $("<div></div>")
								.addClass("combox-console")
								.appendTo(easyCombox) ;
					var v = $("<div></div>")
								.addClass("v")
								.appendTo(comboxConsole)
								.click(function(){
									_showOrHide($(".combox-data")) ;
								}) ;
					var c = $("<div></div>")
								.addClass("c")
								.html("▼")
								.appendTo(comboxConsole)
								.click(function(){
									_showOrHide($(".combox-data")) ;
								}) ;
					var comboxData = $("<div></div>")
								.addClass("combox-data")
								.appendTo(easyCombox) ;
					var _ul = $("<ul></ul>").appendTo(comboxData) ;
					for(var i=0;i<items.length;i++){
						var item = items[i] ;
						var _li = $("<li></li>").appendTo(_ul) ;
						var _a = $("<a href='#'></a>")
								.html(item)
								.appendTo(_li)
								.click(function(){
									$(".v").html($(this).html()) ;
									$(this).parents(".combox-data").hide() ;
								}) ;
					}
				} ;
				function load(config){
					var renderTo = $(document.getElementById(config.renderTo)) ;
					var items = config.items ;
					_render(renderTo,items) ;
				} ;
				return {
					load : load
				} ;
			}() ;
		</script>