data-classPage (v2.3.0+)
内部过场(局部过场)效果的关键类名,性质等同于全局的Mobilebone.classPage
.
使用
此参数若想要生效,必须和data-container配合使用。
例如,下面这个选项卡效果:
其HTML代码结构如下:
<div id="tab_container" class="tab_container"> <div class="tabview"> <a href="#tab1" data-container="tab_container" data-classpage="tab" data-rel="auto" class="active">妹子1</a> <a href="#tab2" data-container="tab_container" data-classpage="tab" data-rel="auto">妹子2</a> <a href="#tab3" data-container="tab_container" data-classpage="tab" data-rel="auto">妹子3</a> </div> <div id="tab1" class="tab in" data-callback="tabButtonActive"> <img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg"> </div> <div id="tab2" class="tab out" data-callback="tabButtonActive"> <img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg"> </div> <div id="tab3" class="tab out" data-callback="tabButtonActive"> <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg"> </div> </div>
我们不需要额外的JS,就可以实现局部过场效果!当然,为了按钮选中态即时切换,我们需要回调简单处理下:
tabButtonActive = function(pagein) { var target = document.querySelectorAll(".tabview a")[pagein.id.replace(/\D/g, "") - 1]; var eleAcive = document.querySelector(".tabview .active"); if (eleAcive) eleAcive.classList.remove("active"); if (target) target.classList.add("active"); };
非page
页面的过场效果是不会触发history
变化的,其他规则跟主page
切换一致,包括各种回调接口的使用等等。