复利计算器（4）——jQuery界面美化、自动补全

一、分工

这次终于可以跟小伙伴合作了，经过讨论，我负责界面的美化和输入框自动补全，小伙伴擅长安卓，于是将复利计算器弄成app的任务就交给了小伙伴。为了我们两人团队，我们都好奋斗哈哈哈！！

 

二、界面美化

1.弹框提示

思路：弹框提示显示是浏览器自带，所以难免会难看些（如图一），因此引进一些jQuery的插件，将弹框美化（如图二） 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图一 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图二 实现：从网上下载相应的插件的jar包，将jar包引用到相应的项目中，只要在项目中写就可以实现layer.alert("请在复利金额输入框输入正数（保留两位小数）！", {icon: 100});就可以实现

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2.整体界面

思路：将整个页面（如图三）给了小伙伴觉得怪，想将两个面板合并成一个面板，但是个人有个人的想法，我觉得将其设计成两个面板的也是可以的 实现：只是将原来的背景改的不那么花俏

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

三.输入框自动补全

思路：百度了一下，发现有jQuery补全的插件，一整晚都在想如何用插件来实现自动补全，可是百度了一些，完全不懂，离11点还有两个小时，我决定用异步请求来实现，可是还是有一点小BUG 实现：通过ajax异步请求，用QL语句进行like查询，把数据库中带有输入框输入的内容提示出来，下面是与数据库连接的代码实现 public List<showDataModel> searchByLike(String keyValue,String num) { String a = null; if(num.equals("1")) a="f_1"; if(num.equals("2")) a="f_2"; if(num.equals("3")) a="f_3"; if(num.equals("4")) a="f_4"; Session session = getSession(); String sql="select * form t_showdata where "+a+" like %"+keyValue+"%"; SQLQuery query= session.createSQLQuery(sql); List<showDataModel> list = query.list(); session.getTransaction().commit(); session.close(); return list; }

转载于:https://www.cnblogs.com/jackeicao/p/5391915.html