zoukankan      html  css  js  c++  java
  • jQuery tab plugin

    /*
    www.keleyi.com/
    */
    ; (function ($) {
        $.fn.extend({
            Tabs: function (options) {
                // 处理参数
                options = $.extend({
                    event: 'mouseover',
                    timeout: 0,
                    auto: 0,
                    callback: null
                }, options);
    
                var self = $(this),
                    tabBox = self.children('div.tab_box').children('div'),
                    menu = self.children('ul.tab_menu'),
                    items = menu.find('li'),
                    timer;
    
                var tabHandle = function (elem) {
                    elem.siblings('li').removeClass('current').end().addClass('current');
    
                    tabBox.siblings('div').addClass('hide').end().eq(elem.index()).removeClass('hide');
                },
    
                delay = function (elem, time) {
                    time ? setTimeout(function () { tabHandle(elem); }, time) : tabHandle(elem);
                },
    
                start = function () {
                    if (!options.auto) return;
                    timer = setInterval(autoRun, options.auto);
                },
    
                autoRun = function () {
                    var current = menu.find('li.current'),
                    firstItem = items.eq(0),
                    // li的长度
                    len = items.length,
    
                    // 当前元素的索引(0 +1)
                    index = current.index() + 1,
                   
                    // item 就是当前元素 li
                    item = index === len ? firstItem : current.next('li'),
    
                    // 当前元素的索引
                    i = index === len ? 0 : index;
                    current.removeClass('current');
                    item.addClass('current');
    
                    tabBox.siblings('div').addClass('hide').end().eq(i).removeClass('hide');
                    console.log(i);
                };
    
                //items.bind(options.event, function () {
                //    delay($(this), options.timeout);
                //    if (options.callback) {
                //        options.callback(self);
                //    }
                //});
    
                if (options.auto) {
                    start();
                    self.hover(function () {
                        clearInterval(timer);
                        timer = undefined;
                    }, function () {
                        start();
                    });
                }
    
                return this;
            }
        });
    })(jQuery);
    

      

  • 相关阅读:
    kubernetes 节点数据彻底清理脚本
    多es 集群数据迁移方案
    .Net Framework各版本微软技术支持及到期日期
    etcd raft 处理流程图系列3-wal的读写
    etcd raft 处理流程图系列2-transport
    etcd raft 处理流程图系列1-raftexample
    一种分布式预写日志系统
    自适应软件缓存管理
    require/import路径中的叹号是什么?
    理解原型链
  • 原文地址:https://www.cnblogs.com/zsongs/p/5277930.html
Copyright © 2011-2022 走看看