jQuery控件有所感悟
两种写法对比:
第一种:
;(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控件有所感悟的更多相关文章
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- jquery控件的学习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Tag It 一款 Jquery控件,当你在文本框中输入逗号时,自动帮你分隔开相关内容
Demo地址:http://webspirited.com/tagit/ 使用方法: 除了JQuery脚本外,下面的脚本也是必须的,这些脚本你都可以去GitHub下载:https://github.c ...
- jQuery控件之分页控件-- kkpager v1.3使用简介
js分页展示控件,传入简单参数就能使用的分页效果控件 在线测试链接: http://pgkk.github.io/kkpager/example/pager_test.html http://pgkk ...
- [JS] jquery控件基本要点备份
(1)CDN Google CDN:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min. ...
- Jquery 控件
1. Jeditable 2. Select2 3. superfish 4. Jquery file upload https://blueimp.github.io/jQuery-File-Upl ...
- fineuploader 上传jquery 控件
fineuploader 昨天用的一个jquery插件. 可参考这篇文章以前写的 file-uploader 跟 这个跟里面介绍的2个jquery 插件相比.觉得更强大写..版本号都3.9 了….. ...
- Jquery控件jrumble
<!DOCTYPE HTML> <html> <head> <title>demo.html</title> <meta h ...
- jquery控件-实现自定义样式的弹出窗口和确认框(转)
(function () { $.MsgBox = { Alert: function (title, msg) { GenerateHtml("alert", title, ms ...
随机推荐
- Rails 4.0 移除了 XML 参数解析器。若要使用请加入 actionpack-xml_parser
拜读了用 Rails 搭建微信公众平台 API之后发现, params[:xml]这个办法在Rails 4里面已经被办掉了,于是就看了一下Rails 4的新特性发现XML Parameter pars ...
- [zz]谱聚类
了凡春秋USTC 谱聚类 http://chunqiu.blog.ustc.edu.cn/?p=505 最近忙着写文章,好久不写博客了.最近看到一个聚类方法--谱聚类,号称现代聚类方法,看到它简洁的公 ...
- rails下自动更新静态文件的gem包
https://github.com/guard/guard-livereload gemfile group :development do gem 'guard-livereload', '~&g ...
- Maven私有仓库搭建和使用
下载和安装 下载地址: http://www.sonatype.com/nexus-repository-oss 安装: Linux版的无需安装,直接解压即可,然后进入bin目录下,运行./nexus ...
- Easyui 小脚本
function addTab(subtitle, url, icon) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs(' ...
- [Mongodb] Relica Set复制集集群简单搭建--持续更新
这里我们搭建一个没有访问控制,奇数个Set没有仲裁者的集群 1.三个配置文件添加 replication.replSetName:"Replica_test" 并启动三个实例2.连 ...
- jquery遍历数组与筛选数组的方法
grepgrep()方法用于数组元素过滤筛选 grep(array,callback,invert)array:待过滤数组;callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第 ...
- Stanford NLP学习笔记:7. 情感分析(Sentiment)
1. 什么是情感分析(别名:观点提取,主题分析,情感挖掘...) 应用: 1)正面VS负面的影评(影片分类问题) 2)产品/品牌评价: Google产品搜索 3)twitter情感预测股票市场行情/消 ...
- 安装完CentOS 7 后必做的七件事
CentOS是最多人用来运行服务器的 Linux 版本,最新版本是 CentOS 7.当你兴趣勃勃地在一台主机或 VPS 上安装 CentOS 7 后,首要的工作肯定是加强它的安全性,以下列出的七件事 ...
- oledbdataadapter 读取excel数据时,有的单元格内容不能读出
表现:excel中某列中,有的单元格左上角有绿色箭头标志,有的没有,c#编写读取程序,但是只能读取出带绿色箭头的单元格中的内容,其余不带的读取不到内容 原因:excel中单元格因为是文本格式而存储了数 ...