路由

路由

Tui Framework 页面为局部渲染,除了主页面index.html是完整的html之外,其他页面均是div块级,当请求新页面,自动渲染到index.html中。 这意味着我们如果想混合开发app应用,我们也可以把所写的app html代码全部放在服务器端,只要在app首页执行跳转即可。如果想打包到手机中使用, 服务器端需要开启跨域权限。 Tui Framework的路由也与传统的路由不同,不需要过多复杂的配置,只需要在标签中定义需要跳转的href地址,添加.route类,就可以实现。例如:

    <a href="message.html?id=1" class="link_item route">消息</a>

这时点击a就会跳转到message.html页面。

方法

1.下一页:在标签中增加.route的css类,href属性为下一页地址,当点击该a标签时实现跳转到下一页。

    <a href="message.html?id=1" class="link_item route">消息</a>

如果我们把html文件打包到手机中,通常情况,我们会需要向跳转的页面传值提供两种传值方式: 1.通过在href中的message.html?id=1网址传值 2.也提供标签属性params只需要给params属性中设置需要传送的值即可,params权重比url高,可覆盖url中传值。

    <a href="order.html" params='{order_id: 15}' class="link_item route">订单详情</a>

这样我们就可以在order订单详情页,通过request获取order_id的值。 order.html

    <script>
        var order_id = request.order_id;  //获取order_id
    </script>

2.自定义下一页:除了含有.route类的a标签外,还提供自定义下一页方法:

    t.toNextPage(url, data);      //参数url为下一页的地址,data为需要传递的数据,获取数据方法同上。

3.返回上一页: 3.1 在标签中添加.back的css类,url属性为上一页地址,当点击该a标签时实现返回上一页。

    <div class="left">
        <a href="index.html" class="back link">
            <i class="icon icon-back" style="transform: translate3d(0px, 0px, 0px);"></i>
        </a>
    </div>

3.2 除了自定义的返回地址之外,框架还提供自动返回功能。只需要去除href或者设置成”“即可实现自动返回上一页,并且携带当时传递参数的功能。

    <div class="left">
        <a class="back link">
            <i class="icon icon-back" style="transform: translate3d(0px, 0px, 0px);"></i>
        </a>
    </div>

4.自定义上一页:除了含有.back类的a标签外,还提供自定义上一页方法:

    t.toPrePage(url, data);      //参数url为上一页的地址,data为需要传递的数据,获取数据方法同上。

事件

标签中局部事件实例

    <a href="order.html" params='{order_id: 15}' onJump="setval" class="link_item route">订单详情</a>
    <script>
        //配置onJump触发事件
        function setval(){
            ...
        }
    </script>

js中局部事件实例

    t.onBack = function(){
        //处理返回前事件
    }
    t.onJump = function(){
        //处理下一页返回事件
    }

局部事件说明

事件名称 事件对象 事件描述
onJump .route .back 此为标签中使用,当页面跳转前触发,为路由标签使用,此事件为局部事件,不可在全局事件中使用。
onBack t 当页面返回上一页前触发,此事件为局部事件,不可在全局事件中使用。
onJump t 当页面跳转下一页前触发,此事件为局部事件,不可在全局事件中使用。

添加全局事件实例:

    t.eventAdd(action, onevent); //增加全局事件,事件对象为`.page`。参数action为事件名称,onevnet为事件委托。

全局事件说明

事件名称 事件对象 事件描述
beforePre .page 返回上一页之前触发。
afterPre .page 返回上一页完成之后触发。
beforeNext .page 跳转到下一页之前触发。
afterNext .page 跳转到下一页完成之后触发。
load .page 页面加载完成之后触发

快速开始

页面布局

Tui Framework本着简单易用敏捷高效为原则设计。页面之间通过局部渲染完成页面切换。 这意味着我们如果想混合开发app应用,我们也可以把所写的app html代码全部放在服务器端,只要在app首页执行跳转即可。 ui布局也同样简单,只需要简单的组合就可以呈现app样式,让开发人员可把精力都放在业务逻辑上面。 app布局,首先创建index.html文件为默认文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>Tui Framework</title>
    <script type="application/javascript" src="js/jquery-1.12.0.js"></script>
    <script type="application/javascript" src="js/tui.js"></script>
    <link rel="stylesheet" href="css/tui.css">
    <link href="css/ionicons.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- view -->
