zoukankan      html  css  js  c++  java
  • JS自定义事件之选项卡

    自定义事件是一种处理与DOM产生交互的代码逻辑片段之间耦合的很好的架构方法。

    一个简单的jQuery插件——选项卡

    让ul列表来响应点击事件。当用户点击一个列表项时,给这个列表项添加一个名为active的类,同时将其他列表项中的active类移除:

    <ul id="tabs">
        <li data-tab="users">users</li>
        <li data-tab="groups">groups</li>
    </ul>
    <div id="tabsContent">
        <div data-tab="users">uuuuuuuuuu</div>
        <div data-tab="groups">ggggggggg</div>
    </div>

    一般处理方式

    jQuery.fn.tabs = function(control) {
        var $tabs = $(this),
            $control = $(control);
    
        $tabs.find('li').click(function() {
            // 从列表项中删除和添加active类
            $tabs.find('li').removeClass('active');
            this.className = 'active';
    
            // 对应内容的显示
            var tabName = $(this).attr('data-tab');
            $control.find('[data-tab]').hide();
            $control.find('[data-tab="' + tabName +'"]').show();
        });
        
        // 初始化状态
        $tabs.find('li:first').addClass('active');                // 选中选项卡
        $control.find('>[data-tab]').hide().first().show();        // 只显示第一个div
    
        return this;
    };

    现在看上去插件没有什么问题。但可以做下列优化:我们给所有的列表项都添加了click事件回调,可以用事件委托来优化它;点击事件回调的实现很臃肿,很难一眼看出发生了什么;最后,如果另一个开发者想要扩展这个插件,他很可能会将其重写。

    优化后的代码

    使用自定义事件让代码变得更加整洁。

    在点击选项卡时触发一个change.tabs事件,并绑定若干回调方法来适当修改active类。

    // 自定义事件tabs.change
    // 缓存选项卡元素,减少DOM直接查找
    jQuery.fn.tabs2 = function(control) {
        var $tabs = $(this),
            $control = $(control),
            $lis = $tabs.find('li');
    
        // 利用事件委托,监听单击选项卡事件
        $tabs.on('li', 'click', function() {
            // 单击的选项卡的data-tab属性值
            // var tabName = $(this).attr('data-tab');
            var tabName = this.getAttribute('data-tab');        // 自定义属性需要用getAttribute()获取
            // 在单击时触发自定义事件
            $tabs.trigger('change.tabs', tabName);
        });
    
        // 绑定自定义事件
        // 解耦回调函数,易扩展
        $tabs.bind('change.tabs', function(e, tabName) {
            $lis.removeClass('active').filter('[data-tab="'+ tabName +'"]').addClass('active');
        });
    
        $tabs.bind('tabs.change', function(e, tabName) {
            $control.find('>[data-tab]').hide();
            $control.find('>[data-tab="'+ tabName +'"]').show();
        });
    
        // 初始化状态
        var firstName = $lis.first().attr('data-tab');
        $tabs.trigger('tabs.change', firstName);
    
        return this;
    };
  • 相关阅读:
    python验证码识别——前处理
    因为应用程序正在发送一个输入同步呼叫,所以无法执行传出的呼叫 解决方法
    Basic Authentication Authentication with Python(翻译草稿)
    闭包初探
    为朋友写的一个投票功能的提交代码
    Ulipad中Script的编写
    SharePoint 2010 Error occurred in deployment step 'Activate Features': Feature Id 解决方法
    SharePoint 2010 传入电子邮件
    SharePoint2010 InfoPath2010 该表单无法显示 Server State Service配置不当 解决方法
    SharePoint 2010 客户端不支持使用windows资源管理器打开此列表 解决方法
  • 原文地址:https://www.cnblogs.com/mackxu/p/custom-event.html
Copyright © 2011-2022 走看看