如何开发jQuery插件
沉沙 2018-05-28 来源 : 阅读 1223 评论 0

摘要:本文讲解了如何自己动手开发jQuery插件,jQuery插件开发分两种,1.类级别的插件开发。2.对象级别插件开发。类级别你可以理解为拓展jquery类,最简单的$.post(...)。对象级别则可以理解为基于对象的拓展,如$("#Me").fuck(...); 这里这个fuck呢,就是基于对象的拓展了。

首先要了解jQuery插件开发分两种,1.类级别的插件开发。2.对象级别插件开发。

类级别你可以理解为拓展jquery类,最简单的$.post(...);

对象级别则可以理解为基于对象的拓展,如$("#Me").fuck(...); 这里这个fuck呢,就是基于对象的拓展了。

至于您要写一个什么东东呢?就轮到前面提到的类级别和对象级别的造型登场了。

    <script type="text/javascript">
        jQuery.msg = function () {
            alert("123");
       };         
    </script>
    <script type="text/javascript">
        $(function () {
            $.msg();
        });
    </script>

类级别写法:jQuery.插件名称=function(){.....};

调用方法:$.插件名称();

暴露参数这些东西,先暂时不提到。一步步来..

上面这玩意儿呢,弹出对话框插件,这么说,是先理解要紧,什么是插件,什么是类级别的插件?来看一下页面启动的效果,上图上真相,你懂的..

 如何开发jQuery插件

来比较一下对象级别插件写法:Go on!

(function($) {
$.fn.pluginName = function() {
// 代码区域。
};
})(jQuery);

对象级别写法:$.fn.插件名称 = function(){};多了一个fn,没错,是fn! fn!!! fn!!!

调用方法:$("#Me").插件名称();

稍微说一下,$.插件名称();是通过$访问调用jquery中的全局函数,直接可以通过jquery或者美元$调用,从而实现一些效果。

$("#Me").插件名称();是通过一个jquery对象所调用的一个函数,什么? 你居然发现这个写法外面一层多了个东东? 阿? 你问怎么回事?

The First,我们必须先了解一下闭包这个玩意儿的造型(框架),Look!,这就是传说中用来开发jQuery插件的东东

(function($){
    //这里是您写东东的地方,不收地税,工商税,个人所得税等..放心大胆使用。
})(jQuery);

这里function 后面的$参数,形参,在函数体内部的使用呢,$就是当前您当前整在调用该函数的对象了,这样就能干很多事了....你懂的。

用一个tabs面板切换插件来详细演示一下jQuery对象级别插件的具体开发,直接上代码。

首先上HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="jquery.tabs.js" type="text/javascript"></script>
    <link href="tabs.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("#mytabs").tabs();
        });
    </script>
</head>
<body>
    <!--tabs示例-->
    <div id="mytabs">
        <!--选项卡区域-->
        <ul>
            <li><a href="#tabs1">选项1</a></li>
            <li><a href="#tabs2">选项2</a></li>
            <li><a href="#tabs3">选项3</a></li>
        </ul>
        <!--面板区域-->
        <div id="tabs1">11111</div>
        <div id="tabs2">22222</div>
        <div id="tabs3">33333</div>
    </div>
</body>
</html>

再上插件源码:

/*


tabs面板插件,版本1.0(2011.08.24)

用法:$("#myDiv").tabs({switchingMode:"click"});

参数解释:switchingMode是面板切换的模式,如switchingMode:"mouseover"则鼠标移动至选项卡切换面板,默认为click。

整体tabs骨架不变,依然是常用的结构如下:

<div id="tabs">
    选项卡区域ul
    <ul>
        <li><a href="#div1">选项1</a></li>
        <li><a href="#div2">选项2</a></li>
    </ul>
    面板区域div
    <div id="div1">面板1</div>
    <div id="div2">面板2</div>
</div>



样式:此样式为默认无任何效果样式,可根据需要修改插件样式。

*/
; (function ($) {
    $.fn.tabs = function (options) {
        var defualts = { switchingMode: "click" };
        var opts = $.extend({}, defualts, options);
        var obj = $(this);
        
        var clickIndex = 0;
        obj.addClass("tabsDiv");
        $("ul li:first", obj).addClass("tabsSeletedLi");
        $("ul li", obj).not(":first").addClass("tabsUnSeletedLi");
        $("div", obj).not(":first").hide();
        $("ul li", obj).bind(opts.switchingMode, function () {
            if (clickIndex != $("ul li", obj).index($(this))) {
                clickIndex = $("ul li", obj).index($(this));
                $(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");
                $(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");
                var divid = $("a", $(this)).attr("href").substr(1);
                $("div", obj).hide();
                $("#" + divid, obj).show();
            };
        });
    };
})(jQuery);

接下来上插件样式:

body{background-color: black;}        
.tabsDiv{width: 500px;height: 350px;margin-top: 0px;margin-left: 0px;}
.tabsDiv ul{width: 500px;height: 20px;list-style: none;background-color: black;margin-bottom: 0px;margin: 0px;padding: 0px;}
.tabsDiv div{width: 500px;height: 330px;background-color: white;}
.tabsSeletedLi{width: 100px;height: 20px;background-color: white;float: left;text-align: center;}
.tabsSeletedLi a{width: 100px;height: 20px;color: black;}
.tabsUnSeletedLi{width: 100px;height: 20px;background-color: black;float: left;text-align: center;}
.tabsUnSeletedLi a{width: 100px;height: 20px;color: white;}

最终效果图,你懂的:

 如何开发jQuery插件

如何开发jQuery插件

如何开发jQuery插件


希望阅读本篇文章以后大家有所收获,加深大家对jQuery的理解。

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程