在項目中，你會發現設計稿中常常會有單選框，復選框，但都不是系統默認的樣式，這就可以用jquery來模擬它們：
如圖所示，實現它們所需要的代碼如下：
首先需要引入的代碼：
<link rel="stylesheet" href="CSS/reset.css" type="text/css" /><link rel="stylesheet" href="css/jquery.inputbox.css" type="text/css" /><link rel="stylesheet" href="css/common.css" type="text/css" /><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script type="text/Javascript" src="js/jquery.inputbox.js"></script>
其次html結構代碼：
<!--模擬下拉框Select開始--> <div class="hotdiv"> <div class="numberN">1.模擬下拉框Select</div> <div class="div clearfix"> <div name="zhiwei" type="selectbox" class="zhiwei"> <div class="opts"> <a href="javascript:;" val="職位" class="selected">職位</a> <a href="javascript:;" val="職位2">職位2</a> </div> </div> <div name="hangye" type="selectbox" class="zhiwei"> <div class="opts"> <a href="javascript:;" val="行業" class="selected">行業</a> <a href="javascript:;" val="互聯網">互聯網</a> </div> </div> </div> <div class="div"> <div name="place" type="selectbox" class="place"> <div class="opts"> <a href="javascript:;" val="工作地點" class="selected">工作地點</a> <a href="javascript:;" val="上海">上海</a> </div> </div> </div> </div> <!--模擬下拉框Select開始結束--> <!--模擬Checkbox開始開始--> <div class="savediv"> <div class="numberN">2.Checkbox</div> <div class="cbt checked" name="check" type="checkbox" val="1" ></div> <span class="save">保存</span> </div> <!--模擬Checkbox開始結束--> <!--模擬Radio開始開始--> <div class="Radiodiv clearfix"> <div class="numberN">3.Radio</div> <div name="rbt" type="radiobox" val="cn" class="rbt checked"></div><span>中文</span> <div name="rbt" type="radiobox" val="en" class="rbt"></div><span>英文</span> </div> <!--模擬Radio開始結束-->
jquery調用代碼如下：
$(function(){ $('div[name="zhiwei"]').inputbox({ height:30,width:130}); $('div[name="hangye"]').inputbox({ height:30,width:155}); $('div[name="place"]').inputbox({ height:30,width:290}); $('.cbt').inputbox(); $('div[name="rbt"]').inputbox(); })
需要demo猛點該文字，百度云盤下載
新聞熱點
疑難解答
