API Docs for: 0.2
Show:

JC.NSlider Class

组件用途简述

require: JC.BaseMVC

JC Project Site | API docs | demo link

可用的 html attribute

slidersubitems = selector
指定具体子元素是那些,支持JC的选择器扩展
sliderdirection = String default = 'horizontal'
滚动的方向, 默认 horizontal, { horizontal, vertical }
sliderloop = boolean default = false
是否循环滚动
sliderautomove = boolean default = false
是否自动滚动
sliderprev = selector
后( 左 | 上 )移的触发元素selector, 控制slider向后( 左 | 上 )滚动
slidernext = selector
前( 右 | 下 )移的触发元素selector, 控制slider向前( 右 | 下 )滚动
sliderhowmanyitem = int default = 1
每次滚动多少个子元素, 默认1
sliderstepms = int default = 10
滚动效果运动的间隔时间(毫秒), 默认 10ms
sliderdurationms = int default = 300
滚动效果的总时间(毫秒), 默认 300ms
sliderautomovems = int default = 2000
自动滚动的间隔(毫秒), 默认 2000ms

Constructor

JC.NSlider

(
  • _selector
)

Parameters:

Example:

   <link href='../../Slider/res/hslider/style.css' rel='stylesheet' />
   <script src="../../../lib.js"></script>
   <script src="../../../config.js"></script>
   <script>
       JC.debug = true;
       requirejs( [ 'JC.NSlider' ] );
   </script>
   <table class="hslide_wra" style="margin: 0 auto;">
       <tr>
           <td class="hslide_left">
               <a href="javascript:" hidefocus="true" style="outline:none;" class="js_slideleft">左边滚动</a>
           </td>
           <td class="hslide_mid">
               <dl 
                   style="width:360px; height: 230px; margin:0 5px;"
                   class="hslide_list hslide_list2 clearfix js_slideList js_NSlider" 
                   slidersubitems="/dd"
                   slidernav="single" slidernavtype="icon"
                   sliderprev="(table a.js_slideleft" 
                   slidernext="(table a.js_slideright" 
                   sliderdirection="horizontal" sliderhowmanyitem="1" 
                   sliderinitedcb="sliderinitedcb"
                   sliderloop="true" sliderdurationms="300"
                   sliderautomove="true" sliderautomovems="2500"
                   >
                   <dd class="tipsItem">
                   <a href="http://v.ku6.com/film/index_106123.html?from=my" target="_blank"> 
                       <span class="pc">
                           <img alt="minions" src="data/images/minions.jpg" title="minions0"> 
                       </span>
                   </a>
                   </dd>
                   <dd class="tipsItem">
                   <a href="http://v.ku6.com/film/index_106123.html?from=my" target="_blank"> 
                       <span class="pc">
                           <img alt="minions" src="data/images/minions.jpg" title="minions1"> 
                       </span>
                   </a>
                   </dd>
                   <dd class="tipsItem">
                   <a href="http://v.ku6.com/film/index_106123.html?from=my" target="_blank"> 
                       <span class="pc">
                           <img alt="minions" src="data/images/minions.jpg" title="minions2"> 
                       </span>
                   </a>
                   </dd>
                   <dd class="tipsItem">
                   <a href="http://v.ku6.com/film/index_106123.html?from=my" target="_blank"> 
                       <span class="pc">
                           <img alt="minions" src="data/images/minions.jpg" title="minions3"> 
                       </span>
                   </a>
                   </dd>
                   <dd class="tipsItem">
                   <a href="http://v.ku6.com/film/index_106123.html?from=my" target="_blank"> 
                      <span class="pc">
                           <img alt="minions" src="data/images/minions.jpg" title="minions4"> 
                       </span>
                   </a>
                   </dd>
                   <dd class="tipsItem">
                   <a href="http://v.ku6.com/film/index_106123.html?from=my" target="_blank"> 
                       <span class="pc">
                           <img alt="minions" src="data/images/minions.jpg" title="minions5"> 
                       </span>
                   </a>
                   </dd>
                   <dd class="tipsItem">
                   <a href="http://v.ku6.com/film/index_106123.html?from=my" target="_blank"> 
                       <span class="pc">
                           <img alt="minions" src="data/images/minions.jpg" title="minions6"> 
                       </span>
                   </a>
                   </dd>
                   <dd class="tipsItem">
                   <a href="http://v.ku6.com/film/index_106123.html?from=my" target="_blank"> 
                       <span class="pc">
                           <img alt="minions" src="data/images/minions.jpg" title="minions7"> 
                       </span>
                   </a>
                   </dd>
               </dl>
           </td>
           <td class="hslide_right">
               <a href="javascript:" hidefocus="true" style="outline:none;" class="js_slideright">右边滚动</a>
           </td>
       </tr>
   </table>

