jQuery UI 教程
使用與所有 jQuery UI 小部件相同的抽象化來(lái)創(chuàng)建有狀態(tài)的 jQuery 插件。
如需了解更多有關(guān)部件庫(kù)（Widget Factory）的細(xì)節(jié)，請(qǐng)查看 API 文檔 部件庫(kù)（Widget Factory）。
該演示展示了一個(gè)簡(jiǎn)單的使用部件庫(kù)（jquery.ui.widget.js）創(chuàng)建的自定義的小部件。
三個(gè)區(qū)塊是以不同的方式初始化的。點(diǎn)擊改變他們的背景顏色。查看源碼及注釋理解工作原理。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 部件庫(kù)（Widget Factory） - 默認(rèn)功能</title>
<link rel="stylesheet" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" >
<style>
.custom-colorize {
font-size: 20px;
position: relative;
width: 75px;
height: 75px;
}
.custom-colorize-changer {
font-size: 10px;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script>
$(function() {
// 部件定義，其中 "custom" 是命名空間，"colorize" 是部件名稱
$.widget( "custom.colorize", {
// 默認(rèn)選項(xiàng)
options: {
red: 255,
green: 0,
blue: 0,
// 回調(diào)
change: null,
random: null
},
// 構(gòu)造函數(shù)
_create: function() {
this.element
// 添加一個(gè)主題化的 class
.addClass( "custom-colorize" )
// 防止雙擊來(lái)選擇文本
.disableSelection();
this.changer = $( "<button>", {
text: "改變",
"class": "custom-colorize-changer"
})
.appendTo( this.element )
.button();
// 綁定 changer 按鈕上的 click 事件到 random 方法
this._on( this.changer, {
// 當(dāng)小部件被禁用時(shí)，_on 不會(huì)調(diào)用 random
click: "random"
});
this._refresh();
},
// 當(dāng)創(chuàng)建及之后改變選項(xiàng)時(shí)調(diào)用
_refresh: function() {
this.element.css( "background-color", "rgb(" +
this.options.red +"," +
this.options.green + "," +
this.options.blue + ")"
);
// 觸發(fā)一個(gè)回調(diào)/事件
this._trigger( "change" );
},
// 一個(gè)改變顏色為隨機(jī)值的公共方法
// 可通過(guò) .colorize( "random" ) 直接調(diào)用
random: function( event ) {
var colors = {
red: Math.floor( Math.random() * 256 ),
green: Math.floor( Math.random() * 256 ),
blue: Math.floor( Math.random() * 256 )
};
// 觸發(fā)一個(gè)事件，檢查是否已取消
if ( this._trigger( "random", event, colors ) !== false ) {
this.option( colors );
}
},
// 自動(dòng)移除通過(guò) _on 綁定的事件
// 在這里重置其他的修改
_destroy: function() {
// 移除生成的元素
this.changer.remove();
this.element
.removeClass( "custom-colorize" )
.enableSelection()
.css( "background-color", "transparent" );
},
// _setOptions 是通過(guò)一個(gè)帶有所有改變的選項(xiàng)的哈希來(lái)調(diào)用的
// 當(dāng)改變選項(xiàng)時(shí)總是刷新
_setOptions: function() {
// _super 和 _superApply
this._superApply( arguments );
this._refresh();
},
// _setOption 是為每個(gè)獨(dú)立的改變的選項(xiàng)調(diào)用的
_setOption: function( key, value ) {
// 防止無(wú)效的顏色值
if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
return;
}
this._super( key, value );
}
});
// 通過(guò)默認(rèn)選項(xiàng)進(jìn)行初始化
$( "#my-widget1" ).colorize();
// 通過(guò)兩個(gè)自定義的選項(xiàng)進(jìn)行初始化
$( "#my-widget2" ).colorize({
red: 60,
blue: 60
});
// 通過(guò)自定義的 green 值和一個(gè)只允許顏色足夠綠的隨機(jī)的回調(diào)進(jìn)行初始化
$( "#my-widget3" ).colorize( {
green: 128,
random: function( event, ui ) {
return ui.green > 128;
}
});
// 點(diǎn)擊切換 enabled/disabled
$( "#disable" ).click(function() {
// 為每個(gè)小部件使用自定義的選擇器來(lái)找到所有的實(shí)例
// 所有的實(shí)例一起切換，所以我們可以從第一個(gè)開(kāi)始檢查狀態(tài)
if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
$( ":custom-colorize" ).colorize( "enable" );
} else {
$( ":custom-colorize" ).colorize( "disable" );
}
});
// 在初始化后，點(diǎn)擊設(shè)置選項(xiàng)
$( "#black" ).click( function() {
$( ":custom-colorize" ).colorize( "option", {
red: 0,
green: 0,
blue: 0
});
});
});
</script>
</head>
<body>
<div>
<div id="my-widget1">改變顏色</div>
<div id="my-widget2">改變顏色</div>
<div id="my-widget3">改變顏色</div>
<button id="disable">切換 disabled 選項(xiàng)</button>
<button id="black">改為黑色</button>
</div>
</body>
</html>