您的位置：首页 > Web前端 > JQuery

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

2016-04-14 19:14 302 查看

[b]一、分工[/b]

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

[b]二、界面美化[/b]

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;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航