复利计算器(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;
    		
    	}
    	
    

      

posted @ 2016-04-14 19:14  曹嘉琪  阅读(385)  评论(0编辑  收藏  举报