/*==============================================

 * jQuery交互组件 Version 1.0 

 * Copyright 2016 xb, Inc. Author WANGHAO 

 * Licensed under the MIT license

 */



if (typeof jQuery === 'undefined') {

  throw new Error('需要添加jQuery!')

}

/*==============================================

 * jQuery列表交互组件 

 * Copyright 2016 xb, Inc. Author WANGHAO 

 */

+(function($,window, document, undefined) {

  //构造

  var _Interaction = function(element, options){



    var _self = this;

    

    var options =  $.extend({},_Interaction.DEFAULTS, options);

    var trigger = options.trigger;

    var effect;

    var $interactionObj = $('div[role="datalist"]');



    $interactionObj.each(function(index){



      effect = $(this).attr('effect');//效果类型

      if(effect =='' || effect =='undefined') effect = options.effect;

      //alert(effect)

      var thisObj = $(this);



      switch(effect)

      {

      case 'fade':

        _self.fade(thisObj,trigger,effect);



        break;

      case 'move':

        _self.move(thisObj,trigger,effect);

       

        break;

      default:

        //n 与 case 1 和 case 2 不同时执行的代码

      }

      

      })



  }



 //配置 

  _Interaction.DEFAULTS = {

    trigger : 'mouseover',//事件类型

    effect : 'fade'

  };



  //交互扩展

  _Interaction.prototype={

    

    fade:function(iaObj,trigger,effect){

      if(trigger == 'mouseover'){



        iaObj.find('.list-item').on(trigger,function(){

            $(this).find('.hover-box').stop().fadeIn(300);

            $(this).addClass('active');

          })



        iaObj.find('.list-item').on('mouseout',function(){

          $(this).find('.hover-box').stop().fadeOut(300);

          $(this).removeClass('active');

        })

      }

    },

    move:function(iaObj,trigger,effect){



      if(trigger == 'mouseover'){

        

      }

      //sliphover 特效

      iaObj.sliphover({

          target:'img'

          // backgroundColorAttr: 'data-background'

      });



    }  

  }



  //注册到全局

  $(window).on('load', function () {

     window._Interaction = new _Interaction();

  })

  

})(jQuery,window, document);

/*==============================================

 * jQuery导航交互组件 

 * Copyright 2016 xb, Inc. Author WANGHAO 

 */

+(function($,window, document, undefined) {

  

    var _Nav = function(element,options){

    var _self = this;

    var options =  $.extend({},_Nav.DEFAULTS, options);//获取配置

    //var $_Nav =  $(element);

    var thisObj = $(this);

    var trigger = options.trigger;

    var $_Nav = $('ul[role="navigation"]');

    //遍历导航，添加特效

    $_Nav.each(function(index){

      var effect = $(this).attr('effect'); //获取特效类型

      if(effect == '' || effect == 'undefined' ) effect = options.effect;

      var thisObj = $(this);

      //根据特效类型 调用不同js函数

      switch(effect)

      {

      case 'slideDown':

        _self.slideDown(thisObj,trigger,effect);

        

        break;

      case 'moveDown':



        _self.moveDown(thisObj,trigger,effect);

        

        break;

      default:

      }



    })

    



  }

  //配置

  _Nav.DEFAULTS = {

    trigger:'mouseover',//鼠标事件

    effect:'slideDown'//特效类型

  } 

  //扩展交互效果

  _Nav.prototype = {

    slideDown:function(iaObj,trigger,effect){

      iaObj.find('>li').hover(function(){

        //鼠标来临

        $(this).addClass("on");

        $(this).find("ul").stop(true,true).slideDown(300);

        },

        function(){

          //鼠标离去

          $(this).find("ul").stop(true,true).slideUp(300);

          $(this).removeClass("on");       

        }

      )

    },

    moveDown:function(iaObj,trigger,effect){

      //封装移动下拉特效

      var moveDowneffect = function(){

         

         this.$aline = iaObj.find("#aline");//导航下划线

         if (this.$aline.length<1) iaObj.append('<span id="aline"></span>'); //创建一个下划线

         this.posCurrent = 0;      //初始化焦点li坐标

        if(iaObj.find("li.current").length>0){

          

           posCurrent = iaObj.find("li.current").position().left;

           

        }else{

          

          $aline.hide();

          

        }

        //绑定hover事件

        iaObj.find('> li').hover(function(){

          //鼠标来临

          var pos = $(this).position().left;//当前列坐标

          var $currentW = $(this).width(); //当前列宽

          var $currentMl = $(this).css("margin-left");

              $currentMl =  parseInt($currentMl);

          $currentW = $currentW/3; //设置aline width

          $(this).parent().find("#aline").stop().animate({left:pos+$currentW+$currentMl},300);



          $(this).addClass("on");

          $(this).find("ul").stop(true,true).slideDown(300);

          },

          function(){

            //鼠标离去

            var pos = $(this).position().left;//当前坐标

              if($(this).parent().find("li.current").length){

                posCurrent = $(this).parent().find("li.current").position().left;//焦点的左坐标

                

                var $currentW =  $(this).parent().find("li.current").width(); //焦点的列宽

                var $currentMl = $(this).parent().find("li.current").css("margin-left"); //焦点的margin-left

                  $currentMl =  parseInt($currentMl);

                  $currentW =  $currentW/3;

                

              }else {

                

                posCurrent =0;

                var $currentW=0;

                var $currentMl=0;

              

              };

              

            //子菜单延时执行 解决bug

            $(this).find("ul").delay(300).queue(function(){

              $(this).hide();

            })

            //

            $(this).parent().find("#aline").stop().animate({left:posCurrent + $currentW + $currentMl},300);

            $(this).removeClass("on");

            

          }

        )

        this.init();//初始化

      }

      //初始化

      moveDowneffect.prototype.init = function(){

        //初始化导航

        if(iaObj.find(">li.current").length>0){

          

          var $awidth = iaObj.find("li.current").width(); //得到菜单列宽

          var $aheight = iaObj.find(">li").eq(0).height();

          var posCurrent2 =  iaObj.find("li.current").position().left;

          var $currentMl = iaObj.find("li.current").css("margin-left");  //当前marginleft

              $currentMl =  parseInt($currentMl);

              $awidth = $awidth/3;  

          this.$aline.stop().animate({"width":$awidth,"bottom":"0","left":(posCurrent2+$awidth+$currentMl)},300)//初始化

        }



      }



      return new moveDowneffect();

  

    }

  }



  $(window).on('load', function () {

     window._Nav = new _Nav('#nav');

  })

  

})(jQuery,window, document);





