Methods

_beforeInit

() private

初始化之前调用的方法

_init

(
  • _selector
)
private

内部初始化方法

Parameters:

  • _selector Selector

_inited

() private

内部初始化完毕时, 调用的方法

_initHanlderEvent

() private

内部事件初始化方法

notification

(
  • _evtName
  • _args
)

通知选择器有新事件
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

notificationHandler

(
  • _evtName
  • _args
)

通知选择器有新事件, 有返回结果
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

Returns:

:

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

BaseMVCInstance

selector

()

获取 显示 BaseMVC 的触发源选择器, 比如 a 标签

Returns:

selector

subitems

()

获取划动的所有项

Returns:

selector

subitems

()

获取划动的所有项

Returns:

selector

trigger

(
  • _evtName
  • _args
)

使用 jquery trigger 触发绑定事件

Parameters:

Returns:

BaseMVCInstance

triggerHandler

(
  • _evtName
  • _args
)

使用 jquery triggerHandler 触发绑定事件

Parameters:

Returns:

:

Events

afterMove

JC.NSlider 在滚动后 selector 触发的事件

Event Payload:

  • _evt Event
  • _target Target
  • _coverIns CoverInstance

Example:

   $( document ).delegate( ".nslider_callback", "afterMove", function( _evt, _target, _coverIns ) {
       JC.log( 'slider afterMove' );
   } );
   

afterMove

JC.NSlider 在滚动后 selector 触发的事件

Event Payload:

  • _evt Event
  • _target Target
  • _coverIns CoverInstance

Example:

   $( document ).delegate( ".nslider_callback", "afterMove", function( _evt, _target, _coverIns ) {
       JC.log( 'slider afterMove' );
   } );
   

beforeMove

JC.NSlider 在滚动前 selector 触发的事件

Event Payload:

  • _evt Event
  • _target Target
  • _coverIns CoverInstance

Example:

   $( document ).delegate( ".nslider_callback", "beforeMove", function( _evt, _target, _coverIns ) {
       JC.log( 'slider beforeMove' );
   } );
   

beforeMove

JC.NSlider 在滚动前 selector 触发的事件

Event Payload:

  • _evt Event
  • _target Target
  • _coverIns CoverInstance

Example:

   $( document ).delegate( ".nslider_callback", "beforeMove", function( _evt, _target, _coverIns ) {
       JC.log( 'slider beforeMove' );
   } );
   

slidNext

JC.NSlider 点击向后滚动按钮后 selector 触发的事件

Event Payload:

  • _evt Event
  • _target Target
  • _coverIns CoverInstance

Example:

   $( document ).delegate( ".nslider_callback", "slidNext", function( _evt, _target, _coverIns ) {
       JC.log( 'slider slidNext' );
   } );
   

slidNext

JC.NSlider 点击向后滚动按钮后 selector 触发的事件

Event Payload:

  • _evt Event
  • _target Target
  • _coverIns CoverInstance

Example:

   $( document ).delegate( ".nslider_callback", "slidNext", function( _evt, _target, _coverIns ) {
       JC.log( 'slider slidNext' );
   } );
   

slidPrev

JC.NSlider 点击向前滚动按钮后 selector 触发的事件

Event Payload:

  • _evt Event
  • _target Target
  • _coverIns CoverInstance

Example:

   $( document ).delegate( ".nslider_callback", "slidPrev", function( _evt, _target, _coverIns ) {
       JC.log( 'slider slidPrev' );
   } );
   

slidPrev

JC.NSlider 点击向前滚动按钮后 selector 触发的事件

Event Payload:

  • _evt Event
  • _target Target
  • _coverIns CoverInstance

Example:

   $( document ).delegate( ".nslider_callback", "slidPrev", function( _evt, _target, _coverIns ) {
       JC.log( 'slider slidPrev' );
   } );