jquery Combat---window effect

In the previous related blog post, the small part of the relevant knowledge of jquery a simple summary, about jquery, a lot of small knowledge points, we need to do our own hands and practice, a line of code all need our own hands to knock, today we continue to learn about jquery small examples, Today, our small example is about the pop-up effect of the window, the relevant source code, the small part has been uploaded, the need for a small partner can click to download Oh, hope can help to the needs of small partners Oh, then, we began to learn small examples, first, we look at the final, as follows:

A small example of this window effect, which is not blocked and more flexible, then let's look at the layout of the overall directory for this small example, as shown in:

Next, we begin to write our program code, step by step to write an instance, the first step is to create an HTML file, the code is written as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

let us analyze the above code, the page simulation of the window can be implemented by the HTML DIV tag, the window title bar and content area can be represented by a div, so that a set of Div appears to be a window style, there are many ways, such as the entire window can be set to use a background color , and then the content area uses a different background color, and sets a certain padding value to the window, the contrast between the content area and the outside window of the title bar is reached, which appears to be a window effect. To this HTML can be retire, because there are only these content on the page, as to how to show a tab effect, is the work of CSS, and then we write the CSS code, as follows:

. window {    background-color: #D0DEF0;    width:250px;    /*padding:2px;*/    margin:5px;/* Control window Absolute Positioning */    Position:absolute;    Display:none;}. Content {    height:150px;    Background-color:white;    border:2px solid #D0DEF0;    padding:2px;/* the scroll bar is displayed when the content of the control area exceeds the specified height and width */    overflow:auto;}. Title {    padding:4px;    font-size:14px;}. Title img {    width:14px;    height:14px;    Float:right;    Cursor:pointer;}

Let's take a look at the float, which actually affects the display between the elements of the next element and the float, so in this case, if IMG is at the end of the title bar in the HTML code, float:right causes the picture to run to the far right of the content area, It is only in the HTML that the IMG is placed in front of the title bar text, this time float:right will make the picture just right in the title bar. Accordingly, in JS we also want to build two files, a jquery a window, in view of the jquery code more, so the small part has uploaded related resources, the need for a small partner to the link to download, and then we write tab code, to organize the page to add capacity, The code looks like this:

$ (document). Ready (function () {//1. Click the button to display a window//2 in the middle of the screen. Click button 2 to display a window//3 in the lower-left corner of the screen. After the page is loaded, you can float a window in the lower-right corner of the screen, and the window fades slowly/     * *$ (". Title img"). Click (function () {*///Close button to close the window * $ (this). Parent (). Parent (). Hide ("slow"); *}); */var Centerwin = $ ("#center"), var Leftwin = $ ("#left"), var Rightwin = $ ("#right"); $ ("#centerpop"). Click (function () {// After clicking the mouse button, the ID Center window appears in the middle of the page//calculates the value of the left and upper bounds of the window in the middle of the screen//width and height of the viewable area of the browser, width and height of the current window// You need to take into account the current left boundary value of the horizontal scroll bar and the current upper boundary value of the vertical scrollbar centerwin.show ("slow");}); $ ("#leftpop"). Click (function () {Leftwin.slidedown ("slow");}); SetTimeout (function () {Centerwin.mywin ({left: ' center ', Top: ' Center '}), Leftwin.mywin ({left: ' Left ', top: ' Bottom '}, function () {Leftwin.slideup ("slow");}); var windowobj = $ (window), var cwinwidth = Rightwin.outerwidth (True), var cwinheight = Rightwin.outerheight (true), Var Browserwidth = Windowobj.width (); var browserheight = Windowobj.height (); varscrollleft = Windowobj.scrollleft (); Varscrolltop = Windowobj.scrolltop (); var rleft = scrollleft + BROWSERWIDTH-CWInwidth;if ($.browser.safari) {rleft = rleft-15;} if ($.browser.opera) {rleft = Rleft + 15;} if ($.browser.msie && $.browser.version.indexof ("8") >= 0) {rleft = rleft-20;} Rightwin.mywin ({left: ' Right ', top: ' Bottom '}, function () {rightwin.hide ();},{left:rleft, Top:scrolltop + Browserheight}). FadeOut (15000). Dequeue ();},500);}); * *$.fn.hello = function () {* Alert ("Hello:" + this.val ()); * return this; *} *//** * @param position represents the final position of the window, contains two properties, one is left, one is top * @param Hidefunc represents the method of performing window hiding * @param initpos represents the initial position of the window, contains two properties, One is left, one is top */$.fn.mywin = function (position, Hidefunc, Initpos) {if (position && position instanceof Object) { var positionleft = Position.left;var Positiontop = Position.top;var Left;var Top;var windowobj = $ (window); var Currentwin = This;var Cwinwidth;var cwinheight;var browserwidth;var browserheight;var scrollleft;var scrolltop;//calculates the width and height of the current viewable area of the browser , as well as the left edge of the scrollbar, the value of the upper boundary function Getbrowserdim () {browserwidth = Windowobj.width (); browserheight = WindowoBj.height (); scrollleft = Windowobj.scrollleft (); scrolltop = Windowobj.scrolltop ();} Calculates the window's true left boundary value function Calleft (Positionleft, ScrollLeft, Browserwidth, cwinwidth) {if (Positionleft && typeof Positionleft = = "string") {if (Positionleft = = "Center") {left = ScrollLeft + (browserwidth-cwinwidth)/2;} else if (PO Sitionleft = = "Left") {left = ScrollLeft;} else if (Positionleft = = ' right ') {left = ScrollLeft + browserwidth-cwinwidth ; if ($.browser.safari) {left = left-15;} if ($.browser.opera) {left = left + 15;} if ($.browser.msie && $.browser.version.indexof ("8") >= 0) {left = left-20;}} else {left = ScrollLeft + (browserwidth-cwinwidth)/2;}} else if (positionleft && typeof positionleft = = "Number") {left = Positionleft;} else {left = 0;}} Calculates the real upper boundary value of the window function Caltop (positiontop, ScrollTop, Browserheight, cwinheight) {if (Positiontop && typeof Positiontop = = "string") {if (Positiontop = = "Center") {top = scrolltop + (browserheight-cwinheight)/2;} else if (Positiontop = = "Top") {top = scrolltop;} else if (positiontop = = "Bottom") {top = scrolltop + BROWSERHEIGHT-CWI Nheight;if ($.browser.opera) {top = top-25;}} else {top = scrolltop + (browserheight-cwinheight)/2;}} else if (positiontop && typeof positiontop = = "Number") {top = Positiontop;} else {top = 0;}} Move the position of the window function Movewin () {Calleft (Currentwin.data ("Positionleft"), ScrollLeft, Browserwidth, cwinwidth); Caltop ( Currentwin.data ("Positiontop"), ScrollTop, Browserheight, cwinheight); Currentwin.animate ({left:left,top:top},600) ;} Defines the action Currentwin.children (". Title") of the Close button. Children ("IMG"). Click (function () {if (!hidefunc) {currentwin.hide ("slow"). );} else {hidefunc ();}}); if (initpos && initpos instanceof Object) {var initleft = Initpos.left;var Inittop = initpos.top;if (Initleft &amp ;& typeof Initleft = = "Number") {Currentwin.css ("left", initleft);} else {currentwin.css ("left", 0);} if (inittop && typeof inittop = = "Number") {Currentwin.csS ("Top", inittop);} else {currentwin.css ("top", 0);} Currentwin.show ();} Cwinwidth = Currentwin.outerwidth (true); cwinheight = Currentwin.outerheight (True); Currentwin.data ("Positionleft", Positionleft); Currentwin.data ("Positiontop", Positiontop); Getbrowserdim (); Movewin (); var scrolltimeout;// When the browser scroll bar scrolls, move the window's location $ (Windows). Scroll (function () {///Determine if the current window is visible if (!currentwin.is (": Visible") {return;} Cleartimeout (scrolltimeout); scrolltimeout = SetTimeout (function () {Getbrowserdim (); Movewin ();},300);}); /When the browser size changes, move the window's location $ (Windows). Resize (function () {///Determine if the current window is visible if (!currentwin.is (": Visible") {return;} Getbrowserdim (); Movewin ();}); /returns the current object so that you can cascade execution of other methods return Currentwin;}}

At this point, our window effect of this small instance code has been written, we look at the effect of our operation as shown:

Small Editor's note: This small example of jquery to the small partners to say good-bye, or the beginning of the blog, all the practical small examples need our own hands to knock, a line of code needs to be in the process of the practice of slowly understand, to the company internship fast three weeks time, Deep understanding of the importance of writing documents and drawing, the customer is fastidious, a punctuation mark, use of the use of the font, the expression of language semantics, all the small part of the process needs to be gradually improved in the internship, finally, I wish you small partners Happy Dragon Boat Festival (*∩_∩*)!

jquery Combat---window effect