码迷,mamicode.com
首页 > 其他好文 > 详细

后台模板

时间:2016-07-11 09:03:39      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

使用后台模板是为了把前端显示作为model层的一部分,当数据结构确定了,同一个功能可以套用不同的模板结构生成不同的结构,就像组件一样

数据结构

技术分享
var model = {//左侧导航动态数据 
            navs:[
            {idx:treeopt,name:Tree操作,icon:fa-dashboard},
            {idx:plmission,name:计划任务,icon:fa-bookmark},
            {idx:webvisit,name:Web访问,icon:fa-globe},
            {idx:backmanage,name:后台运行模块,icon:fa-cogs},
            {idx:apivisit,name:Api访问,icon:fa-coffee},
            {idx:serverStatus,name:服务器状态,icon:fa-coffee},
            {idx:usermanage,name:用户管理,icon:fa-coffee},
            {idx:clientrelease,name:客户端发布,icon:fa-coffee},
            {idx:newsStatus,name:新闻抓取状态,icon:fa-coffee},
            {idx:newsPpl,name:新闻分词管理,icon:fa-coffee},
            {idx:tips,name:公告,icon:fa-coffee},
            {idx:report,name:report操作,icon:fa-coffee},
            {idx:shell_code,name:shellCode操作,icon:fa-coffee},
            {idx:queue_system,name:队列系统,icon:fa-coffee},
            {idx:chat_status,name:聊天状态,icon:fa-coffee},
            {idx:questionnaire,name:问卷调查,icon:fa-coffee},
            {idx:upload_file,name:上传文件,icon:fa-coffee}
            ]
        };
View Code

显示模板

技术分享
    var left_nav_temp = function(){//左侧导航模版
        /*
            <div class="hp oa scrollbar">
                <div opt="left_head" class="pf h50 wp pl10 pt10 pb5 f_df f_aic oh left_menu">
                    <img class="w30 h30 fl" src="imgs/login_head_logo.png"/>
                    <span class="dib ml15 h18 oh fl fs18">润投后台</span>
                </div>
                <div class="pt50" style="padding-bottom:100px;">
                    <ul id="index_page_url">
                        {{# for(var i=0;i<d.navs.length;i++) { }}
                        <li class="db wp h40 tac cp oh left_bc" idx={{d.navs[i].idx}}>
                            <span class="fa {{d.navs[i].icon}} dib w25 h25 mt13 fl ml10"></span>
                            <span class="fl ml5 mt13">{{d.navs[i].name}}</span>                    
                        </li>
                        {{# } }}
                    </ul>
                </div>
                <div opt="left_foot" class="pf wp b0 left_menu z10">
                    <div class="lh50 tac cp left_bc oh" style="font-size:36px">
                        <span class="fa fa-github"></span>
                    </div>
                    <div id="admin_shrink" class="db lh50 tac cp oh">
                        <span class="fa fa-angle-left"></span>
                    </div>
                </div>
            </div>
        */            
    };

    var admin_head_temp = function(){
        /*
        <div class="lh50 pl10 bc_11 b_s b_w1 b_14 z20 pf wp">                
                {{d.name}}
        </div>
        */
    };
View Code

事件代码

技术分享
function loadPge(e){
        var e = WT.e.fix(e),_e = e.t;
        e.stop();
        while(_e.tagName!=UL){
            if(_e.tagName===LI){
                var _navStyle = _e.attr(idx);
                if(clicked){
                    clicked.ac(left_bc).dc(left_sel);
                }
                _e.dc(left_bc).ac(left_sel); 
                switch(_navStyle){ //不同页面加载
                    case _navStyle :
                        viewLoad(zc_admin/ + _navStyle + .html,$(index_right_con));
                        for(var i=0; i<model.navs.length; i++){
                            if (_navStyle === model.navs[i].idx) {
                                $(index_head).h(laytpl(admin_head_temp.help()).render({name:model.navs[i].name}));
                            }
                        }
                    break;
                    default:
                        $(index_right_con).h(NO FOUND);
                        break;
                }
                clicked = _e;
            }
            _e = _e.pn();
        }
    }
View Code

 

后台模板

标签:

原文地址:http://www.cnblogs.com/lv-sally/p/5659108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!