简单构建一个 jQuery 插件---extend

当我们写了一段有价值的 jQuery 代码的时候,是很希望能够封装成一个 jQuery 插件的。

可是该怎么封装呢?这里给出框架的结构

/*******************************************************************
 * @authors yanmo
 * @web https://blog.csdn.net/nongshuqiner
 * @email ym1185509297@163.com
 * @date 2015年9月4日
 * @version Beta 1.0
 *******************************************************************/
(function($) {
    // 下面 ymEnlargeZoom 是插件的名字,可以任意命名
    $.fn.ymEnlargeZoom = function(F) {
        F = $.extend({

            // 这里是参数设置,根据需要随便命名
            size: 400, // 大小
            magnifierImgUrl: '',  // 不需要需要轮播时,填写放大镜的url
            imgArray: [], // 需要需要轮播时,填写放大镜的url数组
            maskBackground: '#333'

        }, F);
        // 仔细看这个 F 这个是必须一致的。

		// 将插件赋值设置为变量
        var showSize = F.size, // 大小
          imgArray = F.imgArray // 放大镜的url数组

        var isCarousel = false // 是否需要轮播列表

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

        var Obj = $(this);
        
        // 如果你给方法绑定了dom元素,这里面的this是你绑定的dom

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

如果你给方法绑定了dom元素,那么方法里面的this是你绑定的dom。

框架有了怎么用呢?

用例如下:

<div class="magnifier_effect"></div>
<script type="text/javascript">
  $('.magnifier_effect').ymEnlargeZoom({
    size: 400, // 大小,范围800-250之间
    // maskBackground: 'red', // 放大镜颜色,默认:#333
    // magnifierImgUrl: 'image/3.jpg', // 不需要需要轮播时,填写放大镜的url
    imgArray: ['image/0.jpg', 'image/1.jpg', 'image/2.jpg', 'image/3.jpg', 'image/4.jpg'] // 需要需要轮播时,填写放大镜的url数组
  })
</script>

使用的时候引入你的插件文件,然后.方法名就可以使用了。

最后给大家附上我的jquery插件:放大镜特效

后面还有精彩敬请期待,请大家关注我的专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值