Jquery Practice --- tab effect, jquery Practice ---

Jquery Practice --- tab effect, jquery Practice ---

In the previous blog, I briefly introduced some basic jquery knowledge. In this blog today, I will continue to learn about jquery. Today I will learn a small example of a tab, relevant source code editor has been uploaded. If you need it, you can download it by yourself (* Your _ others *) '. Click to download it! Let's take a look at the final one.

As shown in the preceding figure, This page contains two tabs, each of which has a tab. We often see the tab effect in web applications, the main function is to present some content to users in a limited area in the visible area. The preceding tab is called the sliding door technology, when you move the mouse to understand a tag, the content will change. Well, let's introduce the implementation effect of this small example first. Then, let's start to compile our code, first, let's look at how to compile the html code nie. The Code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> Let's take a look at the running effect. What kind of surprises will happen to us?


We can see that after compiling html code, our running effect is shown in, but this effect differs by 108,000 from what we finally need to achieve, but the html work has been completed, because there is only such content on the page, it is the work of css to show the effect of a tab. Next, we will compile the css code, as shown below:

ul,li{   margin: 0;   padding: 0;   list-style: none; } li{    float:left;background-color:#868686;color:white;padding:5px;margin-right:2px;border:1px solid white; } li.tabin{   background-color:#6E6E6E;   border:1px solid white; }div{ clear: left;background-color: #6E6E6E;color: white;width: 300px;height: 100px;padding: 10px;display: none;}div.contentin {display: block;}
Let's analyze the code above. We found that a group of tags are managed by a ul, each of which is a li In ul, And the content under the tag is managed by a div. What does css look like? Let's take a look at the running effect:


So far, we have completed the compilation of css code. css ensures that the effect of tabs can still be displayed to users without js. Then, we will compile the js Code, correspondingly, in js, we also need to create two files, one jquery and one tab. 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:

Var timoutid; $ (document ). ready (function () {// locate all tags/* $ ("li "). mouseover (function () {// hide the original content area $ ("div. contentin "). hide (); // The content area corresponding to the current tag is displayed}); */$ ("# tabfirst li "). each (function (index) {// each jquery object packaged with li will execute the code in the function // index is the index value of the li that is currently executing the function code corresponding to the index value in all arrays composed of li // With index after the value, you can find the content area corresponding to the current tag $ (this ). mouseover (function () {var liNode = $ (this); timoutid = setTimeout (function () {// hide the originally displayed content area $ ("div. contentin "). removeClass ("contentin"); // clear the class $ ("# tabfirst li. tabin "). removeClass ("tabin"); // The content area corresponding to the current tag is displayed. // $ ("div "). eq (index ). addClass ("contentin"); $ ("div. contentfirst: eq ("+ index + ")"). addClass ("contentin"); liNode. addClass ("tabin") ;}, 300 );}). mouseout (function () {clearTimeout (timoutid );});});
Let's take a look at the running effect, as shown in:


So far, the effect of our first tab has been compiled. Next, let's write the effect of the second tab. Here, let's take a look at the code of the second tab, the small Editor is added on the basis of the first tab effect. Okay, let's take a look at how our second tab achieves the effect of nie. First, let's look at the html code, as shown below:

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> Next, we will compile the CSS Code as follows:


ul,li {margin: 0;padding: 0;list-style: none;}#tabfirst li {float: left;background-color: #868686;color: white;padding: 5px;margin-right: 2px;border: 1px solid white;}#tabfirst li.tabin {background-color: #6E6E6E;border: 1px solid #6E6E6E;}div.contentfirst {clear: left;background-color: #6E6E6E;color: white;width: 300px;height: 100px;padding: 10px;display: none;}div.contentin {display: block;}#tabsecond li {float: left;background-color: white;color: blue;padding: 5px;margin-right: 2px;cursor: pointer;}#tabsecond li.tabin {background-color: #F2F6FB;border: 1px solid black;border-bottom: 0;z-index: 100;position: relative;}#contentsecond {width: 500px;height: 200px;padding: 10px;background-color: #F2F6FB;clear: left;border: 1px solid black;position: relative;top: -1px;}img {display: none;}
Finally, write the js Code. The specific code is as follows;


Var timoutid; $ (document ). ready (function () {// locate all tags/* $ ("li "). mouseover (function () {// hide the original content area $ ("div. contentin "). hide (); // The content area corresponding to the current tag is displayed}); */$ ("# tabfirst li "). each (function (index) {// each jquery object packaged with li will execute the code in the function // index is the index value of the li that is currently executing the function code corresponding to the index value in all arrays composed of li // With index after the value, you can find the content area corresponding to the current tag $ (this ). mouseover (function () {var liNode = $ (this); timoutid = setTimeout (function () {// hide the originally displayed content area $ ("div. contentin "). removeClass ("contentin"); // clear the class $ ("# tabfirst li. tabin "). removeClass ("tabin"); // The content area corresponding to the current tag is displayed. // $ ("div "). eq (index ). addClass ("contentin"); $ ("div. contentfirst: eq ("+ index + ")"). addClass ("contentin"); liNode. addClass ("tabin") ;}, 300 );}). mouseout (function () {clearTimeout (timoutid) ;}); // after loading the entire page, the content area of tag effect 2 needs to be loaded with static html page content $ ("# realcontent "). load ("allTab.html"); // locate the three tags corresponding to tag 2 and register the mouse click event $ ("# tabsecond li "). each (function (index) {$ (this ). click (function () {$ ("# tabsecond li. tabin "). removeClass ("tabin"); $ (this ). addClass ("tabin"); if (index = 0) {// load the static completion page $ ("# realcontent "). load ("allTab.html");} else if (index = 1) {// load dynamic page $ ("# realcontent "). load ("allTab.html h2");} else if (index = 2) {// load remote data (this is also the data output on a dynamic page) $ ("# realcontent "). load ("allTab.html span") }}) ;}); // events that start and end with an ajax request bound to a loading image $ ("# contentsecond img "). bind ("ajaxStart", function () {// clear the content in the div $ ("# realcontent" ).html (""); // before any ajax interaction on the page starts, the content in the function will be executed $ (this ). show ();}). bind ("ajaxStop", function () {// after any ajax interaction on the page ends, the content in the function will be executed $ (this ). slideUp ("1000 ");});});
Finally, let's take a look at the running effect, as shown in:


Note:Jquery practice, the effect of the tab, here we will say goodbye to friends, the relevant source code, xiaobian has uploaded, if you have a need, you can click Download '(* prop _ prop *)'. Through the learning of this small example, we know that z-index can control the Layer Height of elements on the page, the larger the value, the more front the page layer will overwrite some elements with lower z-index values. Only the position value is relative or absolute element, z-index takes effect. The load method in jquery is very powerful. you can load the data output from a specified static or dynamic page or server program to the elements encapsulated by the jquery object that executes the load method. In addition, we also learned that bind can be used to bind js events or events defined in jquery to a specified node. for events that do not directly provide the registration method in jquery, you can use this method for registration. The second parameter of the method can be the method definition for event execution. Through a small example, we have learned a lot and learned a lot. But all the gains and understandings require us to do it ourselves and practice it!