- 浏览: 820175 次
- 性别:
- 来自: 厦门
文章分类
- 全部博客 (363)
- 2010年3月 (3)
- 2010年4月 (3)
- Java (116)
- ExtJs (22)
- EJB3.0 (11)
- JQuery (28)
- SqlServer (5)
- Oracle (17)
- hibernate (21)
- struts2 (14)
- php (10)
- JavaScript (11)
- jbpm (6)
- spring (24)
- lucene (2)
- ibatis (7)
- C# (8)
- mysql (11)
- json (3)
- webservice (3)
- 设计模式 (1)
- jdbc (1)
- servlet (2)
- ice (6)
- 日常软件问题 (2)
- 生活 (2)
- iphone (1)
- rest (3)
- ruby (2)
- linux (13)
- quartz (1)
- poi (1)
- redis (13)
- memcached (4)
- nosql (2)
- tomcat调优 (1)
- 项目管理 (0)
最新评论
-
天使建站:
jquery里和数组相关的操作 附带具体的实例 ...
jquery对象数组 -
Cy0941:
$('#formId').form('submit',...) ...
easyui的form表单提交处理 -
shmily2038:
swifth 写道楼主,,你的命令写错啦,,[root@ser ...
centos直接yum安装nginx -
swifth:
楼主,,你的命令写错啦,,[root@server ~]# y ...
centos直接yum安装nginx -
随遇而安DXX:
...
REST
本文讲下开发jquery插件必须应有的要求。
1、在JQuery命名空间下声明只声明一个单独的名称
2、接受options参数,以便控制插件的行为
3、暴露插件的默认设置 ,以便外面可以访问
4、适当地将子函数提供给外部访问调用
5、保持私有函数
6、支持元数据插件
那么下文一一来解析。
只声明一个单独的名称
这表明是一个单独的插件脚本。如果你的脚本包含多个插件或者是互补的插件(像$.fn.doSomething()和$.undoSomething()),那么你可以根据要求声明多个名称。但一般情况下,力争用单一的名称来维持插件现实的所有细节。
在本例中,我们将声明一个叫“hilight”的名称
// 插件的定义$.fn.hilight = function( options ){ // 这里就是插件的实现代码了... };
然后我们可以像这样调用它:
$("divTest").hilight();
接受一个options参数,以便控件插件的行为
暴露插件的默认设置 ,以便外面可以访问
作为插件的提升和优化,我们应该将上面的代码暴露出来作为插件的默认设置。
这非常重要,这样做让使用插件的用户可以非常容易地用最少的代码重写或自定义该插件。然而这个我们可以借助JavaScript function对象的优势:
这里值得注意的是$.extend()第一个参数是一个空的对象,这样可以让我们重写插件的默认设置
用户可以像这样使用插件:
适当地将子函数提供给外部访问调用
这个例子延续前面的例子,你会发现有一个有趣的方法可以扩展你的插件(然后还可以让其他人扩展你的插件)。例如,我们在插件里声明了一个函数叫“format”用来高这显示文本,我们的插件实现代码可能是这样子的:
保持私有函数
暴露插件有部分内容提供重写看上去似乎非常强大,但是你必须认真地考虑你的插件哪一部分是需要暴露出来的。一旦暴露出来,你就需要考虑这些变化点,一般情况下,如果你没有把握哪部分需要暴露出来,那么你可以不这样做。
那如何才能够定义更多的函数而不将其暴露出来呢?这个任务就交给闭包吧。为了证实,我们在插件中添加一个函数叫“debug”,这debug函数将会记录已选择的元素数量到FireBug控制台中。为了创建闭包,我们将插件定义的整部分都包装起来:
这样“debug”方法就不能被闭包这外调用了
支持元数据插件
依赖于所写的插件类型,并支持元数据插件会使得其本身更加强大。个人来讲,我喜欢元素据插件,因为它能让你分离标签中重写插件的配置(这在写demo和示例时特别有用)。最重要的是,想现实它特别的容易!
几行的变化完成了以下几件事:
1、检测元数据是否已经配置
2、如果已配置,将配置属性与额外的元数据进行扩展
<!-- markup -->
<div class="hilight { background: 'red', foreground: 'white' }">
Have a nice day!这是元数据
</div>
<div class="hilight { foreground: 'orange' }">
Have a nice day!在标签中配置
</div>
<div class="hilight { background: 'green' }">
Have a nice day!
</div>
然后我们通过一句脚本就可以根据元数据配置分开地高亮显示这些div标签:
$('.hilight').hilight();
最后,将全部代码放在一起:
1、在JQuery命名空间下声明只声明一个单独的名称
2、接受options参数,以便控制插件的行为
3、暴露插件的默认设置 ,以便外面可以访问
4、适当地将子函数提供给外部访问调用
5、保持私有函数
6、支持元数据插件
那么下文一一来解析。
只声明一个单独的名称
这表明是一个单独的插件脚本。如果你的脚本包含多个插件或者是互补的插件(像$.fn.doSomething()和$.undoSomething()),那么你可以根据要求声明多个名称。但一般情况下,力争用单一的名称来维持插件现实的所有细节。
在本例中,我们将声明一个叫“hilight”的名称
// 插件的定义$.fn.hilight = function( options ){ // 这里就是插件的实现代码了... };
然后我们可以像这样调用它:
$("divTest").hilight();
接受一个options参数,以便控件插件的行为
$.fn.hilight = function(options){ var defaults = { foreground : 'red', background : 'yellow' }; //Extends out defaults options with those privided 扩展我们默认的设置 $.extend(defaults,options); }; 而我们可以这样使用它: $('#myDiv').hilight({ foreground: 'blue' });
暴露插件的默认设置 ,以便外面可以访问
作为插件的提升和优化,我们应该将上面的代码暴露出来作为插件的默认设置。
这非常重要,这样做让使用插件的用户可以非常容易地用最少的代码重写或自定义该插件。然而这个我们可以借助JavaScript function对象的优势:
$.fn.hilight = function(options){ //Extend our default options with those provided //Note that the first arg to extend is an empty object //this is to keep from overriding our "defaults" object var opts = $.extend({},$.fn.hilight.defaults,options); } $.fn.hilight.defaults = { foreground : 'red', background : 'yellow' };
这里值得注意的是$.extend()第一个参数是一个空的对象,这样可以让我们重写插件的默认设置
用户可以像这样使用插件:
// override plugin default foreground color $.fn.hilight.defaults.foreground = 'blue'; // ... // invoke plugin using new defaults $('.hilightDiv').hilight(); // ... // override default by passing options to plugin method $('#green').hilight({ foreground: 'green' });
适当地将子函数提供给外部访问调用
这个例子延续前面的例子,你会发现有一个有趣的方法可以扩展你的插件(然后还可以让其他人扩展你的插件)。例如,我们在插件里声明了一个函数叫“format”用来高这显示文本,我们的插件实现代码可能是这样子的:
$.fn.hight = function(options){ //iterate and reformat each mached element return this.each(function(){ var $this = $(this); //... var markup = $this.html(); //call our format function markup = $.fn.hilight.format(markup); $this.html(markup); }); }; //define our format function $.fn.hilight.format = function(txt){ return '<strong>' txt '</strong>'; };
保持私有函数
暴露插件有部分内容提供重写看上去似乎非常强大,但是你必须认真地考虑你的插件哪一部分是需要暴露出来的。一旦暴露出来,你就需要考虑这些变化点,一般情况下,如果你没有把握哪部分需要暴露出来,那么你可以不这样做。
那如何才能够定义更多的函数而不将其暴露出来呢?这个任务就交给闭包吧。为了证实,我们在插件中添加一个函数叫“debug”,这debug函数将会记录已选择的元素数量到FireBug控制台中。为了创建闭包,我们将插件定义的整部分都包装起来:
//create closure (function($){ //plugin definition $.fn.hilight = function(options){ debug(this); //... }; //private function for debuggin function debug($obj){ if(window.console && window.console.log){ window.console.log('hilight selection count :' $obj.size()); } } //... //end of closure })(jQuery);
这样“debug”方法就不能被闭包这外调用了
支持元数据插件
依赖于所写的插件类型,并支持元数据插件会使得其本身更加强大。个人来讲,我喜欢元素据插件,因为它能让你分离标签中重写插件的配置(这在写demo和示例时特别有用)。最重要的是,想现实它特别的容易!
$.fn.hilight = function(options){ //build main options before element interation var opts = $.extend({},$.fn.hilight.defaults,options); return this.each(function(){ var $this = $(this); //build element specific options var o = $.meta ? $.extend({},opts,$this.data()) : opts; //一般句话,搞定支持元数据 功能 }); }
几行的变化完成了以下几件事:
1、检测元数据是否已经配置
2、如果已配置,将配置属性与额外的元数据进行扩展
<!-- markup -->
<div class="hilight { background: 'red', foreground: 'white' }">
Have a nice day!这是元数据
</div>
<div class="hilight { foreground: 'orange' }">
Have a nice day!在标签中配置
</div>
<div class="hilight { background: 'green' }">
Have a nice day!
</div>
然后我们通过一句脚本就可以根据元数据配置分开地高亮显示这些div标签:
$('.hilight').hilight();
最后,将全部代码放在一起:
// //create closure // (function($){ // // plugin definition // $.fn.hilight = function(options){ debug(this); //build main options before element iteration var opts = $.extend({}, $.fn.hilight.defaults, options); //iterate and reformat each matched element return this.each(function(){ $this = $(this); //build element specific options var o = $.meta ? $.extend({}, opts, $this.data()) : opts; //update element styles $this.css({ backgroundColor: o.background, color: o.foreground }); var markup = $this.html(); //call our format function }); } // // private function for debugging // function debug($obj){ if(window.console && window.console.log){ window.console.log('hilight selection count: ' $obj.size()); } }; // // define and expose our format function // $.fn.hilight.format = function(txt){ return '<strong>' txt '</strong>'; }; // // plugin defaults // $.fn.hilight.defaults = { foreground : 'red', background : 'yellow' }; // // end of clousure // })(jQuery);
发表评论
-
easyui的form表单提交处理
2013-06-11 11:02 10213$('#fm').form('submit',{ ... -
extjs和jquery各适用于什么场景
2013-01-23 09:49 2044比较点 extjs jquery 是 ... -
extjs和jquery各适用于什么场景
2013-01-21 11:14 13871.应该说粒度不同,extjs ... -
jquery中对radio的操作
2012-12-07 09:13 997要想获取某个radio的值有以下的几种方法,直接给出代码: ... -
jquery对select的操作
2012-12-06 10:36 857jQuery("#select_id"). ... -
禁用回车提交
2012-10-24 14:15 1046$("#form").keypress(f ... -
jquery中对动态生成的标签不会响应click事件
2012-09-24 09:53 1165Jquery中对ajax动态生成 ... -
jquery编写自己的插件
2011-05-16 17:16 1114js插件实现代码 第一种实现写法 ;(function($ ... -
$.extend()
2011-05-06 14:31 1872// merge two object, modifyin ... -
jquery扩展
2011-04-22 16:36 1154//jquery.datagrid 扩展 (functio ... -
jQuery获取CheckBox选择的Value值
2010-10-13 17:11 4977$("input[name='checkbox_na ... -
invalid assignment left-hand side
2010-10-13 09:54 6420错误:invalid assignment left-hand ... -
jquery的each()方法分析
2010-07-22 08:52 2175/*! * jQuery源码分析- ... -
JQuery 禁用所有select标签的值
2010-07-10 15:10 2366JQuery 禁用所有select标签的值 只是一个知识小点 ... -
jquery对象数组
2010-07-10 13:50 1948我们都知道jQUery对象中 ... -
jquery与php的json交互2
2010-07-09 12:25 1534整理两个现成的函数:json_decode、json_enco ... -
jquery与php的json交互
2010-07-09 09:06 4003This plugin exposes four new fu ... -
jquery解析json
2010-07-08 16:18 3647var data=" { root: [ ... -
jquery隐藏表单(没id,使用name获取)
2010-07-08 16:04 5934隐藏表单值的获取 <input type="h ... -
Jquery AJAX POST和GET区别
2010-07-08 15:30 9201Jquery AJAX POST和GET区别 ...
相关推荐
本文将详细介绍如何编写jQuery插件 类型 jQuery的插件主要分为3种类型 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery...
NULL 博文链接:https://zhoucl.iteye.com/blog/1239737
NULL 博文链接:https://nomandia.iteye.com/blog/1167630
这里提供最基础的jquery插件编辑方法,为jquery插件学习者提供帮助。
jquery-plugin-typescript-example:示例项目,演示如何使用TypeScript编写jQuery插件
eclipse上支持jquery的插件,使eclipse能够提供jquery提示,更快编写jquery代码
编写jquery弹出框插件 自己制作 编写javascript
《jQuery基础教程(第2版)》最后两章专门介绍了如何使用和编写jQuery插件。值得一提的是,本版新增的附录D分门别类地列出了所有jQuery API,为高效使用jQuery提供了方便。, 《jQuery基础教程(第2版)》注重理论与实践...
plugin历史版本1、新的事件.on() .off()3、动画的改进1.42版介绍JQuery插件让Dreamweaver支持提示代码功能引入JQuery展开编辑本段简介 jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript...
我们在编写js的时候,如果采用了jquery框架,当然很希望Eclipse能帮我们完成代码自动完成的功能了,但Eclipse默认只是支持js的代码自动完成,利用这个插件,可以让Eclipse支持jquery的代码自动完成功能(前提:...
详细的的介绍了eclipse中编写jQuery可以提示,附带文件
本书最后两章专门介绍了如何使用和编写jQuery插件。值得一提的是,本版新增的附录D分门别类地列出了所有 jQuery API,为高效使用jQuery提供了方便。 本书注重理论与实践相结合,适合初中级Web开发人员阅读和参考
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write....
jQuery 插件我的日常工作 jQuery 插件==== star.js ==== 描述:明星的jQuery插件注意:我第一次尝试编写 jQuery 插件。 ====滑块.js ==== 描述:滑块的jQuery插件版本:1.0 日期 : 2013-10-15 14:00:09 版本:1.0.1 ...
如何编写jquery组件(jq插件)
编写jquery弹出框插件.docx 很方便,又实用
这是一本带领你一步步编写自己的Jquery自定义插件或控件的好书,本书共14章,内容充实,是不本相当不错的前端开发学习资料
所以,您已经尝试过编写 jQuery 插件,并且很容易将一些可能有效的东西放在一起。 惊人的! 问题是,您认为可能有更好的方式来编写它们 - 您已经看到它们在野外以多种不同的方式完成,但不确定这些模式之间有什么...
jQuery的易扩展性吸引了来自全球的开发者来共同编写 jQuery 插件,jQuery 插件不仅能够增强网站的可用性,有效的改善用户体验,还可以大大减少开发时间。 Isotope Isotype 是一款非常优秀的 jQuery 插件,用于创建...