Simplified Plugin:
Simpleplugin.htm:
- <! 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:
- $. 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:
- <! 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:
- // 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 );
- }
- This. maskdiv ();
- $ ("Body "). append ("<Div id = divdialog style = 'display: none'> <ul> <li> prompt </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;
- }
End
