Tabs is now the most widely used Web page effect, jquery plug-ins and non-jquery plug-ins also have a lot of Some friends asked me how to use jquery.ui.tabs Ajax how to only request the server once originally I think it is very simple, look at the official API to understand, but I in reply to these friends, with firebug view of the official Ui.tabs found that the AJAX cache, each point of a tabs, will still There is a server request this should be the server cache, not actually we require only Ajax once, no longer request the server the next I looked for other tabs plug-ins, basically did not meet the requirements, is not too large is too simple, It's too big to use ui.tabs, both documents and code specifications are reliable. Therefore, it is necessary to make a concise tabs plug-in before the design, first tidy up the idea, realize tabs, automatic rotation, Ajax and other major functions, and then the arrangement of the DOM, here using the traditional
<div id= "Tabs" >
<ul>
<li><a href= "#tabs1" >tabs1</a></li>
<li><a href= "#tabs2" rel= "ajax.htm" >tabs2</a></li>
</ul>
<div id= "TABS1" >hello world!</div>
<div id= "TABS2" ></div>
</div>
A way for an li to correspond to a Div, when Ajax, add a rel attribute of a, and write the content into the corresponding Div, and then remove the Rel attribute, so that only the server is requested once, and the next is what Div has written.
I do not use cookies here, can be combined with the Jquery.cookie plug-in, so that even if the user closes the page to open the next time, do not need to request the server
First, write a jquery plug-in closure, the garden these two days a friend wrote a JavaScript closure concept, very good, interested friends to see
Copy Code code as follows:
(function ($) {
code here
}) (JQuery);
Second, the plug-in name, here named Atabs, so binding can be used when the $ (...). Atabs (), my English name Allen, so with the name of a word ~
Copy Code code as follows:
$.fn.atabs = function (options) {
Api
Main function
}
Third, write the function of the good to the API, for external modification
Copy Code code as follows:
$.fn.atabs.defaults = {
firston:0,
ClassName: ' Selected ',
EventName: ' All ',//click,mouserover,all
Loadname: ' Loading ... ',//ajax wait string
FadeIn: ' Normal ',
Autofade:false,
Autofadetime:3
};
var opts = $.extend ({}, $.fn.atabs.defaults, options); Here can be the external input to replace the default value, $.extend role for details see <a href= "http://api.jquery.com/jQuery.extend/" >http://api.jquery.com/ Jquery.extend/</a>, you can't read the English language, just look at the examples.
Four, write the main function, explain in the code comments
Copy Code code as follows:
Return This.each (function () {///here for each bound Dom plugin
var target = $ (this);
var div = Target.children (). Not ("Ul,span"); All of the tabs show the body div
var tabs = target.find (' ul:eq (0) Li '); Index of all tabs headers
function Tabs () {
if ($ (this). Hasclass (Opts.classname)) {
return false;
}
Tabsshow (Div, $ (this));
return false;
}
function Tabsshow (Div, Li, index) {
Div.stop (True, true). Hide ();
Automatically rotate with
if (typeof (index) = = "Number") {
if (Li.find ("a"). attr ("rel")) Ajax (Div, Li);
$ (Div[index]). Stop (True,true). FadeIn (Opts.fadein);
Tabs.stop (True, True). Removeclass (Opts.classname);
$ (Tabs[index]). Stop (True, true). addclass (Opts.classname);
}
Non-automatic rotation
else {
var tabbody = Div.filter (Li.find ("a"). attr ("href"));
if (Li.find ("a"). attr ("rel")) Ajax (Div, Li);
Tabbody.stop (true,true). FadeIn (Opts.fadein);
Tabs.stop (True, True). Removeclass (Opts.classname);
Li.stop (True, True). addclass (Opts.classname);
}
}
function Ajax (Div, Li) {//Here is the key Ajax, implemented in a REL way to only request the server once
var href = li.find ("a"). attr ("href");
var rel = Li.find ("a"). attr ("rel"); Ajax Request URL
var i = div.filter (href); Current Div
if (rel) {//If the AJAX request URL is not empty, Ajax only once
I.html (Opts.loadname);
$.ajax ({
Url:rel,
Cache:false,
Success:function (HTML) {
i.html (HTML);
},
Error:function () {
i.html (' Load error, please try again! ');
}
});
Li.find ("a"). Removeattr ("rel"); Ajax only once
}
}
if (Opts.autofade) {
var index = Opts.firston + 1;
SetInterval (function () {
if (index >= div.length) {
index = 0;
}
Tabsshow (Div, $ (this), index++);
}, Opts.autofadetime * 1000);
}
Tabs.bind (Opts.eventname = = ' all '?) ' Click MouseOver ': Opts.eventname, Tabs)//binding Event
. Filter (': I ') trigger (Opts.eventname = ' all '?) ' click ': Opts.eventname); Automatically trigger events
});
Finally, the above integration, tabs plug-in was born, the following is the full source:
Copy Code code as follows:
/*
* Author: Obsidian
*/
(function ($) {
$.fn.atabs = function (options) {
$.fn.atabs.defaults = {
firston:0,
ClassName: ' Selected ',
EventName: ' All ',//click,mouserover,all
Loadname: ' Loading ... ',//ajax wait string
FadeIn: ' Normal ',
Autofade:false,
Autofadetime:3
};
var opts = $.extend ({}, $.fn.atabs.defaults, options);
Return This.each (function () {
var target = $ (this);
var div = Target.children (). Not ("Ul,span"); All of the tabs show the body div
var tabs = target.find (' ul:eq (0) Li '); Index of all tabs headers
function Tabs () {
if ($ (this). Hasclass (Opts.classname)) {
return false;
}
Tabsshow (Div, $ (this));
return false;
}
function Tabsshow (Div, Li, index) {
Div.stop (True, true). Hide ();
Automatically rotate with
if (typeof (index) = = "Number") {
if (Li.find ("a"). attr ("rel")) Ajax (Div, Li);
$ (Div[index]). Stop (True,true). FadeIn (Opts.fadein);
Tabs.stop (True, True). Removeclass (Opts.classname);
$ (Tabs[index]). Stop (True, true). addclass (Opts.classname);
}
Non-automatic rotation
else {
var tabbody = Div.filter (Li.find ("a"). attr ("href"));
if (Li.find ("a"). attr ("rel")) Ajax (Div, Li);
Tabbody.stop (true,true). FadeIn (Opts.fadein);
Tabs.stop (True, True). Removeclass (Opts.classname);
Li.stop (True, True). addclass (Opts.classname);
}
}
function Ajax (Div, Li) {
var href = li.find ("a"). attr ("href");
var rel = Li.find ("a"). attr ("rel"); Ajax Request URL
var i = div.filter (href); Current Div
if (rel) {//If the AJAX request URL is not empty, Ajax only once
I.html (Opts.loadname);
$.ajax ({
Url:rel,
Cache:false,
Success:function (HTML) {
i.html (HTML);
},
Error:function () {
i.html (' Load error, please try again! ');
}
});
Li.find ("a"). Removeattr ("rel"); Ajax only once
}
}
if (Opts.autofade) {
var index = Opts.firston + 1;
SetInterval (function () {
if (index >= div.length) {
index = 0;
}
Tabsshow (Div, $ (this), index++);
}, Opts.autofadetime * 1000);
}
Tabs.bind (Opts.eventname = = ' all '?) ' Click MouseOver ': Opts.eventname, Tabs)//binding Event
. Filter (': I ') trigger (Opts.eventname = ' all '?) ' click ': Opts.eventname); Automatically trigger events
});
};
}) (JQuery);
