内部切换
在 Mobilebone 框架体系下,页面间的过场切换效果可以复用在局部区域以便实现内部切换效果。
语法
需要用到两个 HTML 属性进行设置:
data-container
设置局部过场切换的容器元素;data-classpage
设置局部过场内容公用的类名;
案例
例如,下面这个选项卡效果:
其HTML代码结构如下:
<div id="tabX" class="tab-x"> <div class="tabview"> <a href="#tab1" data-container="tabX" data-classpage="tab" class="active">妹子1</a> <a href="#tab2" data-container="tabX" data-classpage="tab">妹子2</a> <a href="#tab3" data-container="tabX" data-classpage="tab">妹子3</a> </div> <div id="tab1" class="tab in" data-callback="tabButtonActive"> <img src="mm1.jpg"> </div> <div id="tab2" class="tab out" data-callback="tabButtonActive"> <img src="mm2.jpg"> </div> <div id="tab3" class="tab out" data-callback="tabButtonActive"> <img src="mm3.jpg"> </div> </div>
必要的CSS代码:
.tab.out { display: none; }
下面的 JavaScript 代码与切换效果本身无关,主要是同步按钮选中态效果:
tabButtonActive = function(pagein, pageout, options) { var target = options.target; var eleAcive = target.parentElement.querySelector('.active'); if (eleAcive) eleAcive.classList.remove('active'); target.classList.add('active'); };
局部过场切换效果是不会触发 history
变化的,也不会改变页面的title
标题,其他规则跟主页面元素的过场切换一致,例如各种生命周期事件函数的使用等。
发现错误?想参与编辑?在 GitHub 上编辑此页!