div類比下拉式功能表select控制項模組 css實現表單select美化

來源:互聯網
上載者:User

     div css類比實現form表單下拉select控制項美化與功能實現。可以實現類比的select表單下拉提交資料傳值功能

    使用方法與調用方式:$.divselect("#divselect","#inputselect"); "#divselect" 這是哪個類比列表的盒子的ID,"#inputselect"這個是選擇以後給 id="inputselect" 的input隱藏欄位賦值的哦。 懂一點程式的都明白為啥要賦值了。意思就是給這個隱藏欄位賦值就相當於用醜陋的select下拉式清單得到一個值是同理的。下拉式清單的功能無非也就是傳一個值提交過去。

     此form select下拉控制項是使用div+jq+css實現,其表單功能正常使用,能正常傳值。根據需要修改css背景、css寬度、css高度等圖片或css樣式實現自己想要的select下拉式功能表表單美化效果。

jquery外掛程式代碼如下:

 
  1. jQuery.divselect = function(divselectid,inputselectid) { 
  2. var inputselect = $(inputselectid); 
  3. $(divselectid+" cite").click(function(){ 
  4. var ul = $(divselectid+" ul"); 
  5. if(ul.css("display")=="none"){ 
  6. ul.slideDown("fast"); 
  7. }else{ 
  8. ul.slideUp("fast"); 
  9. }); 
  10. $(divselectid+" ul li a").click(function(){ 
  11. var txt = $(this).text(); 
  12. $(divselectid+" cite").html(txt); 
  13. var value = $(this).attr("selectid"); 
  14. inputselect.val(value); 
  15. $(divselectid+" ul").hide(); 
  16.  
  17. }); 
  18. }; 

div類比下拉式功能表(select)jquery外掛程式調用方法如下:

 
  1. <script type="text/javascript"> 
  2. $(function(){ 
  3. $.divselect("#divselect","#inputselect"); 
  4. }); 
  5. </script> 

對應HTML原始碼片段如下:

 
  1. <form action="" method="post"> 
  2. <div id="divselect"> 
  3. <cite>請選擇特效分類</cite> 
  4. <ul> 
  5. <li><a href="javascript:;" selectid="1">導覽功能表</a></li> 
  6. <li><a href="javascript:;" selectid="2">下拉select效果</a></li> 
  7. <li><a href="javascript:;" selectid="3">select類比</a></li> 
  8. <li><a href="javascript:;" selectid="4">DIVCSS5特效</a></li> 
  9. <li><a href="javascript:;" selectid="5">jquery 下拉式功能表特效</a></li> 
  10. </ul> 
  11. </div> 
  12. <input name="" type="hidden" value="" id="inputselect"/> 
  13.  
  14. </form> 
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.