前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一个jQuery插件框架示例 by FungLeo

一个jQuery插件框架示例 by FungLeo

作者头像
FungLeo
发布2022-11-28 08:51:13
2720
发布2022-11-28 08:51:13
举报

当我们写了一段有价值的 jQuery 代码的时候,是很希望能够封装成一个 jQuery 插件的。但是如何做呢?其实我也不甚明了。只是很早的时候朋友帮忙写了一个 jQuery 插件框架,然后我就不断套用了。

今天拿出来与大家分享。

代码语言:javascript
复制
/*******************************************************************
 * @authors FengCms 
 * @web     http://www.fengcms.com
 * @email   web@fengcms.com
 * @date    2015年9月4日
 * @version Beta 1.0
 * @copy    Copyright © 2013-2018 Powered by DiFang Web Studio  
 *******************************************************************/
(function($) {
    // 下面 FengFocus 是插件的名字,可以任意命名
    $.fn.FengFocus = function(F) {
        F = $.extend({

            // 这里是参数设置,根据需要随便命名
            defaultIndex: 0,
            trigger: "click",
            showtime: 3000,
            showWay: "slow"
            // 这里就是参数结束,注意,最后一个参数后面不能有逗号,否则IE低版本会出错。

        }, F);

        // 仔细看这个 F 这个是必须一致的。
        // 将插件赋值设置为变量(没必要这么做,但是我习惯这样)

        var defaultIndex = F.defaultIndex,
            showWay = F.showWay,
            trigger = F.trigger,
            showtime = F.showtime;

        // 将作用DOM元素赋值为 Obj 然后下面所有的元素,都以Obj 为根进行查询,确保插件不会影响到其他地方。

        var Obj = $(this);

        /* 你的插件代码开始 */
        // 在这里,随便写啦
        /* 你的插件代码结束 */
    }
})(jQuery);

写 jQuery 插件,一定要注意的是,所有的查询必须以 Obj 也就是 $(this) 这个为根进行查询,而不能随便用什么ID来进行查询,否则非常容易产生兼容性的问题。

在 Html 中,是这样滴

代码语言:javascript
复制
$(function(){
    // 下面的ID,是插件作用于啥,而后面的 FengFocus 就是插件名字
    $("#FengFocus").FengFocus({
        // 下面就是设置参数
        defaultIndex    : 1,
        trigger         : "mouseover",
        showtime        : 3000,
        showWay         : "down"
        // 参数结束,最后一个参数后面不能有逗号
    });
});

好啦,这就是一个 jQuery 插件的框架啦!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2015-09-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档