Step by step to create a jQuery tabs plugin - 1
Just as the auther of jQuery Tools said:
jQuery UI has a so-called “unified API” which uses the following syntax
for invoking methods:// call select method for tabs $("ul.example").tabs("select", 1);
API methods are called by supplying the method name as a string followed by method arguments. To be honest, I think that this kind API design is fundamentally wrong. It has the following problems:
- The syntax is unique to jQuery UI and people outside the UI community are not accustomed to it
- The syntax is cubersome. For example, if you want to perform method chaining you have to write the following:$(”ul.example”).tabs(”select”, 1).tabs(”disable”, 2);
- The JavaScript engine cannot see typos. writing “selecct” does not look
like an error to a browser, making it harder to debug.
I dislike the jQuery UI’s unified API either. There is another article supporting jQuery UI’s unified API:
With jQuery UI, all the plugins work with jQuery and it’s philosophy. Working with
John Resig’s supervision and incite. Working together. Returning a seperate API
has some potential, but not the way it is implimented here.
In my opinion, a component is a collection of nodes, properties, events and methods,
which should be presented in his own instance not the DOM node in jQuery.
I love jQuery, but i think the components based on jQuery should be more like extjs,
qooxdoo.
Maybe it’s time for me to learn how to write a jQuery plugin, and convert it to
the way used in jQuery Tools.
A simple jQuery tabs plugin
Html markup is the same as jQuery UI Tabs.
<div class="tabs"> <ul> <li><a href="javascript:;" >Tab 1</a></li> <li><a href="javascript:;" >Tab 2</a></li> <li><a href="javascript:;" >Tab 3</a></li> </ul> <div> Pane 1 content</div> <div> Pane 2 content</div> <div> Pane 3 content</div> </div>
Let’s write some basic CSS rules:
.tabs ul { list-style-type: none; padding: 0px; margin: 0px; } .tabs li { display: inline; } .tabs li a { text-decoration: none; } .tabs a.current { background-color: #ccc; }
And the jQuery plugin code:
(function($) { $.fn.tabs = function() { var tabs = this.children("ul").find("li > a"); var panes = this.children("div"); var current = 0; function clickTab(index) { current = index; tabs.removeClass("current").eq(current).addClass("current"); panes.hide().eq(current).show(); } clickTab(0); tabs.click(function() { clickTab(tabs.index(this)); }); return this; }; })(jQuery);
The invoke code:
$(function() { $("div.tabs").tabs(); });