JQuery实用技巧--学会你也是大神——插件的制作技巧

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery实用技巧--学会你也是大神——插件的制作技巧相关的知识,希望对你有一定的参考价值。

  前  言

JRedu

学习之前,首先我们需要知道什么是JQuery?
  JQuery是一个优秀的javascript框架。
  JQuery是继Prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器。
  JQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理html documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
  JQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。JQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
进行jQuery插件开发前,首先要知道两个问题:什么是jQuery插件?jQuery插件如何使用?  第一个问题,jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题,也就知道第二个问题的答案了,jQuery插件的使用方式就是jQuery对象方法的调用。

  JQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用JQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。



  1、自定义插件的基础知识

 

1.1  插件的分类


  插件分为两类。

  一类叫做全局插件,另一种叫做局部插件。从名字我们就可以了解到两者的区别。

  全局插件是作用于整个文档的插件。

  局部插件是作用于某一块区域的插件。

  

1.2插件的声明和调用

 

  1. 全局插件的声明

    $.extend({
         func:function(){} // func-->插件名
    })

    调用方式和函数类似

    $.func();

  2. 局部插件的声明

      $.fn.func = function(){}

    调用方式有所不同

    $("选择器").func();

 

  2、 自定义插件的准备工作

 

2.1插件的功能介绍

 

   该插件实现了Banner图的滚动效果。

   插件具有以下属性:

   images :   接受数组类型,数组的每个值应为对象。对象具有属性: src->图片的路径 title->图片指上后的文字 href->点击图片跳转的页面
   scrollTime :   滚动时间,单位毫秒。 5000
   bannerHeight :   Banner图的高度. 500px
   iconColor :   提示图标的颜色。默认 white
   iconHoverColor :   提示图标指上之后的颜色。 默认 orange
   iconPosition :   提示图标的位置,可选值left/center/right。 默认center

 

2.2基础文件的准备

 

  首先,我们需要新建一个HTML文件和一个JS文件。

  然后将JS文件和JQuery文件导入进来。

  然后新建一个空div。

<div id="banner">
            
</div>

  用JQuery导入几张图片

    <script type="text/javascript">
        $("#banner").scrollBanner({
            images : [
                {src:"img/banner1.jpg",href:"http://www.baidu.com"},
                {src:"img/banner2.jpg",href:"http://www.sina.com"},
                {src:"img/banner3.jpg",href:"http://www.qq.com"},
                {src:"img/banner4.jpg",href:"http://www.jredu100.com"},
            ],
        });
    </script>

  这样基本的准备工作就完成了,接下来就是插件的实现了。

 

  3、 自定义插件的制作

 

3.1声明属性值

  

  这是一个十分实用,使用起来也非常简单的banner图滚动插件。

  首先创建一个作用于div的局部插件,然后设置属性默认值

  

     $.fn.scrollBanner = function(obj){
        // 声明各个属性的默认值
        var defaults = {
            images : [],
            scrollTime : 2000,
            bannerHeight : "500px",
            iconColor : "white",
            iconHoverColor : "orange",
            iconPosition : "center"
       }
        // 将默认值与传入的对象比对,如果传入的对象有未赋值属性,则使用默认对象的属性
        obj = $.extend(defaults,obj);
   }

   后面的代码全部写入这个函数中。

 

3.2组建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 data-index="+index+" class=‘scrollBanner-icon‘></span>");
        });
        
        $(".scrollBanner-icons").css({
            "width":25*obj.images.length+"px",
            "height":"5px",
            "position":"absolute",
            "bottom":"40px",
            "left":"0px",
            "z-index":"100",
        });
        switch(obj.iconPosition){
            case "left":
                $(".scrollBanner-icons").css({
                    "left":"50px",
                });
                break;
            case "right":
                $(".scrollBanner-icons").css({
                    "right":"50px",
                });
                break;
            case "center":
                $(".scrollBanner-icons").css({
                    "left":"50%",
                    "margin-left":"-"+12.5*obj.images.length+"px"
                });
                break;
        }
        $(".scrollBanner-icon").css({
            "width":"15px",
            "height":"5px",
            "background-color":obj.iconColor,
            "display":"inline-block",
            "margin":"0px 5px",
        });

 

3.3设置CSS的属性

 

  通过一段代码,进行简单的CSS设置。

        this.css({
            "width":"100%",
            "height":obj.bannerHeight,
            "overflow":"hidden",
            "position":"relative"
        })
        
        $(".scrollBanner-banner").css({
            "width":obj.images.length+1+"00%",
            "height":obj.bannerHeight,
            "transtition":"all .5s ease"
        })
        $(".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-icon:eq(0)").css("background-color", obj.iconHoverColor);

 

3.4实现banner图的滚动

 

  实现banner图的不停滚动,基本原理是利用定时器。

  然后不停改变最外面大div的margin-left属性,改变显示在屏幕上的图片,再加上适当的动画效果,形成滚动。

  最后通过设定好的参数变量,修改滚动的速度。

  同样的,附上一段代码。

  

        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图就可以自动滚动了,可是一个只能不停滚动的banner图,可能并不符合我们的预期。

  我们更想要的是一个可以随意切换自己想要的图片的效果。

 

3.5实现图片的自由切换

 

  我们顺带做一个图片指上导航小图标,不仅切换图片,还让小图标变色的效果。

  原理如下:

  

        // 小图标指上以后变色并且切换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);
            var index = $(this).attr("data-index");
            count = index; // 将计数器count修改为index的值,让Banner滚动的定时器能够刚好滚到所指图片的下一张。
            $(".scrollBanner-banner").css({
                "transition":"none",
                "margin-left":"-"+index+"00%",
            });
        })

   这样,一个非常好用的banner图滚动插件就完成了。

   当我们使用的时候,只需新建一个div,起好ID,然后用JS将需要滚动的图片导入即可。

   这便是制作一个小插件的基本原理和思路了,希望能帮助到一些初学者。

   之后会陆续更新这一系列,给大家带来更多的实用小技巧。

   希望大家多多批评指正。














以上是关于JQuery实用技巧--学会你也是大神——插件的制作技巧的主要内容,如果未能解决你的问题,请参考以下文章

这些例子感觉很实用,希望对你也有帮助

iOS开发大神必备的Xcode插件

李洪强iOS开发之大神必备的Xcode插件

jQuery 插件编程精讲与技巧

学会这俩种pdf文件转ppt的操作 小白也能变大神

国外大神总结的实用代码,30 秒学会!