当前位置:  编程技术>jquery

jQuery入门-制作自己的插件

    来源: 互联网  发布时间:2014-09-03

    本文导语:      写自己的jQuery插件非常容易,按照下面的原则来做,可以让其他人也容易地结合使用你的插件 为你的插件取一个名字,在这个例子里面我们叫它"foobar". 创建一个像这样的文件:jquery.[yourpluginname].js,比如我们创建一个jquery.foobar....

    写自己的jQuery插件非常容易,按照下面的原则来做,可以让其他人也容易地结合使用你的插件

  • 为你的插件取一个名字,在这个例子里面我们叫它"foobar".
  • 创建一个像这样的文件:jquery.[yourpluginname].js,比如我们创建一个jquery.foobar.js
  • 创建一个或更多的插件方法,使用继承jQuery对象的方式,如:
  • 4. jQuery.fn.foobar = function() {
    5.  // do something
    };
  • 可选的:创建一个用于帮助说明的函数,如:
  • 7. jQuery.fooBar = {
    8.  height: 5,
    9.  calculateBar = function() { ... },
    10. checkDependencies = function() { ... }
    };
    你现在可以在你的插件中使用这些帮助函数了:
    jQuery.fn.foobar = function() {
     // do something
     jQuery.foobar.checkDependencies(value);
     // do something else
    };
  • 可选的l:创建一个默认的初始参数配置,这些配置也可以由用户自行设定,如:
  • 12.jQuery.fn.foobar = function(options) {
    13. var settings = {
    14.         value: 5,
    15.         name: "pete",
    16.         bar: 655
    17. };
    18. if(options) {
    19.         jQuery.extend(settings, options);
    20. }
    };
    现在可以无需做任何配置地使用插件了,默认的参数在此时生效:
    $("...").foobar();
    或者加入这些参数定义:
    $("...").foobar({
     value: 123,
     bar: 9
    });
    如果你release你的插件, 你还应该提供一些例子和文档,大部分的插件都具备这些良好的参考文档.
    现在你应该有了写一个插件的基础,让我们试着用这些知识写一个自己的插件.
    很多人试着控制所有的radio或者checkbox是否被选中,比如:
    $("input[type='checkbox']").each(function() {
            this.checked = true;
            // or, to uncheck
            this.checked = false;
            // or, to toggle
            this.checked = !this.checked;
    });
    注:在jQuery1.2及以上版本中,选择所有checkbox应该使用 input:checkbox , 因此以上代码第一行可写为:
    $('input:checkbox').each(function() {
    无论何时候,当你的代码出现each时,你应该重写上面的代码来构造一个插件,很直接地:
    $.fn.check = function() {
            return this.each(function() {
                   this.checked = true;
            });
    };
    这个插件现在可以这样用:
    $('input:checkbox').check();
    注:在jQuery1.2及以上版本中,选择所有checkbox应该使用 input:checkbox 原文为:$("input[type='checkbox']").check();
    现在你应该还可以写出uncheck()和toggleCheck()了.但是先停一下,让我们的插件接收一些参数.
    $.fn.check = function(mode) {
            var mode = mode || 'on'; // if mode is undefined, use 'on' as default
            return this.each(function() {
                   switch(mode) {
                   case 'on':
                           this.checked = true;
                           break;
                   case 'off':
                           this.checked = false;
                           break;
                   case 'toggle':
                           this.checked = !this.checked;
                           break;
                   }
            });
    };
    这里我们设置了默认的参数,所以将"on"参数省略也是可以的,当然也可以加上"on","off", 或 "toggle",如:
    $("input[type='checkbox']").check();
    $("input[type='checkbox']").check('on');
    $("input[type='checkbox']").check('off');
    $("input[type='checkbox']").check('toggle');
    如果有多于一个的参数设置会稍稍有点复杂,在使用时如果只想设置第二个参数,则要在第一个参数位置写入null.
    从上一章的tablesorter插件用法我们可以看到,既可以省略所有参数来使用或者通过一个 key/value 对来重新设置每个参数.
    $.fn.rateMe = function(options) {
            var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery context
     
            var settings = {
                   url: "rate.php"
                   // put more defaults here
                   // remember to put a comma (",") after each pair, but not after the last one!
            };
     
            if(options) { // check if options are present before extending the settings
                   $.extend(settings, options);
            }
     
            // ...
            // rest of the code
            // ...
     
            return this; // if possible, return "this" to not break the chain
    });

        
     
     

    您可能感兴趣的文章:

  • jquery插件jquery倒计时插件分享
  • jQuery图片轮换插件 jQuery Dynamic Slideshow
  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
  • jQuery 内容滑动插件 Basic jQuery Slider
  • jQuery圆角插件 jQuery Corners
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery日历插件 jQuery Week Calendar
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery消息提醒插件 jQuery Notty
  • jQuery无限幻灯片插件 jQuery Carousel
  • jQuery多值输入插件 jQuery Manifest
  • jQuery向导插件 Jquery Wizard Plugin
  • jQuery相册插件 jQuery.popeye
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery对话框插件 jquery.modalbox
  • jQuery的OpenSocial插件 OpenSocial jQuery
  • jQuery链接插件 jquery.biggerlink
  • 在线客服jQuery 插件 jQuery.onServ
  • jQuery日历插件 jQuery Verbose Calendar
  • Jquery easyui入门教程(1)
  • jquery 淡入淡出效果入门例子
  • jquery 追加tr和删除tr(新手入门)
  • jquery.qtip插件简单入门实例
  • jQuery入门-hello Jquery
  • jQuery记录之jquery入门学习笔记
  • jQuery入门-使用tablesorter插件(表格排序)
  • jQuery入门-使用FX
  • jQuery入门-使用AJAX
  • jQuery入门-使用选择器和事件
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery制作搜狐快站页面效果示例分享
  • 用jquery的方法制作一个简单的导航栏
  • 制作jquery遮罩层效果导航菜单代码分享
  • jquery插件制作 jquery表单验证代码分享
  • jQuery制作的别致导航有阴影背景高亮模式窗口
  • 简单选项卡 js和jquery制作方法分享
  • jquery制作居中遮罩层效果分享
  • jquery制作弹窗提示窗口代码分享
  • 利用JQuery制作符合Web标准的QQ弹出消息
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery UI组件 jQuery UI
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery分页插件 Pagination jQuery Plugin
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery的CSV插件 jQuery CSV
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery虚拟键盘 jQuery Keypad
  • 简单选项卡 js和jquery制作方法分享 iis7站长之家
  • jQuery电子表格插件 jQuery.sheet
  • jQuery日期选择插件 jQuery UI Datepicker
  • jQuery分页插件 jQuery Pagination
  • jQuery表单验证插件 jQuery.validity
  • jQuery条形码插件 jQuery Barcode
  • jQuery 星级评分插件 jQuery Raty
  • jQuery动态背景插件 jQuery.spritely


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3