jQueryEasyUI实现房贷计算器详细教程3--EasyUI部分

本文主要是介绍jQueryEasyUI实现房贷计算器详细教程3--EasyUI部分，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.从载入EasyUI开始

读者需要到EasyUI官网中下载包含原文件和demo的压缩包，并解压到之前编写的代码目录下即可，文件路径请参考下方源代码。参考链接：Download jQuery EasyUI 1.5.2,下载其中的Freeware Edition。

这部分教程的内容集中在如何用EasyUI编写房贷计算器。如果读者学习并实现过前两部分HTML和jQuery的教程，那么学习这一部分的难度会大大降低，只需要关注纯粹的EasyUI内容即可；如果读者没有学习过前两部分内容，也可以直接学习这一部分内容，对房贷计算器内容和交互部分，可以先运行最后给出的完整代码来理解。

源代码：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>房贷计算器</title><link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/color.css"><link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/demo/demo.css">
</head>
<body><h2>房贷计算器</h2><script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script><script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script><script type="text/javascript" src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script><script type="text/javascript" src="fd_easyui.js"></script>
</body>
</html>

先修知识：

<link> 标签最常见的用途是链接样式表,源代码中链接了常用的4个EasyUI样式，参考链接：HTML link 标签。
读者需要对CSS样式有简单的了解，只需要知道CSS 可以改变HTML外观即可，
参考链接：CSS 简介。

代码中链接了4个常用EasyUI样式和3个JavaScript文件，并将自己编写的JavaScript代码放在相同目录的fd_easyui.js 文件中。

2.如何学习EasyUI

读者可以按照以下5个步骤，学习和使用EasyUI:

了解EasyUI有哪些插件，以及这些插件的效果，选择合适的插件来实现想要的功能，参考链接：EasyUI Demo 在线实例。
了解插件的属性，思考自己会用到哪些属性，以及如何编写这些属性。
了解插件的事件，思考自己会用到哪些事件，以及如何编写这些事件。
了解插件的方法，思考自己会用到哪些方法，以及如何编写这些方法。
参考EasyUI插件文档中对于插件属性、事件和方法的详细说明，运行我们下载并解压的官方文档jquery-easyui-1.5.2\demo目录下的demo，每一个插件都有几个参考样例，其中basic.html演示了插件基本功能，其余样例演示了设置不同的属性、事件和方法后，插件的效果有何变化。

3.页面布局

功能：
把所有的输入输出文本框都显示在一列，显得过于冗长，我们需要把用户输入的房贷信息和房贷详情的计算结果分成两列显示。使用EasyUI的Layout插件可以实现页面布局功能，布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。我们将用户的输入信息放在，中区，将计算结果信息放在东区。

效果截图：

源代码：

    <div class="easyui-layout" style="width:801px;height:570px;"><div data-options="region:'center',title:'房贷详情'"  style="padding:10px;"  ></div><div data-options="region:'east',title:'计算结果',collapsible:false" style="width:400px;"></div></div>

先修知识：

在HTML标签中加入class="easyui-layout"，表示这是一个EasyUI插件。
教程中用使用style设置标签的宽（width）、高（height）、内边距（padding）和外边距（margin），这些数值都是调整好之后的，读者可以先不设置这些值，把整个页面编写完之后，再自行调整，参考链接：HTML style 属性，CSS width 属性，CSS height 属性，CSS padding 属性，CSS margin 属性。
简单了解Layout插件的效果和功能，参考链接：EasyUI Layout 布局,参考demo：jquery-easyui-1.5.2\demo\layout\basic.html。
EasyUI插件的属性，可以在标签中用data-options属性来设置，例如：data-options="region:'center',title:'房贷详情'"。
Layout插件的region属性定义布局面板（layout panel）的位置，其值是下列之一：north、south、east、west、center；title属性表示布局面板（layout panel）的标题文本；collapsible属性定义是否显示可折叠按钮。参考链接：EasyUI Layout 布局,参考demo：jquery-easyui-1.5.2\demo\layout\nocollapsible.html。

4.选择贷款类别

我们将用户选择贷款类型和自动修改贷款利率这两个紧密关联的功能，放在一个小面板中。

效果截图：

源代码：
HTML源代码：

         <div style="width:380px;height:100px;  margin-bottom: 10px "><div class="easyui-panel" title="贷款类别" style="width:380px;height:100px; padding:10px; " ><div><input id="cc" style="width:250px;"></div><div id="sp"><div style="line-height:22px;background:#fafafa;padding:5px;">请选择贷款类别</div><div style="padding:10px"><input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked ="checked" ><span>公积金贷款</span><br/><input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan"><span>商业贷款</span></div></div><div><input  id="id_dai_kuan_li_lv" class="easyui-textbox" type="text" name="dai_kuan_li_lv" value="3.25" label="贷款利率:" labelPosition="left" style="width:250px;"> %</div></div></div>

JavaScript源代码：

