Question

jquery 插件开发，属性，事件，方法写法？

看了很多关于jq的插件编写教程，都没有说到方法，属性，事件的，

我这里指的所谓方法，属性，事件，是指在调用时候，就比如ligerUi或者easyUi，调用
他们的插件的时候，一般都有属性，方法，事件，
比如调用时候：
$('#id').Tabs({border:false}); //这是属性，传入的参数是一个对象
$('#id').Tabs(‘add’,{title:'newTab'}); //这是方法，传入的参数是一个函数
$('#id').Tabs({onSelect:functuon(){}});// 这是事件，传入的似乎也是一个对象
;(function($){
var methods = {
// ########################### 初化插件
init : function( options ) {
// |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| 初始化参数
options=$.extend({
title:'createTab',//属性
onSelect:null //事件
},options);
return this.each(function(){
$(this).append('-新');
$(this).on("click",function(){
//????? 这里会被弹出两次，可能是 html代码 两次传入对象导致绑定了两次事件， ?????
alert( 'ss' );
////??????我尝试在这里写事件，显然不合，因为调用多少次就执行多少...?????
if(typeof options.onSelect==='function') options.onSelect(title);
})
});
},
//########################### 插件方法
add : function(options) {
//待..
}
};
$.fn.yoyoTest = function( method ) {
// Method calling logic
if ( methods[method] ) { // 如果传入的 method 是 function， 方法在这里执行
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
}else if ( typeof method === 'object' || ! method ) { //如果传入的 method 是 对象， 初始化数据在这里执行
return methods.init.apply( this, arguments );
}else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
};
})( jQuery);
//////////////////////////////////////////////html 页代码
<script type="text/javascript">
//初始化插件
$(".test").yoyoTest({
text:'腾讯'
})
// 事件
$(".test").yoyoTest({
onSelect:function(text){
alert( text );
}
})
</script>

Answer 1

我自己写过许多插件，应该可以解答你的问题。

其实，所谓的方法，属性，事件，都是你自己总结出来的。对于纯正的JS和JQuary来说，这3个都是一种东西。我们常常用了简便写法，因此楼主才觉得这3者不同，其实这些统统都是变量。
只不过，如果变量是个参数，就是：
var temp = "怪蛋";
如果参数是个数组，那么就是：
var temp = {title:'newTab'};

而我们常见的函数，都会写成getVal(a,b,c){}其实写的更符合JS原生态的，是
var getVal = function(a,b,c){} 从这里看出，我们所谓的函数，其实和变量是一种东西。

因此所谓的$('#id').Tabs({onSelect:functuon(){}});这类情况，等于传入的是一个叫onSelect的变量，而这个变量刚好是一个函数类型而已。事实上这个onSelect原本并不存在，是你后来的插件里去调用了而已。你通过英文意思觉得这是“被选中”的意思，其实在这里，仅仅是一个名字而已。只有插件内部写到$(this).on("click",function(){});才真正调取到JS原本的event的click事件。而我们插件中常见的onSelect、onClick、onSuccess都是写插件的人按照自己的喜好和大家喜欢的名字而命名的。

追问

不小心采纳错了...............

Answer 2

jquery插件一般有三种开发方式：
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建
以下重点讲解第二种：
1、例如定义一个对象的写法：
var Haorooms= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义haorooms的方法
haorooms.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象，保留对象的默认值。

Answer 3

留名，一起学习一下，我很想知道答案！

追问

我找到了答案：
百度搜：深入理解jQuery插件开发

Answer 4

网页链接