doT.js 模板使用

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>xxx</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link rel="stylesheet" href="css/mui.css">
        <style>
            html,
            body {
                background-color: #efeff4;
            }
            
            .mui-views,
            .mui-view,
            .mui-pages,
            .mui-page,
            .mui-page-content {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background-color: #efeff4;
            }
            
            .mui-pages {
                top: 46px;
                height: auto;
            }
            
            .mui-scroll-wrapper,
            .mui-scroll {
                background-color: #efeff4;
            }
            
            .mui-page.mui-transitioning {
                -webkit-transition: -webkit-transform 300ms ease;
                transition: transform 300ms ease;
            }
            
            .mui-page-left {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            
            .mui-page-shadow {
                position: absolute;
                right: 100%;
                top: 0;
                width: 16px;
                height: 100%;
                z-index: -1;
                content: '';
            }
            
            .mui-page-shadow {
                background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
                background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
            }
            
            .mui-navbar-inner.mui-transitioning,
            .mui-navbar-inner .mui-transitioning {
                -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
                transition: opacity 300ms ease, transform 300ms ease;
            }
            
            .mui-page {
                display: none;
            }
            
            .mui-pages .mui-page {
                display: block;
            }
            
            .mui-page .mui-table-view:first-child {
                margin-top: 15px;
            }
            
            .mui-page .mui-table-view:last-child {
                margin-bottom: 30px;
            }
            
            .mui-table-view {
                margin-top: 20px;
            }
            
            .mui-table-view span.mui-pull-right {
                color: #999;
            }
            
            .mui-table-view-divider {
                background-color: #efeff4;
                font-size: 14px;
            }
            
            .mui-table-view-divider:before,
            .mui-table-view-divider:after {
                height: 0;
            }
            
            .head {
                height: 40px;
            }
            
            #head {
                line-height: 40px;
            }
            
            .head-img {
                width: 40px;
                height: 40px;
            }
            
            #head-img1 {
                position: absolute;
                bottom: 10px;
                right: 40px;
                width: 40px;
                height: 40px;
            }
            /**列表样式**/
            /*1*/
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell.mui-col-xs-7.port {
                clear: both;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell.mui-col-xs-6.ship {
                clear: both;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell.mui-col-xs-5.shipdate {
                clear: both;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell.mui-col-xs-4.ship {
                clear: both;
            }
            /*2*/
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block.port-detail {
                float: left;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block.shipdate-content {
                float: left;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block.conta {
                float: left;
                padding-right: 10px;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block.ship {
                float: left;
            }
            /*3*/
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block .mui-ellipsis.mui-date {
                font-size: .688rem;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block p.mui-ellipsis.money {
                color: coral;
                font-weight: 700;
                font-size: 12px;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block p.portcode {
                font-size: .688rem;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block p.mui-ellipsis.loadingport {
                color: #0b83f6;
                font-weight: 700;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block p.mui-ellipsis.dischargeport {
                color: #0b83f6;
                font-weight: 700;
            }
            /*4*/
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block .mui-ellipsis label.date-title {
                display: inline-block;
                width: 45px;
                text-align: right;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block .mui-ellipsis label.ship-title {
                display: inline-block;
                width: 45px;
                text-align: right;
            }
            
            .mui-content .mui-table-view .mui-table-view-cell .mui-table .mui-table-cell .mui-block .mui-ellipsis span.date-content {
                text-align: left;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="css/feedback-page.css" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">xxx</h1>
        </header>
        <div class="mui-content">
            <ul id="list" class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                <!-- 下面是模板，一般推荐写在<head>里，我比较喜欢写在相对应的标签里 -->
                <script id="test_tmpl" type="text/x-dot-template">
                    {{? it && it.length > 0}} {{~ it :value}}
                    <li class="mui-table-view-cell" data-url="detail_price.html">
                        <div class="mui-table">
                            <div class="mui-table-cell mui-col-xs-7 port">
                                <div class="mui-block port-detail">
                                    <p class="mui-ellipsis loadingport">{{=value.loadingport}}</p>
                                    <p class="portcode">{{=value.loadingportcode}}</p>
                                </div>
                                <div class="mui-block port-detail">
                                    <span class="mui-icon mui-icon-arrowthinright"></span>
                                    <span>&nbsp;&nbsp;&nbsp;</span>
                                </div>
                                <div class="mui-block port-detail">
                                    <p class="mui-ellipsis dischargeport">{{=value.dischargeport}}</p>
                                    <p class="portcode">{{=value.dischargeportcode}}</p>
                                </div>
                            </div>
                            <div class="mui-table-cell mui-col-xs-5 shipdate">
                                <div class="mui-block shipdate-content">
                                    <p class="mui-ellipsis mui-date">
                                        <label class="date-title">
                                            开航
                                        </label>
                                        <span class="date-content">{{=value.ETA}}</span>
                                    </p>
                                    <p class="mui-ellipsis mui-date">
                                        <label class="date-title">
                                            有效期
                                        </label>
                                        <span class="date-content">
                                                        {{=value.periodvalidity}}
                                                    </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="mui-table">
                            <div class="mui-table-cell mui-col-xs-4 ship">
                                <div class="mui-block ship">
                                    <p class="mui-ellipsis">
                                        <label class="ship-title">
                                            船公司
                                        </label>
                                        <span class="ship-content">
                                                          {{=value.shipcompany}}
                                                        </span>
                                    </p>
                                    <p class="mui-ellipsis">
                                        <label class="ship-title">航期</label>
                                        <span class="ship-date">{{=value.shipdate}}天</span>
                                    </p>
                                </div>
                            </div>
                            <div class="mui-table-cell mui-col-xs-6 ship">
                                <div class="mui-block conta">
                                    <p class="mui-ellipsis">20GP</p>
                                    <p class="mui-ellipsis money">{{=value.GP20}}</p>
                                </div>
                                <div class="mui-block conta">
                                    <p class="mui-ellipsis">40GP</p>
                                    <p class="mui-ellipsis money">{{=value.GP40}}</p>
                                </div>
                                <div class="mui-block conta">
                                    <p class="mui-ellipsis">40HC</p>
                                    <p class="mui-ellipsis money">{{=value.HC40}}</p>
                                </div>
                            </div>
                        </div>
                    </li>
                    {{~}} {{?}}
                </script>

            </ul>
        </div>

    </body>
    <script src="js/mui.js "></script>
    <script src="js/common.js"></script>
    <script src="js/zepto.min.js"></script>
    <script src="js/doT.js"></script>
    <script>
        $(function() {
            /*var data = [
                {
                    "loadingport": "上海",
                    "loadingportcode": "SHANGHAI",
                    "dischargeport": "悉尼",
                    "dischargeportcode": "SYDNEY",
                    "ETA": "2015-10-20",
                    "periodvalidity": "2015-10-31",
                    "shipcompany": "SITC",
                    "shipdate": "3",
                    "20GP": "$450",
                    "40GP": "$500",
                    "40HC": "$500"
                }
            ];*/
            var data = [
                {
                    "loadingport": "上海",
                    "loadingportcode": "SHANGHAI",
                    "dischargeport": "悉尼",
                    "dischargeportcode": "SYDNEY",
                    "ETA": "2015-10-20",
                    "periodvalidity": "2015-10-31",
                    "shipcompany": "SITC",
                    "shipdate": "3",
                    "GP20": "$450",
                    "GP40": "$500",
                    "HC40": "$500"
                }
            ];
            var tempFn = doT.template($('#test_tmpl').html());
            var resultText = tempFn(data);
            console.log(resultText);
            $('#list').html(resultText);
        });
    </script>

</html>
使用模板来展示列表
posted @ 2015-12-02 10:07 哪有公园可以住的呀阅读(229) 评论(0) 收藏举报
刷新页面返回顶部
烂屁股猴情商包含两部分:1.了解自己的情绪;2.管理他人的情绪

doT.js 模板使用

公告

烂屁股猴 情商包含两部分:1.了解自己的情绪;2.管理他人的情绪

doT.js 模板 使用

公告

烂屁股猴情商包含两部分:1.了解自己的情绪;2.管理他人的情绪

doT.js 模板使用
