JavaScript编程开发中jQuery 插件开发指南
那么首先我们来简单的看一下最正统的 jquery 插件定义方式:
代码如下:
(function ($) {
$.fn.插件名 = function (settings) {
//默认参数
var defaultsettings = {
} /* 合并默认参数和用户自定义参数 */
settings = $.extend(defaultsettings, settings);
return this.each(function () { //代码 }); //插件在元素内多次出现
} })(jquery);
先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看,不然第一行就完全无意义了):
代码如下:
(function ($) {
})(jquery);
这行代码其实是用于创建一个匿名函数。
jquery 的继承方法 $.extend —— $.extend 在jquery 插件开发中有个很重要的作用,就是用于合并参数。
代码如下:
$.fn.tip = function (settings) {
var defaultsettings = {
//颜色
color: 'yellow',
//延迟
timeout: 200 }
/* 合并默认参数和用户自定义参数 */
settings = $.extend(defaultsettings, settings);
alert(settings.input); <br>}
jquery 插件定义第二种方式:
代码如下:
(function ($) {
//插件定义--更换名字
$.fn.tabpanel = function (method) {
var methods = $.fn.tabpanel.methods;
if (methods[method]) {
return methods[method].apply(this, array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
}
}
//支持的方法
$.fn.tabpanel.methods =
{
//初始化
init: function (p_options) {
tabpanelbind(p_options, this);
},
add: function (p_options) {
addtab(p_options, this);
tabpanelbind(p_options, this);
// debugger
} }
function add(p_options) {
var _defaults = {
id: ""
}
<br> //内部实现略.........<br> return _index;
}
<br>})(jquery);<br><br>调用 $("#team").tabpanel('add',"");
好了,上面介绍的这2种开发方式都是最常用的,小伙伴们先好好学习下吧,后续我们再介绍的更深入些
上一篇: JavaScript中字符串的常见api操作(偏ES5)
下一篇: 推荐一些比较有用的css3新属性
推荐阅读
-
JavaScript编程开发如何使用jquery实现iframe自适应高度
-
JavaScript编程开发中jQuery插件开发详细教程
-
JavaScript开发中JQuery插件的基本知识
-
JavaScript编程开发中高效jquery代码的19条写作指南
-
JavaScript编程开发之jQuery制作拼图小游戏
-
JavaScript开发中jQuery方法总结
-
JavaScript编程开发中jQuery的缓存机制浅析
-
JavaScript 编程开发jquery iframe操作详细解析
-
JavaScript编程开发中基于jQuery的视频播放插件开发教程
-
JavaScript开发中利用jQuery将多条数据插入模态框的示例代码