Jquery插件学习

---插件一---------------------------------------------------------------

1、首先了解下这里http://api.jquery.com/jQuery.extend/

2、定义插件内容

    (function($) {
        $.fn.foobar = function(options) {  //footbar定义为插件的名字 function参数可以有多个
            var settings = {
                value: 5,
                name: "pete",
                bar: 655
            };
            if (options) {
                $.extend(settings, options);
            };

           //这里我们定义当单击对象时候发生的事情
            $("#Button1").click(function() {
                alert(settings.value);
            });
        }
    })(jQuery);

3、如何使用插件

   //对象调用插件，当点击对象时候，发生插件包里的单击事件，

   $(function() {
           $("#Button1").foobar({  
            value: 8
           } );
    })

4、html内容

    <div>
        <input id="Button1" type="button" value="button" />
        <input id="Text1" type="text" />
        <div id="show"></div>
    </div>

---插件二------------------------------------------------------------------

1、遮罩层的定义

 (function($) {
            $.fn.extend({
                showT: function() { $("#MaskID").show(); this.show("slow"); },
                hideT: function() { $("#MaskID").hide(); this.hide("slow"); }
            });
            $.fn.dialog = function(options) {
                var settings = {

                    oWidth: 100 + "px",
                    oHeight: 100 + "px"
                };

                if (options) {
                    $.extend(settings, options);
                };

                MaskDiv = function(el) {
                    var wnd = $(window);
                    var doc = $(document);
                    //alert(doc.height());
                    if (wnd.height() > doc.height()) {  //当高度少于一屏
                        wHeight = wnd.height();
                    }
                    else {   //当高度大于一屏
                        wHeight = doc.height();
                    }
                    //创建遮罩背景

                    $("body").append("<div ID=MaskID  ></div>");
                    $("body").find("#MaskID").width(wnd.width()).height(wHeight).css({ display: "none", position: "absolute", top: "0px", left: "0px", background: "#ccc", filter: "Alpha(opacity=90);", opacity: "0.3", zIndex: "10000" });
                }

                MaskDiv(this);
                this.width(settings.oWidth).height(settings.oHeight);
                sPosition = function(obj) {
                    var MyDiv_w = parseInt(obj.width());
                    var MyDiv_h = parseInt(obj.height());

                    var width = parseInt($(document).width());
                    var height = parseInt($(window).height());
                    var left = parseInt($(document).scrollLeft());
                    var top = parseInt($(document).scrollTop());

                    var Div_topposition = top + (height / 2) - (MyDiv_h / 2); //计算上边距
                    var Div_leftposition = left + (width / 2) - (MyDiv_w / 2); //计算左边距
                    return Array(Div_topposition, Div_leftposition);
                }
                PosT = sPosition(this);
                this.css({ position: "absolute", top: PosT[0] + "px", left: PosT[1] + "px", background: "#FFCC66", zIndex: "10001" });
                return this;
            }

        })(jQuery);

2、调用遮罩

 

$(function() {

        //初始化弹出框
        $('#DivDialog').dialog({
            oWidth: 200 + "px",
            oHeight: 200 + "px"
        });
        $("#Button1").click(function() {
             $('#DivDialog').showT();//open dialog
            });
            $("#dd").click(function() {
                 $('#DivDialog').hideT();//hide
            });

        })

3、html文件格式

    <div>
        <input id="Button1" type="button" value="button" />
    </div>
    <div id="DivDialog" style='display: none'>
        <div style="text-align: right">
            <a href="#" id="dd">[x]</a></div>
        对方答复
    </div>