• 你的专属定制——JQuery自定义插件


        前  言

    絮叨絮叨

      jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

      那么这次,我就和大家来分享一下JQuery中的一个强大的功能——自定义插件。当我们在去实现一个小功能的时候,比如说banner图的滚动,插件的使用会让我们省去大量的代码。那又当我们会经常使用一个功能然而又懒得每次都去写怎么办?那当然就需要我们自己写一个属于自己的插件,用的时候直接拿我们自定义的插件用就可以了。

       JQuery插件类型
     
    广义上分为三类:实例对象方法插件 、全局函数插件 、选择器插件
     

    1实例对象插件

     
     开发能让所有的jquery实例对象都可以调用的方法。也就是说,只要通过$()获得 的jquery实例对象,都可以调用我们开发的方法。
    本质上来说,是一个对象级别的插件,这类插件首先通过jQuery选择器获取对象,并为对象添加方法,然后,将方法进行打包,封闭成一个插件,这种类型的插件编写简单,极易调用,也很方便地使用了jQuery中功能强大的选择器
     
    例如:
    $.fn.setBgColor = function(bgColor){
        //在$.fn声明的插件函数中,可以使用this代指调用这个插件的对象节点。
        //而且this是一个JQUery对象
        bgColor = bgColor? bgColor:"#ccc";   //设置背景色的默认值
        this.css("background-color",bgColor);
    }
    $("#div1").setBgColor("red");
     

    2全局函数插件

     
    可以将独立的函数添加到jQuery命名空间中了。那么调用的时候就可以使用 $.函数名称() 或者jQuery.函数名称()来调用了。可以理解为静态方法。
    全局函数插件是一个类级别的插件,这类插件最大的特点,就是可以直接给jQuery添加静态方法,并且可以将函数置于jQuery命名空间中.
     
    例如:
    $.extend({
        func : function(){}     //func --> 插件名
     });
     
     
        JQuery自定义插件要点
     
     
    1 .插件的文件命名必须严格遵循jQuery.[插件名].js的规则,以便于与其他js文件的区
      分,如插件名 
     
    2. 如果是对象级别插件,所有的方法都应依附于jQuery.fn主体对象,如果是类级别插件,所有的方法都应依附干jQuery对象
         
      因此在编写对象级别的插件时,使用jQuery.fn.extend()方法进行功能扩展;而针对类级别的插件,则使用jQuery.extend()方法进行扩展

    3. 无论是对象级别还是类级别插件,结尾都必须以分号结束,否则,在文件被压缩时,会出现错误提示信息
      
    4. 在插件内部的代码中,如果要访问每个元素,可以使用this.each方法来遍历全部元素

    5. 需要说明的是在插件的内部,this所代表的是通过jQuery选择器所获取的对象,而非传统意义上的对象的引用

    6. 由jQuery代码在调用方法时,可以采用链写的方法同时调用多个方法,因此,为了保证这个功能的实现,插件本身必须返回一个JQueryl对象

    7. 虽然“$’‘符号,可以与jQuery字符相代替,但在编写插件的代码中,尽量不要使用“$”符号,以避免与别的代码冲突 
      为方便使用,也可以用一个自执行函数包裹所有代码,在自执行函数中传入一个形参“$”符号,再传入一个实参JQuery,这样就可以放心大胆的使用“$”符号,而不用担心与别的代码发生冲突   
     
     
     
                
        banner图的滚动实例

    html代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>自定义插件实现banner滚动</title>
            <script src="js/jquery-3.1.1.js" type="text/javascript"></script>      <!--导入JQuery-->
            <script src="js/jquery.scrollBanner.js" type="text/javascript"></script>     <!--导入自定义插件  “jquery.scrollBanner.js”-->
        </head>
        <body>
            
            <div id="banner">
                
            </div>
    
            <script type="text/javascript">
                $("#banner").scrollBanner({
                    images : [  {src:"img/banner11.png",title:"banner1",href:"http://www.baidu.com"},
                                {src:"img/banner22.png",title:"banner2",href:"http://www.sina.com"},
                                {src:"img/banner33.png",title:"banner3",href:"http://www.qq.com"},
                                {src:"img/banner44.png",title:"banner4",href:"http://www.zealer.com"},
                             ]
                });
            </script>
        </body>
    </html>

    自定义插件代码

    /* 该插件实现了Banner图的滚动效果。
     * 
     * 一、插件的属性:
     * images : 接受数组类型,数组的每个值应为对象。对象具有属性: src->图片的路径 title->图片指上后的文字   href->点击图片跳转的页面
     * 
     * scrollTime : 每张图片的停留时间,单位毫秒。 2000
     * bannerHeight : Banner图的高度.  500px
     * 
     * iconColor : 提示图标的颜色。默认 white
     * iconHoverColor : 提示图标指上之后的颜色。  默认 orange
     * iconPosition : 提示图标的位置,可选值left/center/right。 默认center
     * 
     */
    !function($){
        $.fn.scrollBanner = function(obj){
            // 声明各个属性的默认值
            var defaults = {
                images : [],
                scrollTime : 2000,
                bannerHeight : "500px",
                iconColor : "white",
                iconHoverColor : "black",
                iconPosition : "center",
            }
            // 将默认值与传入的对象比对,如果传入的对象有未赋值属性,则使用默认对象的属性
            obj = $.extend(defaults,obj);
            
           



         // 组建DOM布局 $("body").css({"padding" : "0px","margin" : "0px",}); this.empty().append("
    <div class='scrollBanner-banner'></div>"); $.each(obj.images,function(index,item){ $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+item.href+"' target='_black'><img src='"+item.src+"' title='"+item.title+"' /></a></div>"); }); $(".scrollBanner-banner").append("<div class='scrollBanner-bannerInner'><a href='"+obj.images[0].href+"' target='_black'><img src='"+obj.images[0].src+"' title='"+obj.images[0].title+"' /></a></div>"); this.append("<div class='scrollBanner-icons'></div>"); $.each(obj.images,function(index,item){ //data-* 属性是H5允许用户自行在HTML标签上保存数据的数据 //保存在data-*中的数据,可以使用JS读取调用 $(".scrollBanner-icons").append("<span class='scrollBanner-icon' data-index='"+index+"'></span>"); }); //设置各种css this.css({ "width" : "100%", "height" : obj.bannerHeight, "overflow" : "hidden", "position" : "relative", }); $(".scrollBanner-banner").css({ "width" : obj.images.length +1+"00%", "height" : obj.bannerHeight, }); $(".scrollBanner-bannerInner").css({ "width" : 100/(obj.images.length +1)+"%", "height" : obj.bannerHeight, "overflow" : "hidden", "float" : "left" }); $(".scrollBanner-bannerInner img").css({ "width" : "1920px", "height" : obj.bannerHeight, "position" : "relative", "left" : "50%", "margin-left" : "-960px", }); $(".scrollBanner-icons").css({ "width": 35*obj.images.length+"px", "height": "7px", "position" : "absolute", "bottom" : "40px", // "left" : "0px", "z-index": "100", }); switch (obj.iconPosition){ case "left": $(".scrollBanner-icons").css({ "left" : "40px", }); break; case "right": $(".scrollBanner-icons").css({ "right" : "40px", }); break; case "center": $(".scrollBanner-icons").css({ "left" : "50%", "margin-left" : "-"+15*obj.images.length+"px", }); break; } $(".scrollBanner-icon").css({ "width": "20px", "height": "7px", "background-color": obj.iconColor, "display": "inline-block", "margin": "0px 5px", }); $(".scrollBanner-icon:eq(0)").css({ "background-color":obj.iconHoverColor, }); //实现Banner滚动功能 var count = 1; var icons = $(".scrollBanner-icon"); setInterval(function(){ $(".scrollBanner-banner").css({ "margin-left" : "-"+count+"00%", "transition" : "all .5s ease", }); $(".scrollBanner-icon").css("background-color",obj.iconColor); $(".scrollBanner-icon:eq("+count+")").css("background-color",obj.iconHoverColor); if(count>=obj.images.length) $(".scrollBanner-icon:eq("+0+")").css("background-color",obj.iconHoverColor); if(count>obj.images.length){ count = 0; $(".scrollBanner-banner").css({ "margin-left" : "0px", "transition" : "none", }); } count++; },obj.scrollTime); //小图标指上以后变色并且切换banner图 $(".scrollBanner-icon").mouseover(function(){ $(".scrollBanner-icon").css("background-color",obj.iconColor); //↓由span触发mouseover事件,则this指向这个span。 //↓但是,这this是JS对象,必须使用$封装成JQuery对象。 $(this).css("background-color",obj.iconHoverColor); // console.log($(this).attr("data-index")); var index = $(this).attr("data-index"); count = index;//将计数器count修改为index的值,让banner滚动的定时器能够刚好滚到所指图片的下一张。 $(".scrollBanner-banner").css({ "transition" : "none", "margin-left" : "-"+index+"00%", }); }); } }(jQuery);

    效果图如下:

  • 相关阅读:
    【摄影】延时摄影
    【sas sql proc】统计
    【分析模板】excel or sas
    JavaScript的方法和技巧
    好书推荐
    七招制胜ASP.NET应用程序开发
    .Net中使用带返回值的存储过程(VB代码)
    ASP.NET 2.0构建动态导航的Web应用程序(TreeView和Menu )
    简单查询和联合查询两方面介绍SQL查询语句
    数字金额大小写转换之存储过程
  • 原文地址:https://www.cnblogs.com/realsdg/p/7587160.html
Copyright © 2020-2023  润新知