/* jQuery Plugin 基本格式 */
(function($){
$.fn.method1 = function(){
};
$.fn.method2 = function(){
};
})(jQuery);
/* jQuery Plugin 基本格式 */
(function($){
$.fn.method1 = function(){
};
$.fn.method2 = function(){
};
})(jQuery);
範例如下：myPlugin.js
(function ($) {
$.fn.mytoolbox = function (settings) {
/* 預設的事件與事件所要觸發的動作 */
var _defaultsettings = {
bind: 'click',
callback: function () {
alert(this.id);
}
};
/* 利用 jQuery 的 extend 將 外部傳入的 settings 動作覆蓋掉 _defaultsettings 的值 */
var _settings = $.extend(_defaultsettings, settings);
return this.each(function () {
//$(this).click(_settings.callback);
$(this).bind(_settings.bind , _settings.callback);
});
};
})(jQuery);
Default.aspx
引用 jQuery 引擎外還要加入 <script type="text/javascript" src="Scripts/myPlugin.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var debug = $('#debug');
/* 將原本的採 Plugin 中所設定是採用 click 觸發的事件改成用 滑鼠 mouseover 來執行觸發動作 */
$(".test").mytoolbox({
bind: 'mouseover',
callbak: function () {
debug.html(debug.html() + this.id + '<br />');
}
});
});
</script>
<form id="form1" runat="server">
<div id="test1" class="test">
點我！
</div>
<div id="test2" class="test">
點我！
</div>
<div id="debug"></div>
</form>
