首页>>表单>>ui-choose|列表选择jQuery美化 模拟select选择 真实select选择(2020-09-08)

ui-choose|列表选择jQuery美化 模拟select选择 真实select选择

ui-choose|列表选择jQuery美化 模拟select选择 真实select选择
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="demo-box">  
  2.             <table class="demo-table">  
  3.                 <caption>选择插件演示</caption>  
  4.                 <tr>  
  5.                     <td style="width:120px;">  
  6.                         <label>普通(ul)</label>  
  7.                     </td>  
  8.                     <td>  
  9.                         <ul class="ui-choose" id="uc_01">  
  10.                             <li>html</li>  
  11.                             <li>css</li>  
  12.                             <li>javascript</li>  
  13.                             <li>php</li>  
  14.                             <li>nodejs</li>  
  15.                         </ul>  
  16.                     </td>  
  17.                 </tr>  
  18.                 <tr>  
  19.                     <td>  
  20.                         <label>普通(select)</label>  
  21.                     </td>  
  22.                     <td>  
  23.                         <select class="ui-choose" id="uc_02">  
  24.                             <option value="a">html</option>  
  25.                             <option value="b">php</option>  
  26.                             <option value="c">css</option>  
  27.                             <option value="d">javascript</option>  
  28.                             <option value="e">nodejs</option>  
  29.                         </select>  
  30.                     </td>  
  31.                 </tr>  
  32.                 <tr>  
  33.                     <td>  
  34.                         <label>多选(ul)</label>  
  35.                     </td>  
  36.                     <td>  
  37.                         <ul class="ui-choose" multiple="multiple" id="uc_03">  
  38.                             <li>html</li>  
  39.                             <li>css</li>  
  40.                             <li>javascript</li>  
  41.                             <li>php</li>  
  42.                             <li>nodejs</li>  
  43.                         </ul>  
  44.                     </td>  
  45.                 </tr>  
  46.                 <tr>  
  47.                     <td>  
  48.                         <label>多选(select)</label>  
  49.                     </td>  
  50.                     <td>  
  51.                         <select class="ui-choose" multiple="multiple" id="uc_04">  
  52.                             <option value="a">html</option>  
  53.                             <option value="b">php</option>  
  54.                             <option value="c">css</option>  
  55.                             <option value="d">javascript</option>  
  56.                             <option value="e">nodejs</option>  
  57.                         </select>  
  58.                     </td>  
  59.                 </tr>  
  60.             </table>  
  61.         </div>  

 

JavaScript Code
  1. <script>  
  2.     // 将所有.ui-choose实例化  
  3.     $('.ui-choose').ui_choose();  
  4.   
  5.     // uc_01 ul 单选  
  6.     var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象  
  7.     uc_01.click = function(index, item) {  
  8.         console.log('click', index, item.text())  
  9.     }  
  10.     uc_01.change = function(index, item) {  
  11.         console.log('change', index, item.text())  
  12.     }  
  13.   
  14.     // uc_02 select 单选  
  15.     var uc_02 = $('#uc_02').data('ui-choose');  
  16.     uc_02.click = function(value, item) {  
  17.         console.log('click', value);  
  18.     };  
  19.     uc_02.change = function(value, item) {  
  20.         console.log('change', value);  
  21.     };  
  22.   
  23.     // uc_03 ul 多选  
  24.     var uc_03 = $('#uc_03').data('ui-choose');  
  25.     uc_03.click = function(index, item) {  
  26.         console.log('click', index);  
  27.     };  
  28.     uc_03.change = function(index, item) {  
  29.         console.log('change', index);  
  30.     };  
  31.   
  32.     // uc_04 select 多选  
  33.     var uc_04 = $('#uc_04').ui_choose();  
  34.     uc_04.click = function(value, item) {  
  35.         console.log('click', value);  
  36.     };  
  37.     uc_04.change = function(value, item) {  
  38.         console.log('change', value);  
  39.     };  
  40.     </script>  

 


原文地址:http://www.freejs.net/article_biaodan_888.html