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

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[ThinkSNS|上一页]]</span>
<div style="clear:both;"></div>

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

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

<pre>
<!--引入系统头文件-->
<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" />
</pre>
看了上面的结构是不是感觉到层次十分清楚，这也是[[ThinkSNS]]1.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 功能：

<pre>
ymPrompt.confirmInfo('确认操作？',null,null,null,function(tp){
if(tp=='ok'){
//按确定后的操作写在这里
}});
</pre>
*第三点是Tpl/default/Index 目录下的index.html 文件，这是礼品中心的[[模板]]，里面选择发送好友的功能用到好友选择widget，只需要在模板里增加{:W("SelectFriend")}，然后用$_POST['fri_ids']就可以获得选择的好友ID第四点是分页功能，因为我们是用findPage 方式获取礼品列表，故返回的数据已经有分页的变量了，只要在模板里先引入分页样式：
<pre>
<link href="__PUBLIC__/js/pagination/pagination.css" rel="stylesheet"
type="text/css" />
</pre>
然后在合适的地方这样增加就可以了：
<pre>
<div id="Pagination" class="pagination">{$gifts.html}</div>
</pre>
其中$gifts 是findPage 函数返回的数据集。


==参考资料==
*[http://www.thinksns.com 参考来源]

[[category:ThinkSNS]]