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 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!