master

分支 (1)

管理

管理

master

cnode-html
/
good.html

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="utf-8"/>
    <meta name='description' content='CNode：Node.js专业中文社区'>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="keywords" content="nodejs, node, express, connect, socket.io"/>
    <link rel="icon" href="//o4j806krb.qnssl.com/public/images/cnode_icon_32.png" type="image/x-icon"/>
    <title>CNode：Node.js专业中文社区</title>
    <link rel="stylesheet" href="assets/lib/seedsui/seedsui.min.css">
    <script src="assets/lib/artTemplate/template-web.js"></script>
    <script src="assets/lib/jquery/jquery.min.js"></script>
    <script src="assets/lib/zepto/zepto.min.js"></script>
    <style>
        .list-img{
            width: 40px;
            height: 40px;
        }
        section .tabbar{
            position: fixed;
            top:44px;
            left: 0;
            right: 0;
            z-index: 1;
        }
        section article{
            bottom:53px;
            top:84px;
        }
        .list-title-title{
            color: #4B4B4B;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div id="section_container">
    <header style="z-index: 2;">
        <div class="titlebar">
            <h1 class="titlebar-title text-center">Node.js专业中文社区</h1>
            <div class="titlebar-right">
                <a class="icon icon-write-fill right" id="create" href="create.html"></a>&nbsp;&nbsp;
            </div>
        </div>
    </header>
    <section>
        <div class="tabbar tabbar-line animated">
            <a class="tab" href="index.html">
                <label class="tab-label">全部</label>
            </a>
            <a class="tab active" href="good.html">
                <label class="tab-label">精华</label>
            </a>
            <a class="tab" href="share.html">
                <label class="tab-label">分享</label>
            </a>
            <a class="tab" href="ask.html">
                <label class="tab-label">问答</label>
            </a>
            <a class="tab" href="job.html">
                <label class="tab-label">招聘</label>
            </a>
        </div>
        <article>
            <ul class="list" id="list">

            </ul>
        </article>
    </section>
    <footer>
        <ul class="tabbar tabbar-footer">
            <li class="tab"  page="index.html">
                <i class="icon icon-home"></i>
                <label class="tab-label">首页</label>
            </li>
            <li class="tab" page="message.html">
                <i class="icon icon-chat"></i>
                <label class="tab-label">消息</label>
            </li>
            <li class="tab" page="user.html">
                <i class="icon icon-person"></i>
                <label class="tab-label">我的</label>
            </li>
        </ul>
    </footer>
    <!-- 加载遮罩 -->
    <div class="loading" id="ID-Loading" style="display: block;background-color: white;">
        <div class="loading-progress-box">
            <div class="loading-progress"></div>
        </div>
    </div>
</div>
<script src="assets/lib/seedsui/seedsui.min.js"></script>
<script src="assets/js/common.js"></script>
<script id="goodTemplate" type="text/html">
    {{each $data value i}}
    <li class="list-li underline">
        <div class="list-thumbnail list-img">
            <img data-load-src="{{value.author.avatar_url}}" src="{{value.author.avatar_url}}"/></div>
        <div class="list-container">
            <div class="list-title">
                <P>
                    <span class="mark-info">{{value.tab|checkTab}}</span>
                    &nbsp;<a class="list-title-title" href="fulltext.html?id={{value.id}}" cmd="fulltext">{{value.title}}</a>
                </P>
            </div>
            <div class="list-row">
                <p class="list-font">
                    <label class="bold">{{value.reply_count}}/{{value.visit_count}}
                    </label>
                    <label class="float-right">{{value.create_at.substr(0,10)}}
                    </label>
                </p>
            </div>
        </div>
    </li>
    {{/each}}
</script>
<script>
    //隐藏遮罩
    var loading=new Loading({
        container:"#ID-Loading"
    });
    setTimeout(function(){
        loading.hide();
    },500);


    var view={
        /*=========================
         Model
         ===========================*/
        render:function(){
            var self = this;
            this.pagination={
                hasData:null,
                current:1,//当前页数
                max:0,//总页数
                limit:20,//每页条数
                total:0,//总条数
                //length:0
            };
            //插件
            this.drag=DfPull({
                overflowContainer:"article",
                //overflowContainer:"article",
                //topContainer:true,
                //bottomContainer:false,
                parent:"article",
                onTopRefresh:function(e){
                    console.log("头部刷新");
                    self.pagination.current=1;
                    self._loadData();
                },
                onTopComplete:function(e){
                    console.log("头部完成");
                },
                onBottomRefresh:function(e){
                    console.log("底部刷新");
                    self.pagination.current++;
                    self._loadData(true);//下一页
                },
                onBottomComplete:function(e){
                    console.log("底部完成");
                },
                onBottomNoData:function(e){
                    console.log("底部无数据了");
                }
            });

            //渲染页面

            //加载数据
            this._loadData();

            this._attach();//使用backbone时，此行无用
        },
        refresh:function(){
            console.log("刷新");
        },
        destroy:function(){
            console.log("移除");
        },

        /*=========================
         Method
         ===========================*/
        _loadData:function(){
            var self=this;

            $.ajax({
                type : "GET",
                url:'https://cnodejs.org/api/v1/topics?tab=good&page='+self.pagination.current+'&limit='+self.pagination.limit,
                dataType:"json",
                success: function(data){
                    if (data.success==true){
                        var result = data.data;
                        //self.pagination.length = result.length;
                        var html = template('goodTemplate',result);
                        $('#list').append(html);
                        //drag标识底部状态
                        self.drag.bottomComplete();
                        //如果是最后一页,假如返回数据的数量少于每页请求数量limit时，说明没有下一页数据
                        if(result.length<self.pagination.limit){
                            //drag标识底部状态
                            self.drag.bottomNoData();
                        }
                    }else{
                        var popAlert=new Alert("加载超时",{"title":false});
                        popAlert.show();
                    }
                }
            });
        },

        /*=========================
         Events
         ===========================*/
        _attach:function(e){
        }
        /*=========================
         Event Handler
         ===========================*/
    };

    window.addEventListener("load",function() {
        view.render();
    },false);

    template.defaults.imports.checkTab = function (data,tab) {
        if (data !== null){
            tab = "精华";
            return tab;

        }
    }
</script>
</body>
</html>