在前面的页面里讲了页面的常见操作,但是存在一些不方便的地方:
为了解决上面的问题,我对页面的常见操作进行了封装,支持一下功能:
注意:仅支持模块内部操作,跨模块的操作,请自己调用对应的API接口
为了实现这些快捷操作,需要引入对应的JS
<script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script> <script type="text/javascript" src="../assets/js/bui-min.js"></script> <script type="text/javascript" src="../assets/js/config-min.js"></script> <script type="text/javascript"> BUI.use('common/page'); </script>
其中config.js
和 use的模块common/page
请参看引入js方式
可以采用在html元素上配置 class 和 属性值来对应的操作:
page-action
表示一个操作。data-type
表示操作类型。默认是打开页面(open),有以下类型:
data-action
的值(默认类型)data-id
:页面的idtitle
:页面的titledata-href
:打开的链接data-mid
:打开的模块编号data-close
:(如果打开新页面时)是否关闭此页上面的这些实现,都是基于框架页API接口,只是提供了一种简单的实现方式。操作类型和,使用的变量想组合灵活使用。
打开页面的参数比较多,所以需要熟悉各个参数的含义。右边提供几个常用的示例。
<a class="page-action" href="#" data-id="main-menu">顶部导航</a> <a class="page-action" href="#" data-close="true" data-id="second-menu">二级菜单</a>
<a class="page-action" href="#" data-href="main/test.html" title="测试页面" data-id="test">测试页面</a> <a class="page-action" href="#" data-href="http://www.baidu.com" title="百度页面" data-id="baidu">百度页面</a>
刷新页面和关闭页面的写法都很简单,也非常类似,只需要:
page-action
close
或者reload
当页面直接跳转时,需要更改tab页的标题,需要:
page-action
setTitle
title
page-action
来识别。data-type
来识别,如果未定义,默认为打开页面。data-id
即可href
,在跳转前修改页面标题。