$('#cc').combo({editable:false,label:'选择贷款类型:',labelPosition:'left'});$('#sp').appendTo($('#cc').combo('panel'));$('#cc').combo('setValue', "gong_ji_jin_dai_kuan").combo('setText', "公积金贷款");$('#sp input').click(function(){var v = $(this).val();var s = $(this).next('span').text();$('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');});$("#sp input").change(function () {if ( $("input:radio[name=dai_kuan_lei_bie]:checked").val() == "shang_ye_dai_kuan"){$("#id_dai_kuan_li_lv").textbox('setValue',"4.90");} else{$("#id_dai_kuan_li_lv").textbox('setValue',"3.25");}});

先修知识：

EasyUI的面板用Panel插件实现，参考链接：EasyUI Panel 面板,参考demo：jquery-easyui-1.5.2/demo/panel/basic.html。
EasyUI中没有与radio样式直接对应的插件，我们使用功能类似的Combo组合代替。参考demo：jquery-easyui-1.5.2/demo/combo/basic.html中用Combo插件实现了radio单选按钮的功能，我们只需要在这个demo上稍作修改，就可以实现我们需要的功能。需要注意的是组合（combo）可以使用 javascript 从 <select> 或 <input> 元素进行创建。请注意，从标记创建组合（combo）是无效的，参考链接：EasyUI Combo 组合。
用JavaScript设置EasyUI插件的属性的流程如下，以combo为例：

$(‘#cc’).combo({
editable:false,
label:’选择贷款类型:’,
labelPosition:’left’
});
首先只能使用jQuery的id选择器来选择元素，然后说明插件的类型（本例中是combo），然后在大括号中设置属性的值。
combo插件的editable属性定义用户是否可以往文本域中直接输入文字。EasyUI插件可以使用label和labelPosition属性定义标记和标记的位置，功能与HTML的label标签相同，参考链接：EasyUI Combo 组合，HTML 标签。
通过 jQuery，可以把动作/方法链接起来。即允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。语句$('#sp').appendTo($('#cc').combo('panel'));就是在同一个元素上运行了两个方法，参考链接：jQuery - Chaining。
jQuery的appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容，参考链接：appendTo() 方法。
用JavaScript调用EasyUI插件的方法的流程如下，以combo为例：
无参数：$('#cc').combo('panel');
有参数：$('#cc').combo('setValue', "gong_ji_jin_dai_kuan");
其中combo代表插件名称， 'setValue'和'panel'代表插件插件的方法名， "gong_ji_jin_dai_kuan"是传入参数的值。
combo插件的panel方法用来返回下拉面板对象，setValue 方法用来设置组件的值，setText 方法用来设置文本值，hidePanel 方法用来隐藏下拉面板，参考链接：EasyUI Combo 组合。
jQuery可以通过this关键字选择被选中的元素，参考链接：jQuery 核心 - jQuery() 方法中的用法 2 ：使用 DOM 元素部分。
<span> 标签被用来组合文档中的行内元素，参考链接：HTML 标签。
jQuery的text() 方法用来设置或返回被选元素的文本内容，参考链接：jQuery 文档操作 - text() 方法。
EasyUI的textbox插件用来实现文本框。textbox的setValue方法用来设置文本框的值；textbox的getValue方法用来设置文本框的值。参考链接：TextBox，参考demo：jquery-easyui-1.5.2/demo/textbox/basic.html。

5.选择计算方式

采用EasyUI标签页插件实现用户选择计算方式的功能，取代之前使用单选按钮加隐藏输入框的方式。采用EasyUI组合框插件实现用户选择首付比例的功能，取代之前使用的下拉列表。

效果截图：

源代码：

        <div style="width:380px;height:130px;  margin-bottom: 10px "><div id="id_ji_suan_fang_shi" class="easyui-tabs" style="width:380px;height:130px"><div title="根据面积、单价、首付比例计算" style="padding:10px"><div><input  id="id_dan_jia" class="easyui-textbox" type="text" name="dan_jia" label="单价:" labelPosition="left" style="width:250px;"> 元/平方米</div><div><input  id="id_mian_ji" class="easyui-textbox" type="text" name="mian_ji" label="面积:" labelPosition="left" style="width:250px;"> 平方米</div><div ><select id ="id_shou_fu_bi_li" class="easyui-combobox" name="shou_fu_bi_li" label="首付比例:" labelPosition="left" style="width:250px;"><option value="0">无</option><option value="0.1">1成</option><option value="0.2">2成</option><option value="0.3" selected = "selected">3成</option><option value="0.4">4成</option><option value="0.5">5成</option><option value="0.6">6成</option><option value="0.7">7成</option><option value="0.8">8成</option><option value="0.9">9成</option></select></div></div><div title="根据贷款总额计算" style="padding:10px"><div><input  id="id_dai_kuan_zong_e" class="easyui-textbox" type="text" name="dai_kuan_zong_e" label="贷款总额:" labelPosition="left" style="width:250px;"> 元</div></div></div></div>