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 ></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 );

$("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 >[x]</a></div>

对方答复

</div>