jquery2014-08-29 21:21:40 4256
Jq CSSCombox简单选择框实现。通过传入json数据源来设置下拉框的选项,调用ComboxHandler.SelectedItem()函数来获取选择的值。
CSS:
#mainBody { width: 300px; height: 300px; margin: 0 auto; margin-top: 30px; } .comboxMain { float: left; margin: 30px 0 0 30px; -webkit-box-shadow: 0px 0px 5px #ccc; -moz-box-shadow: 0px 0px 5px #ccc; box-shadow: 0px 0px 5px #ccc; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; overflow: hidden; } .comboxItem { margin: 0; padding: 0; list-style: none; font: 15px "微软雅黑", Arial, Helvetica, sans-serif; text-align: center; border: 1px solid #ccc; margin-top: -1px; float: left; cursor: pointer; } .comboxItem:hover { background-color: #efefef; } .comBoxText { font: 15px "微软雅黑", Arial, Helvetica, sans-serif; cursor: pointer; border: 1px solid #ccc; float: left; text-align: center; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } .comboxMain:hover .comBoxText { background-color: #F1F1F1; } .comboxItemLast { margin: 0; padding: 0; list-style: none; font: 15px "微软雅黑", Arial, Helvetica, sans-serif; text-align: center; border: 1px solid #ccc; margin-top: -1px; float: left; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; }
Html:
ComBox
Js:
$(document).ready(function(e) { ComboxHandler.Init(); }); var ComboxHandler={ comboxWidth:200, comboxHeight:40, comboxItemHeight:80, conboxItemShow:false, comboxItemArray:["HTML5","CSS3","Javascript","Jquery","PHP","ASP.NET","JSP"], comboxItemNorHeight:0, Init:function(){ $(".comboxMain").css("width",ComboxHandler.comboxWidth 2 "px"); $(".comBoxText").css({ "width":ComboxHandler.comboxWidth "px", "line-height":ComboxHandler.comboxHeight "Px" }); for(var i=0;i<ComboxHandler.comboxItemArray.length;i ){ var items=$("" ComboxHandler.comboxItemArray[i] ""); items.attr("class","comboxItem"); $(".comboxMain").append(items); } $(".comboxItem").click(function(event){ event.stopPropagation(); $(".comBoxText").html($(this).html()); ComboxHandler.comboxHide($(".comboxMain")); }); $(".comboxItem").css({ "width":ComboxHandler.comboxWidth "px", "line-height":ComboxHandler.comboxHeight "px", }); ComboxHandler.comboxItemNorHeight=$(".comboxMain").height(); $(".comboxMain").css("height",$(".comBoxText").height() 2 "px"); $(".comBoxText").click(function(){ ComboxHandler.conboxItemShow==false?ComboxHandler.comboxShow($(this).parent()):ComboxHandler.comboxHide($(this).parent()); }); $(document.body).click( function(){ if(ComboxHandler.conboxItemShow==true){ ComboxHandler.conboxItemShow=false; ComboxHandler.comboxHide($(".comboxMain")); } } ); }, comboxShow:function(target){ $(target).find(".comboxItem").last().css({ "-webkit-border-radius":"0 0 5px 5px", "-moz-border-radius": "0 0 5px 5px", "border-radius": "0 0 5px 5px" }); $(target).animate({height:ComboxHandler.comboxItemNorHeight "px"},300,function(){ComboxHandler.conboxItemShow=true;}); }, comboxHide:function(target){ $(target).animate({height:$(".comBoxText").height() 2 "px"},300,function(){ComboxHandler.conboxItemShow=false;}); }, SelectedItem:function(){ return $(".comBoxText").html(); } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:JqCombox选择框,html Combox选择框
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/NzQ=.html
上一篇 ASP.NET文件传送
下一篇 Jq模态非模态弹出对话框插件