多模板开发技术分享

浏览:1272 发布日期:2015/10/15 分类:技术分享
本例中的模板文件都在OneThink的"/Application/Home/View/Default/"目录下
本例没有使用layout,相关配置一定是:'LAYOUT_ON'=>false,base/common.html<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <include file="Public/head"/>
</head>
<body>
    <!-- 头部 -->
    <include file="Public/header"/>
    <!-- /头部 -->
    
    <!-- 主体 -->
    <include file="Public/body"/>
    <!-- /主体 -->

    <!-- 底部 -->
    <include file="Public/footer"/>
    <!-- /底部 -->
</body>
</html>
我这里所说的多模板技术,就是在“Public/body.html”文件中实现多种布局模板的嵌套技术。

在OneThink中实现多模板技术非常简单,跟我来:

Public/body.html<block name="topflash"></block>
<div id="main-container" class="container">
    <div class="row">        
        <block name="left"></block>
        <block name="body"></block>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $(window).resize(function(){
            $("#main-container").css("min-height", $(window).height() - 343);
        }).resize();
    })
</script>
在body.html中我定义了三个<block>(注意<block>不能嵌套):
一、定义顶部区块,可以放入一个flash轮播广告<block name="topflash"></block>二、定义左侧菜单栏<block name="left"></block>三、定义右侧主体内容<block name="body"></block>“左侧菜单栏和右侧主体内容”也可以换成“左侧主体内容和右侧菜单栏”,这个完全取决于你页面中<div>的css样式定义。

通过以上定义,body.html的主体框架就出来了,接下来我们就可以据此创建一个body.html的新模板应用了。

我们创建一个会员中心首页
Mem/index.html<extend name="Base/common" />
<block name="topflash"><include file="Public/topflash_mem"/></block>
<block name="body">
您已登录会员中心
</block>
<block name="left"><include file="Public/left_mem"/></block>
会员中心首页index.html文件中我们定义了两个子模板文件:topflash_mem和left_mem,这两个文件就是会员中心通用的“顶部轮播广告位”和“左侧导航菜单”。<block name="body">
您已登录会员中心
</block>
这个<block>中的内容就是会员中心各个子页面的实际内容了,复制index.html改个文件名后,在这里修改或添加内容就可以实现多模板开发技术了。

Public/left_mem.html    <div class="col-lg-3 bs-docs-sidebar" style="border:1px solid red;height:200px;">
        会员中心<BR>
        (左侧导航菜单)<BR>
        购物车<BR>
        我的订单<BR>
        修改密码<BR>
        退出
    </div>
Public/topflash_mem.html    <div  class="container" style="border:1px solid blue;height:50px;">
    会员中心的顶部轮播广告位
    </div>
调用模板控制器的开发,请参考TP开发手册。

最后截个图:
最佳答案
评论( 相关
后面还有条评论,点击查看>>