Simplified Plugin:
Simpleplugin.htm:
CopyCode The Code is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> simplified plug-in </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>
</Head>
<Body>
<Input type = "button" value = "Hi plugin"/>
</Body>
</Html>
Jquery. simpleplugin. JS:
Copy code The Code is as follows: $. FN. Dialog = function (){
This. maskdiv = function () // customize a function
{
// Create a masked background. The transparency is not set here for simplicity. Zindex determines 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 a custom function.
$ ("Body "). append ("<Div id = divdialog style = 'display: none '> <ul> <li> prompt </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 plug-ins:
Myplugin.html:
Copy code The Code is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> exercise jquery plug-in </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. Otherwise, a bug may occur. */
# 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>
</Head>
<Body>
<Div>
<Input type = "button" value = "Hi plugin"/>
</Div>
</Body>
</Html>
Jquery. Dialog. JS:Copy codeThe Code is as follows: // JScript File
$. 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 the height is greater than one screen
Wheight = Doc. Height ();
}
// Create a mask 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 the top margin
var div_leftposition = left + (width/2) -(mydiv_w/2); // calculate the left margin
return array (div_topposition, div_leftposition);
}< br> This. maskdiv ();
$ ("body "). append ("
");
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;
}