设计思路

整个示例的设计思路可以按如下几个部分进行讲解。

• 结构部分：由HTML负责。结构代码存放在“家庭日志.html”文件中，负责构建页面的基本骨架。其中动态表单结构和动态数据显示结构分别在writeform.js和showrecord.js文件中，通过脚本动态生成。
• 布局部分：由CSS负责。页面样式代码存放在css/style.css样式表文件中，动态样式存放在js/style.js文件中，通过脚本动态控制页面显示样式。然后在网站首页的头部区域导入即可。

<link href="css/style.css" rel="stylesheet" type="text/css" />

• 脚本部分：由JavaScript和jQuery负责。脚本代码存放在js文件夹中，负责异步数据读写、动态交互设计。本示例使用的jQuery框架版本为jquery-1.3.2及其以上版本，可兼容使用jquery-1.4.2。但是早期jQuery版本的语法可能会略有不同。脚本文件包含下面几个文件：
  • onload.js：页面初始化，即统筹所有页面脚本函数的工作。
  • public.js：公共函数，管理页面基本、公用功能。
  • init.js：表单初始化配置。
  • writeform.js：动态生成表单。
  • writerecord.js：数据录入。
  • queryrecord.js：查询记录集。
  • showrecord.js：显示记录集。
  • style.js：动态样式。
  • jquery-1.4.4.js：jQuery框架文件。
  • jquery.uitablefilter.js：数据表过滤外部jQuery插件。
  • jquery.elastic.js：文本区域自动伸缩外部jQuery插件。
  • jquery.tablesorter.js：数据表排序外部jQuery插件。

然后在网站首页的头部区域导入即可。

<script type="text/javascript" src="js/onload.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/writeform.js"></script>
<script type="text/javascript" src="js/writerecord.js"></script>
<script type="text/javascript" src="js/queryrecord.js"></script>
<script type="text/javascript" src="js/showrecord.js"></script>
<script type="text/javascript" src="js/style.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.uitablefilter.js"></script>
<script type="text/javascript" src="js/jquery.elastic.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>

• 数据部分：由Accesss数据库负责。存放在data文件夹中，数据库名称为home.mdb，发布名称为home.asp。

本网站具有三大功能：

• 账目录入，包括入账、出账、博客及其明细信息。
• 账目查询，包括自定义查询和固定查询。
• 账目浏览，包括账目排序、汇总、修改、添加和删除等功能。