<div class="view">
    <!-- 页面 -->
    <div style="" class="page">
        <!-- 当前页面,class为current的 -->
        <div class="current">
            <!-- app头部 -->
            <div class="nav">
                <div class="left"></div>
                <div class="center" style="left: -6.5px;">Tui FrameWork</div>
                <div class="right"></div>
            </div>
            <!-- app内容部分 -->
            <div class="content">
                <div class="head-pull"></div>
                <div class="page-content">
                    <ul>
                        <li><a href="message.html" class="link_item route">
                            <div class="item">
                                <!--<div class="item_left"></div>-->
                                <div class="item_center item_icon_right">
                                    <div class="item-content">聊天</div>
                                    <!--<div class="item_after"></div>-->
                                </div>
                            </div>
                        </a></li>
                        <li><a href="regist.html" class="link_item route">
                            <div class="item">
                                <!--<div class="item_left"></div>-->
                                <div class="item_center item_icon_right">
                                    <div class="item-content">注册</div>
                                    <!--<div class="item_after"></div>-->
                                </div>
                            </div>
                        </a></li>
                        <li><a href="login.html" class="link_item route">
                            <div class="item">
                                <!--<div class="item_left"></div>-->
                                <div class="item_center item_icon_right">
                                    <div class="item-content">登陆</div>
                                    <!--<div class="item_after"></div>-->
                                </div>
                            </div>
                        </a></li>
                    </ul>
                </div>
                <div class="page-content-bottom"></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

头部

app头部div:<div class="nav"> ... </div>。里面分为三块,左右中,左和右分别是放置icon按钮,中间为app标题。 <div class="left"></div>左边、<div class="center" style="left: -6.5px;">Tui FrameWork</div>中间标题、<div class="right"></div>右边。 中间标题位置可以通过left或者translate3d来设置。

内容

app内容div:<div class="content"> ... </div>,其中里面的.page-content是放置具体内容的。

页面布局

页面布局

页面布局结构 .view -> .page -> .current.current中分为.nva头部导航栏、.content中间内容、.toolbar底部工具栏。

<div class="view">
    <div style="" class="page">
        <div class="current">
            <!-- 顶部导航栏 -->
            <div class="nav">
                <div class="left">
                    <a href="javascript:;" class="back link">
                        <i class="icon icon-back"></i><span>back</span>
                    </a>
                </div>
                <div class="center" style="left: -6.5px; transform: translate3d(0px, 0px, 0px);">Tui FrameWork</div>
                <div class="right">
                    <a href="javascript:;" class="menu_left"><i class="icon icon-bars"></i></a>
                </div>
            </div>
            <!-- 中间内容 -->
            <div class="content">
                <div class="head-pull"></div>
                <div class="page-content">
                    <!-- 具体页面内容,ui组件 -->
                </div>
                <div class="page-content-bottom"></div>
            </div>
            <!-- 底部工具栏 -->
            <div class="toolbar">
                <a class="tab-link tab-link-active" href="#tab1">
                    <i class="icon ion-home"></i>
                    <span class="">test</span>
                </a>
                <a class="tab-link" href="#tab2">
                    <i class="icon ion-home">
                        <span class="badge bg_red">5</span>
                    </i>
                    <span class="">test</span>
                </a>
                <a class="tab-link" href="#tab3">
                    <i class="icon ion-home"></i>
                    <span class="">test</span>
                </a>
                <a class="tab-link" href="#tab4">
                    <i class="icon ion-home"></i>
                    <span class="">test</span>
                </a>
            </div>
        </div>
    </div>
</div>

头部导航栏

    <div class="nav">
        <div class="left">
            <a href="" class="back link">
                <i class="icon icon-back"></i><span>back</span>
            </a>
        </div>
        <div class="center" style="left: -6.5px; transform: translate3d(0px, 0px, 0px);">Tui FrameWork</div>
        <div class="right">
            <a href="javascript:;" class="menu_left"><i class="icon icon-bars"></i></a>
        </div>
    </div>

app头部div:<div class="nav"> ... </div>。里面分为三块,左右中,左和右分别是放置icon按钮,中间为app标题。 <div class="left"></div>左边、<div class="center" style="left: -6.5px; transform: translate3d(0px, 0px, 0px);">Tui FrameWork</div>中间标题、<div class="right"></div>右边。 中间标题位置可以通过left或者translate3d来设置。

中间内容

    <div class="content">
        <div class="head-pull"></div>
        <div class="page-content">
            <!-- 具体页面内容,ui组件 -->
        </div>
        <div class="page-content-bottom"></div>
    </div>

app内容div:<div class="content"> ... </div>,其中里面的.page-content是放置具体内容的。

底部工具栏

    <div class="toolbar">
        <a class="tab-link tab-link-active" href="#tab1">
            <i class="icon ion-home"></i>
            <span class="">test</span>
        </a>
        <a class="tab-link" href="#tab2">
            <i class="icon ion-home">
                <span class="badge bg_red">5</span>
            </i>
            <span class="">test</span>
        </a>
        <a class="tab-link" href="#tab3">
            <i class="icon ion-home"></i>
            <span class="">test</span>
        </a>
        <a class="tab-link" href="#tab4">
            <i class="icon ion-home"></i>
            <span class="">test</span>
        </a>
    </div>

底部工具栏div:<div class="toolbar"> ... </div>