Home » jQuery 外掛

[jQ]jQuery checkbox 1.3.0 Beta 1

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



如果你不想用瀏覽器預設的勾選或單選框樣式的話，那可以試試 jQuery checkbox 這套件。它提供了有別於一般瀏覽器內建的樣式，同時也可以透過修改 CSS 來快速變成另外的風格。

套件名稱：jQuery custom checkboxesy
套件版本：1.3.0 Beta 1
作者網站：http://widowmaker.kiev.ua/checkbox/
套件網址：http://plugins.jquery.com/project/jquery-checkbox
發佈日期：2009-04-15
檔案大小：4.03 KB
檔案下載：jquery.checkbox.js jquery.checkbox.css jquery.safari-checkbox.css

參數說明：

檢視原始碼 JavaScript
1
2
3
4
5
6
7

cls(選填)
描述： 要套用的樣式
預設值： 'jquery-checkbox'
 
empty(選填)
描述： 空白透明圖片位置
預設值： 'empty.png'

方法說明：

檢視原始碼 JavaScript
1
2

// 把指定勾選或單選框轉換成自訂的樣式風格
$(selector).checkbox(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
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.checkbox.css">
<link type="text/css" rel="stylesheet" href="jquery.safari-checkbox.css">
<script type="text/javascript" src="jquery.checkbox.js"></script>
<script type="text/javascript">
	$(function(){
		// 預設的樣式
		$('input:checkbox').checkbox({
			empty: 'images/empty.png'
		});
 
		// Safari 風格的樣式
		// 透過 cls 來變更風格
		$('input[safari]:checkbox').checkbox({
			cls: 'jquery-safari-checkbox',
			empty: 'images/empty.png'
		});
 
		// 單選框
		$('input:radio').checkbox({
			empty: 'images/empty.png'
		});
	});
</script>
 
<body>
	<h3>Default skin</h3>
	<label><input name="checkbox" type="checkbox" />&nbsp;自訂樣式的勾選框</label><br /><br />
	<label><input name="checkbox" type="checkbox" checked="checked" />&nbsp;勾選狀態</label><br /><br />
	<label><input name="checkbox" type="checkbox" disabled="disabled" />&nbsp;停用狀態</label><br /><br />
	<label><input name="checkbox" type="checkbox" disabled="disabled" checked="checked" />&nbsp;勾選且停用狀態</label>
 
	<h3>Safari skin</h3>
	<label><input name="checkbox" type="checkbox" safari=1>&nbsp;Safari 風格的勾選框</label><br /><br />
	<label><input name="checkbox" type="checkbox" safari=1 checked="checked" />&nbsp;勾選狀態</label><br /><br />
	<label><input name="checkbox" type="checkbox" safari=1 disabled="disabled">&nbsp;停用狀態</label><br /><br />
	<label><input name="checkbox" type="checkbox" safari=1 disabled="disabled" checked="checked" />&nbsp;勾選且停用狀態</label>
 
	<h3>Radio button</h3>
	<label><input name="radio" type="radio">&nbsp;第一個單選框</label><br /><br />
	<label><input name="radio" type="radio">&nbsp;第二個單選框</label><br /><br />
	<label><input name="radio" type="radio">&nbsp;第三個單選框</label>
</body>
範例 1

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

4 筆針對 [jQ]jQuery checkbox 1.3.0 Beta 1 的迴響

  2. 請問一下，那個checkbox的圖片，為何按右鍵另存圖片成
    empty.png後，都看不到那個圖的內容呢，
    即使把內容都整個copy上去了，仍然無法看到checkbox的圖片?

發表迴響