Home » jQuery 外掛

[jQ]jQuery Custom Check Box and Radio Buttons 1.0.6

範例 1
沒錯!只要 500 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

jquery_custom_check_box_and_radio_buttons_1_0_4

只要是做網頁設計的人都會知道內建的 checkboxradio 元素就是一個字 - "醜",因此還是得透過 JavaScriptCSS 來做偽裝囉。什麼~不會寫程式!那就來試試看用 jQuery Custom Check Box and Radio Buttons 套件,只要替換圖片就能產生有特色的 checkboxradio 哩。

套件名稱: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>
範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

checkbox 及 radiobox 的圖片:
checkbox_disabled_on.png checkbox_off.png checkbox_on.png radiobox_disabled_on.png disabled_off.png radiobox_on.png

19 筆針對 [jQ]jQuery Custom Check Box and Radio Buttons 1.0.6 的迴響

  1. 不好意思... 關鍵字竟然不見了... ^^"
    請問如果 Label 要放到 radio 的後面, 要如何才能 attach the click event for each label 呢..? 謝謝!

    • 打開 cust_checkbox_plugin.js, 把其中的 prev 改成 next, 而原有的 next 改成 prev
      接著在把唯一的 before 改成 after 即可

發表迴響