浏览 1913 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2011-04-08
<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> 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |