代码： jquery 插件开发（自用插件）

http://www.imooc.com/learn/99　　阿当大话西游之WEB组件　　2016-4-19

 

 

jquery插件开发：　　2016-3-1

http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html　　讲解

http://isux.tencent.com/half-package-web-components-for-design.html　　面向设计的半封装web组件开发　　2016-4-6

 

 

这是个最简单的：   （方法调用模式）

<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var WG={
    prov:11,
    city:234,
    test1:function(){
        alert(this.city);
    }
}
WG.test1();
</script>

 

多级类：  　　2016-3-17

这是类似json串的写法。 都是“名——值”的对应关系。 值可以是属性、方法，还可以是对象、数组————只要你愿意，把什么都可以塞进去

<script src="http://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var WG={
    city:110,
    test1:function(){
        alert(this.city);
    },
    base:{
        city:110101,
        test1:function(){
            alert(this.city);
        },
        test2:function(){
            alert(WG.city);
            alert(WG.arr[2]);
        }
    },
    arr:[555,444,333,222,111]
}
//-----------------------------
    $("#button1").click(function(){
        WG.test1();
    });
    $("#button2").click(function(){
        WG.base.test1();
    });
    $("#test2").click(function(){
        WG.base.test2();
    });

});
</script>
<input type="button" value="一级" id="button1">
<input type="button" value="二级" id="button2">
<input type="button" value="test2" id="test2">

 

 

 

 

 

 

 

 

 

jQuery.fn.extend(object) ; 给jQuery对象添加方法。

jQuery.fn = jQuery.prototype = { }

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

 

 

 

 

 

 

 

// 2016-3-1 17:00

$(function(){

/*
插件:弹窗
调用方式：
//$('.js_design_pop').popLayer({timeout:223});//延时关闭
$('.js_design_pop').popLayer();

*/
var popLayer = function (target, options) {
    this.options = null;
    this.target = null;
    this.timeout = null;
    this.init(target, options);
}
popLayer.prototype.init = function (target, options) {
    this.options = options;
    this.target = target;
    this.timeout = null;

    target.fadeIn();
    if(options) {
        if (options.timeout !== undefined ) {
            if(options.timeout > 0){
                console.log(options.timeout);

                target.timer = setTimeout(function(){
                    target.hide();
                    $('.popmask').hide();
                },options.timeout);
            }
        }
    }
    //创建遮罩层
    var $mask = $('<div class="popmask"></div>');
    if($('.popmask').length === 0){
        $('body').append($mask);
    }
    $('.popmask').show();

    //弹出层居中
    var target = this.target;
    target.css({
        marginTop : -1 * (target.height() / 2),
        marginLeft : -1 * (target.width() / 2)
    });

    //右上角关闭按钮
    this.target.find('.close').click(function(){
        $(this).parents('.poplayer').hide();
        $('.popmask').hide();
    });
    //按ESC关闭所有弹层
    $(document).keydown(function(ev){
        if(ev.keyCode==27){
            $('.poplayer').hide();
            $('.popmask').hide();
        }
    });
    /*
    //弹出层拖拽
    var target=this.target;
    var canMove = false,Rx, Ry;
    target.mousedown(function (event) {
        Rx = event.pageX - (parseInt(target.css("left")) || 0);
        Ry = event.pageY - (parseInt(target.css("top")) || 0);
        target.css("position", "fixed").css('cursor', 'move');
        canMove = true;
    }).mouseup(function () {
        canMove = false;
        target.css('cursor', 'auto');
    });
    $(document).mousemove(function (event) {
        if (canMove) {    target.css({ top: event.pageY - Ry, left: event.pageX - Rx });    }
    });*/


}
//关闭弹出层
popLayer.prototype.close = function () {
    this.target.hide();
    $('.popmask').hide();
}




/*
//示例
//var a = new popLayer($('.js_collect_pop'),{timeout:2000});//延时关闭

var a = new popLayer($('.js_collect_pop'));
//var b = new popLayer($('.js_design_pop'));

//a.close();

 });

 

 

..

 

 

 

...