Home » jQuery 外掛

[jQ]jQuery Custom Check Box and Radio Buttons 1.0.6

[ 日期： | 瀏覽：12,454 | 迴響：19 ]
範例 1
請協助我把這個效果加到我的網站 (只要 500 元)
沒錯!只要 500 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

jquery_custom_check_box_and_radio_buttons_1_0_4

只要是做網頁設計的人都會知道內建的 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>
範例 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 2

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

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

1 2

發表迴響