Simplified plugins:
Simpleplugin.htm:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Simplified Plugin </title>
<script type= "Text/ecmascript" src= ". /js/jquery-1.2.6.js "></script>
<script type= "Text/ecmascript" src= ". /js/jquery. Simpleplugin.js "></script>
<script type= "Text/ecmascript" >
$ (function () {
$ ("Input"). Click (function () {
$ ("Body"). dialog ();
})
});
function f () {
$ (' body '). Find ("#MaskID"). Hide (1000);
$ (' body '). Find ("#DivDialog"). Hide (1000);
}
</script>
<body>
<input type= "button" value= "Hi plugin"/>
</body>
Jquery. Simpleplugin.js:
Copy Code code as follows:
$.fn.dialog=function () {
This. Maskdiv=function ()//Customize a function
{
Create a matte background where transparency is not set for simplicity. ZIndex decided the mask.
$ ("Body"). Append ("<div id=maskid></div>");
$ (' body '). Find ("#MaskID"). Width ("888px"). Height ("666px")
. css ({position: "absolute", Top: "0px", Left: "0px", Background: "#ccc", ZIndex: "10000"});
}
This. Maskdiv ()//Call the Custom function.
$ ("Body"). Append ("<div id=divdialog style= ' display:none ' ><ul><li> tips </li></ul>< Input type= ' button ' value= ' close ' onclick= ' f (); '/></div> ');
var obj=$ ("Body"). Find ("#DivDialog");
Obj.width ("200px"). Height ("200px");
Obj.css ({position: "absolute", Top: "100px", Left: "100px", Background: "#FFCC66", ZIndex: "10001"}). Show ("slow");
return this;
}
Complete plugins:
Myplugin.html:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Practice jquery Plug-ins </title>
<script type= "Text/ecmascript" src= ". /js/jquery-1.2.6.js "></script>
<script type= "Text/ecmascript" src= ". /js/jquery.firstplugin.js "> </script>
<script type= "Text/ecmascript" src= ". /js/jquery.dialog.js "></script>
<style type= ' text/css ' >
*{padding:0 margin:0}/* This row style must be added, or it may cause a bug to appear. */
#MyDiv {
Position:absolute;
width:200px;
height:200px;
font-size:12px;
Background: #666;
border:1px solid #000;
z-index:10001;
Display:none;
Text-align:center;
}
</style>
<script type= "Text/ecmascript" >
$ (document). Ready (function () {
$ ("Input"). Click (function () {
$ ("Body"). dialog ();
})
})
</script>
<body>
<div>
<input type= "button" value= "Hi plugin"/>
</div>
</body>
Jquery.dialog.js:
Copy Code code as follows:
JScript files
$.fn.dialog=function () {
This. Maskdiv=function ()//Customize a function
{
var wnd = $ (window), doc = $ (document);
if (Wnd.height () > Doc.height ()) {//When the height is less than one screen
Wheight = Wnd.height ();
}else{//when height is greater than a screen
Wheight = Doc.height ();
}
Create a matte background
$ ("Body"). Append ("<div id=maskid></div>");
$ (' body '). Find ("#MaskID"). Width (Wnd.width ()). Height (wheight)
. css ({position: "absolute", Top: "0px", Left: "0px", Background: "#ccc", Filter: "Alpha (opacity=90);", Opacity: "0.3", ZIndex: "10000"});
}
This.sposition=function (obj)//Customize a function with parameters
{
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); Calculate Top margin
var div_leftposition = left + (WIDTH/2)-(MYDIV_W/2); Calculate left Margin
Return Array (div_topposition,div_leftposition);
}
This. Maskdiv ();
$ ("Body"). Append ("<div id=divdialog style= ' display:none ' ><ul><li> hint </li></ul></ Div> ");
var obj=$ ("Body"). Find ("#DivDialog");
Obj.width ("200px"). Height ("200px");
Post=this.sposition (obj);
Obj.css ({position: "absolute", top:post[0]+ "px", left:post[1]+ "px", Background: "#FFCC66", ZIndex: "10001"}). Show (" Slow ");
return this;
}
