两种写法对比:

第一种:

;(function($){
$.fn.myplugin = function(op,params){
if (typeof op == 'string'){
return $.fn.myplugin.methods[op](this,params);
}
//默认参数
var settings = {
"text" : "hehe",
"color" : "red"
}
settings = $.extend(settings,op);//参数合并
return this.each(function(){
$(this).text(settings.text).css("color",settings.color);
});
};
//暴露的API
$.fn.myplugin.methods = {
show : function(selector,params){
showText();
},
getValue : function(selector,params){
console.log("value is"+ params);
}
};
//静态方法
function showText(param){
alert(param);
}
})(jQuery);
控件调用:
var m = $(".b").myplugin({
"text" : "haha",
"color" : "yellow"
});
m.myplugin("show","zhangsan");
m.myplugin("getValue","zhangsan");
第二种:
;(function($){
var $target;
var settings = null;
$.fn.myPlugin = function(options){
$target = $(this);
if($.fn.myPlugin.methods[options]){
return $.fn.myPlugin.methods[options].apply(this,Array.prototype.slice.call(arguments,1));
}else if(typeof options == "object"||!options){
return $.fn.myPlugin.methods.init.apply(this,arguments);
}else{
$.error("Methods"+options+"does not exist on jQuery.myPlugin");
}
};
$.fn.myPlugin.methods = {
init : function(op){
var defualt = {
width : 100,
heght : 50
};
settings = $.extend(defualt,op);
myPluginInit(settings,$target);
bindEvents();
return $target;
},
getValue : function(){
return "000";
}
};
function myPluginInit(settings,$target){
$target.width(settings.width);
$target.height(settings.height);
}
function bindEvents(){
$(this).click(function(){
alert("click");
});
}
})(jQuery);
												

jQuery控件有所感悟的更多相关文章

  1. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  2. jquery控件的学习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. Tag It 一款 Jquery控件,当你在文本框中输入逗号时,自动帮你分隔开相关内容

    Demo地址:http://webspirited.com/tagit/ 使用方法: 除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.c ...

  4. jQuery控件之分页控件-- kkpager v1.3使用简介

    js分页展示控件,传入简单参数就能使用的分页效果控件 在线测试链接: http://pgkk.github.io/kkpager/example/pager_test.html http://pgkk ...

  5. [JS] jquery控件基本要点备份

    (1)CDN Google CDN:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min. ...

  6. Jquery 控件

    1. Jeditable 2. Select2 3. superfish 4. Jquery file upload https://blueimp.github.io/jQuery-File-Upl ...

  7. fineuploader 上传jquery 控件

    fineuploader 昨天用的一个jquery插件. 可参考这篇文章以前写的 file-uploader  跟 这个跟里面介绍的2个jquery 插件相比.觉得更强大写..版本号都3.9 了….. ...

  8. Jquery控件jrumble

    <!DOCTYPE HTML> <html>  <head>   <title>demo.html</title>   <meta h ...

  9. jquery控件-实现自定义样式的弹出窗口和确认框(转)

    (function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, ms ...

随机推荐

  1. maven的阿里镜像

    偶然发现maven有了阿里镜像 vim ~/.m2/setting.xml <mirrors> <mirror> <id>alimaven</id> & ...

  2. ruby HTTPS请求

    require 'uri'require 'net/http'require 'net/https' @toSend = { "date" => "2012-07- ...

  3. Java的动态绑定机制

    Java的动态绑定又称为运行时绑定.意思就是说,程序会在运行的时候自动选择调用哪儿个方法. 一.动态绑定的过程: 例子: public class Son extends Father Son son ...

  4. 使用Java的Timer处理周期性任务

    package timer; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; ...

  5. OAF_文件系列11_实现OAF读写Excel包JXL和POI的区别(概念)

    20150803 Created By BaoXinjian

  6. JAVA使用堆外内存导致swap飙高

    https://github.com/nereuschen/blog/issues/29 堆内内存分析一般用Memory Analyzer Tool http://tivan.iteye.com/bl ...

  7. 使用C#进行图像处理的几种方法(转)

    本文讨论了C#图像处理中Bitmap类.BitmapData类和unsafe代码的使用以及字节对齐问题. Bitmap类 命名空间:System.Drawing 封装 GDI+ 位图,此位图由图形图像 ...

  8. 常见jquery插件

    1.JQuery Tooltipster 2.Bootstrap 3.jQuery UI 1.10

  9. 创建一个List获取数据的lookup

    第一步,在类:syslookup中新建方法 public static client void lookupList(FormStringControl _formStringControl, Lis ...

  10. Spring MVC基本配置@controller和@RequestMapping解释

    一:配置web.xml 1)问题:spring项目中有多个配置文件mvc.xml   dao.xml 2)解决:在web.xml中 <init-param> <param-name& ...