jquery 插件封装模板

//插件编写模板
;(function ($) {
    $.fn.plugIn = function ( opt ) {
        var def = {
            //这里填写自定义的参数例如:
            event : ‘click‘
        }
        opt = $.extend( def , opt );
        this.each(function(){

            var that = $(this); //that 指的是 .box
             //测试执行
            that.on( opt.event , function(){
                alert( opt.event );
            });

        });
        return this;
    }
})(jQuery);

//调用
$(‘.box‘).plugIn({
    event : ‘mouseover‘ //可进行篡改
});

  

原文地址:https://www.cnblogs.com/zhoubingyan/p/8335018.html

时间: 2024-10-31 10:43:03

jquery 插件封装模板的相关文章

jquery插件封装成seajs模块

jquery直接在html中引入. jquery插件修改为: define(function (require, exports, moudles) { return function (jquery) { // 插件源码..... // 插件源码..... // 插件源码..... // 插件源码..... // 插件源码..... } }) 这样它就是一个seajs模块了, 像下面这样引用到项目: define(function (require, exports, module) { re

jquery插件封装思路整理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>写插件的栗子</title> </head> <body> <img class="lazyImg" src="http://static.m1905.cn/images/vip/cnc/lazyI

jQuery 插件封装的方法

方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.m??yPlugin = function () { //你自己的插件代码 }; })(jQuery); 或者 ; (function ($) { $.fn.extend({ function_name:function(){ //你自己的插件代码 } }); })(jQuery); 方式2.$.xxx ==>针对 jQuery 对象添加方法: ;(function ($) { $.m??yPlug

Jquery插件封装---代码瓶颈

1. ("tbody>tr:odd",this).addClass(options.odd); 其实等同于 $(this).find("tbody>tr:odd").addClass(options.odd);

如何将Js代码封装成Jquery插件

很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特效 HTML代码如下: <div id="code"> <p>/**</p> <p>*2014-2-12</p> <p>*代码自动闪烁输入</p> <p>*/</p> 2014-2-

ichat在线客服jQuery插件(可能是历史上最灵活的)

ichat是一款开源免费在线客服jQuery插件,通过该插件,您可以自由的定制属于自己的在线客服代码. ichat充分吸收传统在线客服插件的优点,并加上自身的独特设计,使得ichat可定制性异常强大. ichat追求简单实用,走小清新路线,以便能够适应大多数网站风格. ichat几乎全部由配置生成,使用简便,不需要写html,但需要写js,因为配置是json对象. ichat体积小巧,代码高效,兼容性良好,采用jQuery插件封装,与原有系统零冲突. 效果预览图: 更多内容参见: ichat项目

JQuery分页插件封装(源码来自百度,自己封装)

最近由于项目的需要,做了一个基于JQuery的表格分页插件封装,部分源码来源百度,经由自己封装完成. 下面是具体代码和说明,仅供参考.第一步可以先将我的HTML,CSS,JS这三部分的代码创建好后先运行看看,下图是文件目录展示. html <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <

JQuery插件编写之封装对象

Jquery扩展插件有三大法宝, 1.封装对象方法 (本文详细介绍):对通过选择器获取的jQuery对象进行操作.2.封装全局函数3.选择器插件 jQuery插件的机制: jQuery插件的机制很简单,就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法,扩展jQuery的功能. jQuery.fn.extend()多用于扩展上面提到的3种类型中的第一种,jQuery.extend()用于扩展后两种插件. 废话不多说,自己编写的插件建议命名为jque

把jQuery的类、插件封装成seajs的模块的方法

这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块 define(function () { //这里放置jquery代码 把你喜欢的jquery版本放进来就好了 return $.noConflict(); }); 调用方法: 这样引进就可以像以前一样使用jquery define(function (require, exports, module) { var $