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


<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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值