zoukankan      html  css  js  c++  java
  • 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:

    1. The syntax is unique to jQuery UI and people outside the UI community are not accustomed to it
    2. 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);
    3. 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();
        });
  • 相关阅读:
    The control collection cannot be modified during DataBind, Init, Load, PreRender or Unload phases.
    线程安全思考
    微服务网关哪家强?一文看懂Zuul, Nginx, Spring Cloud, Linkerd性能差异
    从构建分布式秒杀系统聊聊分布式锁
    基于Redis实现延时队列服务
    Redis分布式锁的正确实现方式
    探究 Redis 4 的 stream 类型
    JAVA 异常分类与理解
    缓存穿透,缓存击穿,缓存雪崩解决方案分析
    分布式之数据库和缓存双写一致性方案解析(一)
  • 原文地址:https://www.cnblogs.com/sanshi/p/1510376.html
Copyright © 2011-2022 走看看