简介

在前面的页面里讲了页面的常见操作,但是存在一些不方便的地方:

  1. 需要直接调用框架页的接口,繁琐,重复工作量大
  2. 框架页不存在时,链接会失效
  3. 对框架使用者不友好

为了解决上面的问题,我对页面的常见操作进行了封装,支持一下功能:

  1. 打开页面
  2. 关闭页面
  3. 刷新页面
  4. 更新标题

注意:仅支持模块内部操作,跨模块的操作,请自己调用对应的API接口

需要引入的js

为了实现这些快捷操作,需要引入对应的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 和 属性值来对应的操作:

  1. 使用样式 page-action 表示一个操作。
  2. 使用伪类:data-type表示操作类型。默认是打开页面(open),有以下类型:
    1. open: 打开或者跳转到页面,如果未指data-action的值(默认类型)
    2. close:关闭页面。
    3. reload:刷新页面
    4. setTitle:设置title
  3. 使用的属性:具体的信息参考框架页API接口
    1. data-id:页面的id
    2. title:页面的title
    3. data-href:打开的链接
    4. data-mid:打开的模块编号
    5. 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>          
        

刷新和关闭页面

刷新页面和关闭页面的写法都很简单,也非常类似,只需要:

  1. 声明样式page-action
  2. 指定类型close或者reload

刷新页面

刷新页面的实现方式非常简单

刷新本页

<a class="page-action" data-type="reload" href="#">刷新本页</a>
        

关闭页面

关闭页面的实现方式跟刷新页面非常类似

关闭本页

<a class="page-action" data-type="close" href="#">关闭本页</a>
        

更改页面(tab)标题

当页面直接跳转时,需要更改tab页的标题,需要:

  1. 声明样式page-action
  2. 指定类型setTitle
  3. 指定title

本页跳转并修改标题

测试页面

<a class="page-action" data-type="setTitle" title="测试页面" href="test.html">测试页面</a>
        

注意:

  1. 页面操作通过样式page-action来识别。
  2. 操作类型通过data-type来识别,如果未定义,默认为打开页面。
  3. 刷新页面和关闭页面,也可以操作其他页面,指定data-id即可
  4. 重设页面标题,一般用于本页跳转,此时使用链接本身的 href,在跳转前修改页面标题。
  5. 更加复杂的操作,请使用框架页API接口直接操作页面