zoukankan      html  css  js  c++  java
  • jQuery自定义选项卡插件

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery自定义选项卡插件</title>
    <style>
    body, ul { padding:0; margin:0; }
    li { list-style:none; }
    #tabs { zoom:1; }
    #tab:after { content:""; display:block; clear:both; }
    #tabs li { float:left; padding:10px; color:#FF8900; background:#FFF; cursor:pointer; }
    #tabs .active { background:#FF8900; color:#FFF; }
    #tabContent { background:#FF8900; color:#FFF; padding:10px; clear:both; }
    #tabContent div { display:none; }
    #tabContent div.active { display:block; }
    </style>
    </head>
    
    <body>
    <ul id="tabs">
      <li data-tab="users">Users</li>
      <li data-tab="groups">Groups</li>
    </ul>
    
    <div id="tabContent">
      <div data-tab="users">Users Content</div>
      <div data-tab="groups">Groups Content</div>
    </div>
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    jQuery.fn.tabs = function (control) {
        var element = $(this);
        var control = $(control);
        
        element.delegate('li', 'click', function () {
            // 遍历选项卡名称
            var tabName = $(this).attr('data-tab');
            
            // 点击选项卡时触发自定义事件
            element.trigger('change.tabs', tabName);
        });
        
        // 绑定到自定义事件
        element.bind('change.tabs', function (ev, tabName) {
            element.find('li').removeClass('active');
            element.find('>[data-tab=' + tabName + ']').addClass('active');
        });
        
        element.bind('change.tabs', function (ev, tabName) {
            control.find('>[data-tab]').removeClass('active');
            control.find('>[data-tab=' + tabName + ']').addClass('active');
        });
        
        // 激活第 1 个选项卡
        var firstName = element.find('li:first').attr('data-tab');
        element.trigger('change.tabs', firstName);
        
        return this;
    };
    
    jQuery(function ($) {
        $('#tabs').tabs('#tabContent');
        
        $('#tab').bind('change.tabs', function (ev, tabName) {
            window.loaction.hash = tabName;
        });
        
        $(window).bind('hashchange', function () {
            var tabName = window.location.hash.slice(1);
            $('#tabs').trigger('change.tabs', tabName);
        });
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    多路复用与设置阻塞、非阻塞模式
    ['\xef\xbb\xbf这个什么含义? PY技术开发交流区 乐讯手机高手
    fcntl使用 and_tt 博客园
    Linux 设备驱动 Edition 3Linux设备驱动第三版(中文版)
    CRT source Google 搜索
    BOM–字节序标记 永不放弃的地盘 博客频道 CSDN.NET
    在C语言中,unsigned char是什么类型?_百度知道
    The JR Concurrent Programming Language
    C语言:为什么用fprintf(stderr,"Error");比printf("Error");更好?
    bash
  • 原文地址:https://www.cnblogs.com/baie/p/2985199.html
Copyright © 2011-2022 走看看