不说了 直接上代码
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0,max-scale=1.0,user-scalable=0;" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> *{margin:0; padding:0; list-style:none;} .selectId{ width:150px; height:40px; line-height:40px; text-align:center;background:#555; color:#FFF;} #selectBox{width:320px;} #selectBar{padding:5px; background:rgba(0,0,0,0.5);border-top:1px solid #000; -webkit-box-shadow:0 1px 1px #d4d4d4 inset;} #selectBar:after{content:""; clear:both;display:table;} #selectBar span{ float:left; padding:5px; font-size:11px; background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(50%,#313131),color-stop(51%,black),color-stop(100%,black)); border-radius:5px; color:#a1a0a0; -webkit-box-shadow:0 1px 1px #191b1f inset,0 -1px 1px #9f9f9f inset;font-weight:bold;} #selectBar span:nth-child(1){-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0; border-right:1px solid #9b9999; margin-left:5px;} #selectBar span:nth-child(2){-webkit-border-top-left-radius:0;-webkit-border-bottom-left-radius:0;} #selectBar span:nth-child(3){margin-left:10px; padding:5px 8px;} #selectBar span:nth-child(4){background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#6b87d8),color-stop(50%,#7595f0),color-stop(51%,#0e60f6),color-stop(100%,#4180f4)); float:right; color:#FFF;padding:5px 8px; cursor:pointer;} #selectList{ height:200px; padding:8px 10px; background:-webkit-gradient(linear,left top, left bottom,color-stop(0%,rgba(88,112,179,0.5)),color-stop(50%,rgba(88,112,179,0.8)),color-stop(51%,rgba(74,86,128,0.8)),color-stop(0%,rgba(74,86,128,0.5)))} #selectList #selectLi{ width:100%; height:100%;background:-webkit-gradient(linear,left top, left bottom,color-stop(0%,#3b3939),color-stop(20%,#ffffff),color-stop(80%,#ffffff),color-stop(100%,#3b3939)); -webkit-box-sizing:border-box;overflow:hidden; border-radius:5px; } #selectList #selectLi ul li{ font-size:24px; line-height:44px;height:44px;padding:0 10px 0 40px;} #selectList #selectLi ul li.current{ color:#376dd1;position:relative;} #selectList #selectLi ul li.current:after{position:absolute; content:"√"; color:#376dd1; display:block; width:40px; height:40px; visibility:visible; top:3px;left:16px;} </style> </head> <body> <div class="selectId" id="selectId">选择</div> <div id="selectBox" style="visibility:hidden"> <div id="selectBar"> <span id="before_btn">前一项</span> <span id="after_btn">后一项</span> <span id="auto_btn">自动填充</span> <span id="complete_btn">完成</span> </div> <div id="selectList" > <div id="selectLi"> <ul> <li>请选择1</li> <li>请选择2</li> <li>请选择3</li> <li>请选择4</li> <li>请选择5</li> <li>请选择6</li> <li>请选择7</li> <li>请选择8</li> <li>请选择9</li> <li>请选择10</li> <li>请选择11</li> <li>请选择12</li> <li>请选择13</li> <li>请选择14</li> <li>请选择15</li> <li>请选择16</li> <li>请选择17</li> <li>请选择18</li> </ul> </div> </div> </div> <script type="text/javascript" src ="themes/js/iscroll-min.js"></script> <script> var myScroll; function loaded() { myScroll = new iScroll("selectLi",{ hScrollbar:false, vScrollbar:true, }); } document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false); </script> <script> (function(){ var selectId = document.getElementById("selectId"); var complete_btn = document.getElementById("complete_btn"); var selectBox = document.getElementById("selectBox"); var selectList = document.getElementById("selectList"); var selectUl = selectList.getElementsByTagName("ul")[0]; var liList = selectUl.getElementsByTagName("li"); var ListLength = liList.length; var isClicked = false; var tag=0; selectId.onclick = function(){ selectBox.style.visibility ="visible"; }; complete_btn.onclick = function(){ selectBox.style.visibility ="hidden"; }; for(var i = 0; i < ListLength; i++){ liList[i].addEventListener("click",postText); liList[i].onclick =(function(i){ return function(){ if(i!=tag){ liList[tag].removeAttribute("class"); } isClicked = !isClicked; liList[i].setAttribute("class","current"); tag = i; } })(i); } function postText(){ selectTD = this.innerHTML; selectId.innerHTML = selectTD; } })(); </script> </body> </html>
注:需要下载iscroll 改下路径
bug:当整个设置为display:none的时候貌似iscroll获取不了高度 滚不起来。。还没想到办法 所以改成了visibility来隐藏 不过 也有个bug 就是那个勾 我用after写的 整个隐藏后 那个勾依然在页面上。
也请哪位知道的大神指导下。
图一张
