<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>