JQuery practice-window effect, jquery practice window

JQuery practice-window effect, jquery practice window

In the previous related blog posts, I briefly summarized jquery-related knowledge. Many small knowledge points about jquery require us to start and Practice on our own, we need to work on a line of code by ourselves. Today we will continue to learn about small examples of jquery. Today, we use a small example about the window pop-up effect and relevant source code, the editor has already been uploaded. You can click here to download the files you need. I hope you can help your friends who need them. Next, let's start learning small examples. First, let's take a look at the final result, as shown below:

A small example of window effect is not blocked but more flexible. Next, let's take a look at the overall directory layout of this small example, as shown in:

Next, let's start to write our program code, step by step to write an instance, first step, create an html file, and write the code as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> Let's analyze the code above. The simulated window on the page can be implemented through the html div tag. The title bar and content area in the window can be represented by a div respectively, there are many ways to make a group of divs look like a window style. For example, you can set a background color for the entire window, and then use another background color for the content area, in addition, you can set a certain padding value for the window to compare the content area with the outside of the window after the title bar, so it looks like a window effect. By now, html can be turned back, because only the content is available on the page. As for how to display the effect of a tab, it is the work of css. Then, we will compile the css code, as shown below:


. Window {background-color: # D0DEF0; width: 250px;/* padding: 2px; */margin: 5px;/* absolute position of the control window */position: absolute; display: none ;}. content {height: 150px; background-color: white; border: 2px solid # D0DEF0; padding: 2px;/* display the scroll bar 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 float, which will actually affect the display effect between the next element and the float element. Therefore, in this example, if the img in the html code is at the end of the title bar, float: right causes the image to run to the rightmost side of the content area. Only when the img in the html is put in front of the title bar text, float: right will place the image on the rightmost side of the title bar. Correspondingly, in js, we also need to create two files, one jquery and one window. In view of the large amount of jquery code, xiaobian has uploaded relevant resources, if necessary, you can download the code from this link. Next, we will compile the tab code to add behavior capabilities to the Organization page. The Code is as follows:


$ (Document ). ready (function () {// 1. click the button to display a window in the middle of the screen // 2. click button 2 to display a window in the lower left corner of the screen. // 3. after the page is loaded, you can enter a window in the lower-right corner of the screen, and the window gradually fades out/** $ (". title img "). click (function () {* // click the 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 button, display the window with id as center in the middle of the page // calculate the left boundary and Upper Boundary Value of the window in the middle of the screen // width and height of the visible area of the browser, current window Width and height // consider the current left Boundary Value of the horizontal scroll bar and the current upper boundary value of the vertical scroll bar 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 brow Serwidth = 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: "bott Om "}, function () {rightwin. hide () ;},{ left: rleft, top: scrollTop + browserheight }). fadeOut (1, 15000 ). dequeue () ;}, 500) ;});/** $. fn. hello = function () {* alert ("hello:" + this. val (); * return this; *} * // *** @ param position indicates the final position of the window, which includes two attributes: left, top * @ param hidefunc indicates the method for hiding the execution window * @ param initPos indicates the initial position of the window, which contains two attributes: left and top */$. fn. mywin = function (position, hidefunc, initPos) {if (position & posi Tion 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; // calculate the width and height of the current visible area of the browser, and the left border of the scroll bar. The value of the upper border is function getBrowserDim () {browserwidth = windowobj. width (); browserheight = windowobj. height (); scrollLeft = windowobj. scro LlLeft (); scrollTop = windowobj. scrollTop ();} // calculate the real left Boundary Value of the window function calLeft (positionleft, scrollLeft, browserwidth, cwinwidth) {if (positionleft & typeof positionleft = "string ") {if (positionleft = "center") {left = scrollLeft + (browserwidth-cwinwidth)/2;} else if (positionleft = "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 ;}} // calculate 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-cwinheight; if ($. browser. opera) {top = top-25 ;}} else {top = scrollTop + (browserheight-cwinheight)/2 ;}} else if (positiontop & typeof positi Ontop = "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 currentwin action of the close button. children (". title "). 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 & typeof initLeft = "number") returns currentwin.css ("left", initLeft);} else returns currentwin.css ("left", 0 );} if (initTop & typeof initTop = "number") returns currentwin.css ("top", initTop);} else returns currentwin.css ("top", 0);} currentwin. show ();} cwin Width = currentwin. outerWidth (true); cwinheight = currentwin. outerHeight (true); currentwin. data ("positionleft", positionleft); currentwin. data ("positiontop", positiontop); getBrowserDim (); moveWin (); var scrollTimeout; // position of the window to be moved when the browser scroll bar is rolled $ (window ). scroll (function () {// checks whether 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 position $ (window ). resize (function () {// checks whether the current window is visible if (! Currentwin. is (": visible") {return;} getBrowserDim (); moveWin () ;}); // returns the current object, so that other methods of cascade execution can be returned currentwin ;}}
So far, the code for this small instance of window effect has been compiled. Let's take a look at our running effect as shown in:


Editor's note: Now jquery's small example is about to say goodbye to our friends. It's still the beginning of the blog post. We need to work on all the practical examples by ourselves, A line of code needs to be learned slowly in the process of practice. It takes nearly three weeks for the company to work as an intern. The customer is very picky about the importance of writing documents and drawing, the use of a punctuation mark, the use of fonts, and the ability to express language semantics must be gradually improved during the internship process. Finally, wish you a happy Dragon Boat Festival '(* dragon _ Dragon Boat *)′!