JavaScript练习二之Tabs

 1、通过参数配置可以控制Tabs的指定点击元素，事件，样式，动画等。
      

 var option = {
             navNavPrt        : '.j-tab-nav',  // 导航栏区域
             navContPrt      : '.j-tab-con',  // 内容区域
             navNavIdv        : 'a',         // 导航栏触发元素
             navContIdv      : 'div',     // 内容触发元素
             navTrigkEvt     : 'click',      // 点击触发事件
             auto         : false,      // 是否开启自动动画
             period         : 3000,      // 周期
             animate        : false,      // 是否开启动画
             animateTime     : 1000          // 动画执行事件
         }
         $('#tab').gTabs(options);

 感悟：
 1、在追加动画的时候，由于不知名原因，原型和fadeIn产生了冲突，一开始以为是fadeIn错误，后来发了很大力气才查出来，其实是在原型导致，
 即便原型追加的是空函数。后来将原型改为func形式即可。
 
 2、此次demo做了一个较为完整的demo，一共做了四个，参数配置也比之前全且细很多，不过做完之后，似乎感觉应用起来还是有点不太好，有种想法想推倒重做。

 

JS代码清单 ：
 // @charset "utf-8";
 /**
 * @function : 标签Tabs(练习)
 * @author   : yinggaozhen
 * @create   : 2015-11-09
 * @version  : 0.0.0
 * @example  :
              var options = {
                  navTrigkEvt     : 'click',
                  auto             :  true,
                  period             :  2000,
                  animate            : 'fadein'
             }
             $('#demo').gTabs(options);
  */
  (function($, undefined) {
 
      function isExsitDom(o) {
         return o.length > 0 ? true : false;
      }    
 
      function findNodes(o, c) {
          if (c.length <= 0) return new Object();
          return o.children(c);
      }
 
      var gTabs             = 'gTabs',
          curIndexSuffix     = 'curIndex',
          curNavClass     = 'current',
          defaultPeriod   = 10000;
 
      $.fn[gTabs] = function(options) {
          var me = this;
          
          if (!isExsitDom(me)) return;
          return me.each(function() {
              new gTabs(me, options);
          });
      }
 
      var gTabs = function(element, options) {
          var me = this;
 
          me.options = $.extend({}, me.defaultOption, options);
          me.$el = element;
          me.$navPrt = me.$el.find(me.options.navNavPrt);
          me.$conPrt = me.$el.find(me.options.navContPrt);
          me.init();
      }
 
      gTabs.prototype = {
          init : function() {
              var me = this,
                  navIdvs = me.options.navNavIdv || '',
                  conIdvs = me.options.navContIdv || '';
 
             me.$navIdvs = me.$navPrt.find(navIdvs);
             me.$conIdvs = me.$conPrt.find(conIdvs);
              if (!isExsitDom(me.$navIdvs) || !isExsitDom(me.$conIdvs)) return;
 
              me.$el.data(curIndexSuffix, 0);
              me.$el.conWidth = me.$conIdvs.width() || 0;
              me.changePrt(me.$el.data(curIndexSuffix));
 
              me.bindChoseTabsEvt();
              if (me.options.auto) me.autoRunner();
          },
          bindChoseTabsEvt : function() {
              var me = this,
                  strikeEvt = me.options.navTrigkEvt || 'click';
 
              me.$navIdvs.bind(strikeEvt, function() {
                  var curIndex = $(this).index() || 0;
                  me.changePrt(curIndex);
              })
          },
          autoRunner : function() {
              var me = this,
                  period = me.options.period || defaultPeriod;
 
              return setInterval(function() {
                  var navLng = me.$navIdvs.length || 1,
                      curIdx = (me.$el.data(curIndexSuffix) + 1) % navLng;
 
                  me.changePrt(curIdx);
              }, period)
          },
          changePrt : function(index) {
              var me = this,
                  index = index || 0,
                  animate = animate || me.options.animate;
 
              me.$el.data(curIndexSuffix, index);
              me.$navIdvs.eq(index).addClass(curNavClass).siblings().removeClass(curNavClass);
              switch(animate) {
                  case 'fadein' :
                      me.$conIdvs.hide().eq(index).fadeIn();
                      break;
                  case 'left' :
                      var evyWidth = me.$el.conWidth,
                          offestWidth = me.$el.data(curIndexSuffix) * -evyWidth;
 
                      me.$conPrt.css({position:'absolute', width:99999});
                      me.$conIdvs.css({float:'left',display:'block'})
                                 .end().stop()
                                 .animate({left : offestWidth}, me.options.animateTime);
                      break;
                  default :
                      me.$conIdvs.hide().eq(index).show();
                      break;
              }
              
          }
      }
 
      gTabs.prototype.defaultOption = {
          navNavPrt        : '.j-tab-nav',  // 导航栏区域
          navContPrt      : '.j-tab-con',  // 内容区域
          navNavIdv        : 'a',             // 导航栏触发元素
          navContIdv      : 'div',         // 内容触发元素
          navTrigkEvt     : 'click',          // 点击触发事件
          auto             : false,          // 是否开启自动动画
          period             : 3000,          // 周期
          animate            : false,          // 是否开启动画
          animateTime     : 1000              // 动画执行事件
      }
 
  })(jQuery);