楼梯

jquery.anchormove.js

通过在html标签上添加属性，快速实现页签切换功能。可配置使用clip 隐藏面板，放置flash 和使某些插件能正常获取宽高。

用法

• 必须在楼梯元素上使用data-for关联对应的内容元素，如<li data-for="content1">楼梯一</li> => <div id="content1"></div>

• 默认情况下，声明data-for的楼梯会在激活时加入class钩子，使用data-anchor可以手动指定某个祖先元素添加钩子。

<ul>
  <li data-anchor class="active"><a data-for="#content1">content1</a></li>
  <li data-anchor><a data-for="#content2">content2</a></li>
  <li data-anchor><a data-for="#content3">content3</a></li>
  <li data-anchor><a data-for="#content4">content4</a></li>
</ul>

• 如果一个楼梯不是:visible的情况下，相应的内容元素会被隐藏。

在JS中

<div id="wrap" class="content">
  <div id="content1">
    内容一
    ...
  </div>
  <div id="content2">
    内容二
    ...
  </div>
</div>

<ul id="nav" class="nav">
  <li data-for="content1">楼梯一</li>
  <li data-for="content2" class="active">楼梯二</li>
</ul>

$('#nav').anchormove({
  clickOffset:60,
  floatOffset:200,
  activeClass:'active'  
})

在HTML中

使用[data-role="anchormove"]标记需要触发楼梯的元素。将配置参数用data-的形式定义在元素的属性上。如activeClass=> data-active-class

<div id="wrap" class="content">
  <div id="content1">
    内容一
    ...
  </div>
  <div id="content2">
    内容二
    ...
  </div>
</div>

<ul id="nav" data-role="anchormove" data-click-offset="60" data-float-offset="200" class="nav">
  <li data-for="content1">楼梯一</li>
  <li data-for="content2" class="active">楼梯二</li>
</ul>

配置

方法

.anchormove('move',[index:Int])

切换楼梯，传入整型，第一个楼梯的下标为0。

$('#nav').anchormove('move',2);

.anchormove('update')

重新初始化楼梯，用于动态增删楼梯之后。

$('#nav').anchormove('update');

事件

$('#nav').on('yw.am.active',function(e,index,id){
    console.log('第' + index + '项被触发，对应的content为' + id)
})