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

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);

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