Step by step to create a jQuery tabs plugin - 1

3907 단어 jquery
Just as the auther of jQuery Tools  said:
jQuery UI has a so-called “unified API” which uses the following syntaxfor 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 looklike 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 withJohn Resig’s supervision and incite. Working together. Returning a seperate APIhas 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 tothe 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();
        });

    좋은 웹페이지 즐겨찾기