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开发程序效率提升很多了。

本文分享自微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券