只要是做網頁設計的人都會知道內建的 checkbox 及 radio 元素就是一個字 - "醜",因此還是得透過 JavaScript 及 CSS 來做偽裝囉。什麼~不會寫程式!那就來試試看用 jQuery Custom Check Box and Radio Buttons 套件,只要替換圖片就能產生有特色的 checkbox 及 radio 哩。
套件名稱:jQuery Custom Check Box and Radio Buttonsb
套件版本:1.0.6
作者網站:http://mypocket-technologies.com/jquery/cust_radio_buttons/
套件網址:http://plugins.jquery.com/project/custom_radio_buttons
發佈日期:2009-09-27
檔案大小:5.88 KB
檔案下載:cust_checkbox_plugin.js style.css
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | disable_all(選填) 描述: 停用全部的選項 預設值: false hover(選填) 描述: 是否加入 hover 時的狀態 預設值: true wrapperclass(選填) 描述: checkbox 及 radio 的 wrapper 標籤;但...好像沒作用 預設值: "group" callback(選填) 描述: 當點選後所觸發的事件 預設值: function(){} |
方法說明:
檢視原始碼 JavaScript
1 2 | // 幫指定的 checkbox 或 radio 轉換成圖片型態 $(selector).custCheckBox(options); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script type="text/javascript" src="jquery.js"></script> <link type="text/css" rel="stylesheet" href="style.css"> <script type="text/javascript" src="cust_checkbox_plugin.js"></script> <script type="text/javascript"> $(function(){ $(":checkbox").custCheckBox(); // 加上 callback 事件 $(":radio").custCheckBox({ callback: function(){ alert("您點選了:" + $(this).nextAll("input:first").val()); } }); }); </script> <body> <div class="group"> <label>Check One:</label> <input type="checkbox" value="1x" name="checkboxone" id="1x" checked="checked"/> <label>Check Two:</label> <input type="checkbox" value="2x" name="checkboxone" id="2x"/> <label>Check Three:</label> <input type="checkbox" value="3x" name="checkboxone" id="3x" checked="checked"/> </div> <div class="groupRadio"> <label>Radio One:</label> <input type="radio" value="4x" name="radioone" id="4x"/> <label>Radio Two:</label> <input type="radio" value="5x" name="radioone" id="5x" checked="checked"/> <label>Radio Three:</label> <input type="radio" value="6x" name="radioone" id="6x"/> </div> </body> |
checkbox 及 radiobox 的圖片:
不好意思... 關鍵字竟然不見了... ^^"
請問如果 Label 要放到 radio 的後面, 要如何才能 attach the click event for each label 呢..? 謝謝!
打開 cust_checkbox_plugin.js, 把其中的 prev 改成 next, 而原有的 next 改成 prev
接著在把唯一的 before 改成 after 即可
我想請問一下圖片要放在哪個目錄下, 點選之後程式運作正常, 但圖示卻顯示不出來
不好意思我看到還有一個css檔可以下載, 謝謝