2.3.1 基于easyUI框架写加法器
2.3.1 基于easyUI框架写加法器
easyUI是一个第三方控件库，内容很全面。比如我们做一个加法计算程序，打开其官网，找到示例修改到自己想要的结果。先找到其相关内容：
打开后，找到表单form的相关例子：
打开form的示例，由三部分构成：
将源代码拷贝到自己硬盘，并保存为html文档格式：
双击网页文件运行，结果如下：
略显简陋，这是因为我们没有加载easyUI的js和css文件，下载其库文件：
下载后，将js文件和css文件放在与该html文档同目录的下的libs文件夹内：
如下图：
修改代码为如下（主要修改js和css文件地址，以及页面的汉化）：
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <title>BasicForm - jQuery EasyUI Demo</title>
6. <linkrel="stylesheet" type="text/css" href="libs/themes/default/easyui.css">
7. <linkrel="stylesheet" type="text/css" href="libs/themes/icon.css">
8. <linkrel="stylesheet" type="text/css" href="../demo.css">
9. <scripttype="text/javascript" src="libs/jquery.min.js"></script>
10. <scripttype="text/javascript" src="libs/jquery.easyui.min.js"></script>
11. </head>
12. <body>
13. <h2>BasicForm</h2>
14. <p>Fillthe form and submit it.</p>
15. <divstyle="margin:20px 0;"></div>
16. <divclass="easyui-panel"title="New Topic" style="width:100%;max-width:400px;padding:30px 60px;">
17. <formid="ff" method="post">
18. <divstyle="margin-bottom:20px">
19. <inputclass="easyui-textbox"name="name"style="width:100%" data-options="label:'数1:',required:true">
20. </div>
21. <divstyle="margin-bottom:20px">
22. <inputclass="easyui-textbox"name="email"style="width:100%"data-options="label:'数2:',required:true,validType:'email'">
23. </div>
24. <divstyle="margin-bottom:20px">
25. <inputclass="easyui-textbox"name="subject"style="width:100%"data-options="label:'和是:',required:true">
26. </div>
27. </form>
28. <divstyle="text-align:center;padding:5px 0">
29. <ahref="javascript:void(0)" class="easyui-linkbutton"onclick="submitForm()"style="width:80px">求和</a>
30. <ahref="javascript:void(0)" class="easyui-linkbutton"onclick="clearForm()" style="width:80px">Clear</a>
31. </div>
32. </div>
33. <script>
34. function submitForm(){
35. $('#ff').form('submit');
36. }
37. function clearForm(){
38. $('#ff').form('clear');
39. }
40. </script>
41. </body>
42. </html>
点击运行，结果如下：
界面比较美观了吧，这回我们要实现求和功能了，修改代码：
1. <!DOCTYPEhtml>
2. <html>
3. <head>
4. <metacharset="UTF-8">
5. <title>BasicForm - jQuery EasyUI Demo</title>
6. <linkrel="stylesheet" type="text/css" href="libs/themes/default/easyui.css">
7. <linkrel="stylesheet" type="text/css" href="libs/themes/icon.css">
8. <linkrel="stylesheet" type="text/css" href="../demo.css">
9. <scripttype="text/javascript" src="libs/jquery.min.js"></script>
10. <scripttype="text/javascript" src="libs/jquery.easyui.min.js"></script>
11. </head>
12. <body>
13. <h2>BasicForm</h2>
14. <p>Fillthe form and submit it.</p>
15. <divstyle="margin:20px 0;"></div>
16. <divclass="easyui-panel"title="New Topic" style="width:100%;max-width:400px;padding:30px 60px;">
17. <formid="ff">
18. <divstyle="margin-bottom:20px">
19. <inputclass="easyui-textbox"id="add1" name="name" style="width:100%"data-options="label:'数1:'">
20. </div>
21. <divstyle="margin-bottom:20px">
22. <inputclass="easyui-textbox"id="add2" name="email" style="width:100%"data-options="label:'数2:'">
23. </div>
24. <divstyle="margin-bottom:20px">
25. <inputclass="easyui-textbox"id="sum" name="subject" style="width:100%"data-options="label:'和是:'">
26. </div>
27. </form>
28. <divstyle="text-align:center;padding:5px 0">
29. <ahref="javascript:void(0)" class="easyui-linkbutton"onclick="submitForm()"style="width:80px">求和</a>
30. <ahref="javascript:void(0)" class="easyui-linkbutton"onclick="clearForm()" style="width:80px">Clear</a>
31. </div>
32. </div>
33. <script>
34. function submitForm(){
35. var x=parseFloat(add1.value);
36. var y=parseFloat(add2.value);
37. $("#sum").textbox('setValue',x+y);
38. }
39. function clearForm(){
40. $('#ff').form('clear');
41. }
42. </script>
43. </body>
44. </html>
点击运行，结果如下：
使用easyUI，可以快速搭建表单类的网页，非常有利于我们做工程设计计算。无非就是数据量多，计算复杂而已。这已经比用传统的MFC开发程序效率提升很多了。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。