ThinkSNS-应用开发范例-开始编程模板层

导航: 上一页

我们在Tpl/default 目录下需要两个文件夹：Index 和Public。Index 文件夹名是与前面的IndexAction.class.php 文件对应起来的，表示Index 文件夹下面的文件都是IndexAction.class.php 文件所需要的全部模板。应用的公共文件我们一般放到Tpl/default/Public 目录下，比如本次礼品应用的礼品图片，JS 文件，CSS 文件都是放到该目录。当然这些目录怎么设置开发者完全可以由自己决定，只要保证调用文件的路径正确就可以了。

• 我们先来看看ThinkSNS1.6 模板文件的一般结构，开发人员引入本应用自己的样式文件和JS 文件后可直接在画布层里增加相应的显示代码即可

<!--引入系统头文件-->
<include file="__THEME__/header" />
<!--引入样式文件区-->
<!--引入JS 文件区-->
<!-- 内容begin -->
<div class="content">
<!-- 用户应用列表区-->
<include file="__THEME__/apps" />
<div class="main">
<!-- 画布begin -->
</div><!-- 画布end -->
<!-- 分隔层-->
<div class="c"></div>
</div>
<!-- 内容end -->
<!--引入系统尾文件-->
<include file="__THEME__/footer" />

看了上面的结构是不是感觉到层次十分清楚，这也是ThinkSNS1.6 方便二次开发的一方面表现。

由于礼品的模板代码比较多，在此就不贴出来了，开发人员可以直接打开Tpl文件夹下的文件看看。下面我们重点说说模板文件里的几处有学习作用的代码。第一点是ThinkSNS1.6 全面使用jQuery 技术，jQuery 是一个不错的轻量级的JS框架，能帮助我们快速的开发JS 应用，并在一定程度上改变了我们写JavaScript 代码的习惯。ThinkSNS1.6 在头文件里已经引入jQuery 库，开发人员不必重复引入。如果你还不熟悉jQuery，直接使用JS 原生代码即可。

• 第二点ThinkSNS1.6 的弹窗使用了ymPrompt 消息提示组件，如果你还不熟悉ymPrompt 组件，请看这里的介绍：

http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html

温馨小提示：ymPrompt 的confirmInfo 方法与我们常见的confirm 方法用法不一样，我们可以参考以下方式实现confirm 功能：

ymPrompt.confirmInfo('确认操作？',null,null,null,function(tp){
if(tp=='ok'){
//按确定后的操作写在这里
}});

• 第三点是Tpl/default/Index 目录下的index.html 文件，这是礼品中心的模板，里面选择发送好友的功能用到好友选择widget，只需要在模板里增加{:W("SelectFriend")}，然后用$_POST['fri_ids']就可以获得选择的好友ID第四点是分页功能，因为我们是用findPage 方式获取礼品列表，故返回的数据已经有分页的变量了，只要在模板里先引入分页样式：

<link href="__PUBLIC__/js/pagination/pagination.css" rel="stylesheet"
type="text/css" />

然后在合适的地方这样增加就可以了：

<div id="Pagination" class="pagination">{$gifts.html}</div>

其中$gifts 是findPage 函数返回的数据集。

参考资料

• 参考来源