1.从载入开始
读者需要到官网中下载包含原文件和demo的压缩包，并解压到之前编写的代码目录下即可，文件路径请参考下方源代码 。参考链接：1.5.2,下载其中的。
这部分教程的内容集中在如何用编写房贷计算器 。如果读者学习并实现过前两部分HTML和的教程，那么学习这一部分的难度会大大降低，只需要关注纯粹的内容即可；如果读者没有学习过前两部分内容，也可以直接学习这一部分内容，对房贷计算器内容和交互部分，可以先运行最后给出的完整代码来理解 。
源代码：
房贷计算器房贷计算器
先修知识：
标签最常见的用途是链接样式表,源代码中链接了常用的4个样式，参考链接：HTML link 标签 。读者需要对CSS样式有简单的了解，只需要知道CSS 可以改变HTML外观即可，
参考链接：CSS 简介 。
代码中链接了4个常用样式和3个文件 ， 并将自己编写的代码放在相同目录的.js 文件中 。
2.如何学习
读者可以按照以下5个步骤，学习和使用:
了解有哪些插件 ， 以及这些插件的效果，选择合适的插件来实现想要的功能，参考链接： Demo 在线实例 。了解插件的属性，思考自己会用到哪些属性，以及如何编写这些属性 。了解插件的事件，思考自己会用到哪些事件，以及如何编写这些事件 。了解插件的方法，思考自己会用到哪些方法，以及如何编写这些方法 。参考插件文档中对于插件属性、事件和方法的详细说明，运行我们下载并解压的官方文档--1.5.2\demo目录下的demo，每一个插件都有几个参考样例 ， 其中basic.html演示了插件基本功能，其余样例演示了设置不同的属性、事件和方法后 ， 插件的效果有何变化 。3.页面布局
功能：
把所有的输入输出文本框都显示在一列，显得过于冗长，我们需要把用户输入的房贷信息和房贷详情的计算结果分成两列显示 。使用的插件可以实现页面布局功能 ， 布局（）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 ）的容器 。中间的区域面板是必需的，边缘区域面板是可选的 。每个边缘区域面板可通过拖拽边框调整尺寸 ， 也可以通过点击折叠触发器来折叠面板 。我们将用户的输入信息放在，中区，将计算结果信息放在东区 。
效果截图：
源代码：