search

Home >Web Front-end >JS Tutorial >Step by step implementation process of making jquery plug-in Tabs_jquery

Step by step implementation process of making jquery plug-in Tabs_jquery

WBOY
WBOYOriginal
2016-05-16 18:23:311267browse

Tabs are the most widely used effect on web pages now. There are also many jquery plug-ins and non-jquery plug-ins. Some friends asked me how to use ajax of jquery.ui.tabs to only request the server once. I think it is actually very simple. Take a look. I know the official API, but before replying to these friends, I used firebug to check the official ui.tabs and found that the ajax cache was declared. Every time a tab is clicked, there will still be a server request. This should be the server cache, not the actual one. We only requested Ajax once and no longer requested the server. Next, I looked for other tabs plug-ins. Basically, none of them met the requirements. They were either too big or too simple. If they were too big, it would be better to use ui.tabs, documentation and The code specifications are all reliable. Therefore, it is necessary to make a simple tabs plug-in. Before designing, first sort out the ideas and implement main functions such as tabs, automatic rotation, ajax, etc., and then the dom arrangement form. Here we use the traditional



    >　　
  • tabs2
    • tabs1">Hello World!

　


The way a li corresponds to a div, when When using ajax, add a rel attribute of a, write the content into the corresponding div, and then remove the rel attribute. This will only request the server once, and the rest will be the content that the div has already written
I have not used it here. Cookie can be combined with the jquery.cookie plug-in, so that even if the user closes the web page and opens it next time, there is no need to request the server
First, first write a closure for the jquery plug-in. A friend in the garden has written javascript in the past two days. The concept of closure is very good. Friends who are interested should take a look



Copy the code The code is as follows: (function ($) {
//code here
})(jQuery);


Second, name the plug-in, here it is named aTabs, so you can bind it Use $(...).aTabs(), my English name is Allen, so I named it with the prefix a~


Copy code The code is as follows: $.fn.aTabs = function (options) {
//api
//main function
}


Third, write the desired function into an API for external modification


Copy the code The code is 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 you can replace the default value with external input. For details on the role of $.extend, see http://api.jquery.com/jQuery.extend/, if you don’t understand English, just look at the examples


Fourth, write the main function , please see the comments in the code


Copy the code The code is as follows:

return this.each(function () { //Here is each bound dom plug-in
var target = $(this);
var div = target.children().not( "ul,span"); //All tabs display body div
var tabs = target.find('ul:eq(0) li'); //All tabs header index
function Tabs( ) {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this));
return false;
}
function tabsShow(div, li, index) {
div.stop(true, true).hide();
//Automatic rotation using
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, which only requests the server once by operating rel
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 ajax request url is not Empty, only ajax once
i.html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html(html);
},
error: function () {
i.html('Loading error, please try again! ');
}
});
li.find("a").removeAttr("rel"); //Only ajax 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) //Bind event
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //Automatically trigger events
});

Finally, after integrating the above, the tabs plug-in was born. Here is the full source code:
Copy code The code is as follows:

/*
* Author: Obsidian
*/
(function ($) {
$.fn. aTabs = function (options) {
$.fn.aTabs.defaults = {
firstOn: 0,
className: 'selected',
eventName: 'all', //click,mouserover, all
loadName: 'Loading...', //ajax waiting 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 tabs display body div
var tabs = target.find('ul:eq(0) li'); //All tabs headers Department index
function Tabs() {
if ($(this).hasClass(opts.className)) {
return false;
}
tabsShow(div, $(this)) ;
return false;
}
function tabsShow(div, li, index) {
div.stop(true, true).hide();
//Automatic rotation
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 ajax request url is not empty, only ajax once
i .html(opts.loadName);
$.ajax({
url: rel,
cache: false,
success: function (html) {
i.html(html);
},
error: function () {
i.html('Loading error, please try again! ');
}
});
li.find("a").removeAttr("rel"); //Only ajax 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) //Bind event
.filter(':first').trigger(opts.eventName == 'all' ? 'click' : opts.eventName); //Automatically trigger events
});
};
})(jQuery);
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery multiSelect multi-select drop-down box_jqueryNext article：jquery multiSelect multi-select drop-down box_jquery

Related articles

See more