首页 > 代码库 > [snippet] Select Box

[snippet] Select Box

2024-07-04 14:36:32   224人阅读

js

function:

?
1
2
3
4
5
6
7
selectBox:function(){
                 var li=$(this);
                 var selectbox=li.parent().parent();
                 selectbox.attr("data-checked",li.attr("data-value"));
                 selectbox.children("div").text(li.text());
                 li.parent().slideUp("fast");
                 }

bind:

?
1
2
3
$(".selectbox>div").click(function(){$(this).siblings("ul").slideToggle("fast");});
            $(".selectbox").children("ul").mouseleave(function(){$(this).slideUp();})
            $(".selectbox>ul>li").click(sdk_effects.selectBox);

 

 html

<div id="num" class="selectbox" data-checked="">
  	<div>How many users does your app have?</div>
    <ul>
    	<li data-value="http://www.mamicode.com/1">0-1000</li>
      <li data-value="http://www.mamicode.com/2">1000-10000</li>
      <li data-value="http://www.mamicode.com/3">10000-100000</li>
    </ul>
  </div>

 

css

.selectbox{
	width:348px;
	height:50px;
	border:1px solid #C9C9C9;
	text-align:left;
	font-size:15px;
	text-indent:25px;
	line-height:50px;
	position:relative;
	margin-bottom:20px;}
.selectbox>div{
	background:urldata:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAHCAYAAADebrddAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABwSURBVChTY2gHgo6Ojv9E4AoGEACqX4pFEo6B8tPACkGgvr6eDSi4F10RCAMVbly1ahUzVCkEtLa2igIlb6MpPNnb28sJVYIK2traVICKXkEVP2lpaZGGSmEHQEVmQBOfA7EuVAg/APqBB8pEAgwMAB7xaYV5lkDCAAAAAElFTkSuQmCC) 315px center no-repeat;
	cursor:pointer;}
.selectbox ul{
	display:block;
	position:absolute;
	top:50px;
	left:-1px;
	list-style:none;
	cursor:pointer;
	width:100%;
	border:1px solid #C9C9C9;
	display:none;
	z-index:999;
	background:#FFF;}
.selectbox ul li{
	display:block;
	height:50px;}
.selectbox ul li:hover{
	background:#CD3333;
	color:#FFF;}

 


联系
我们