RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
jQuery中怎么实现往返城市和日期输入查询-创新互联

本篇文章为大家展示了jQuery中怎么实现往返城市和日期输入查询,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

成都创新互联专业为企业提供上饶网站建设、上饶做网站、上饶网站设计、上饶网站制作等企业网站建设、网页设计与制作、上饶企业网站模板建站服务,10年上饶做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
HTML

         

       

       

设计城市和日期的输入框,注意使用了p#suggest和p#suggest2两个DIV是用来显示城市列表的,默认CSS控制为不显示。

CSS

.input{border:1px solid #999} .qline{line-height:24px; margin:10px} #suggest,#suggest2{width:200px;} .gray{color:gray;} .ac_results {background:#fff;border:1px solid #7f9db9;position: absolute; z-index:10000;display: none;} .ac_results ul{margin:0;padding:0;list-style:none;} .ac_results li a{white-space: nowrap;text-decoration:none;display:block; color:#05a;padding:1px 3px;} .ac_results li{border:1px solid #fff; line-height:18px} .ac_over,.ac_results li a:hover {background:#c8e3fc;} .ac_results li a span{float:right;} .ac_result_tip{border-bottom:1px dashed #666;padding:3px;}

上述样式主要是控制城市查询的外观,而日历控件的样式我们单独使用jquery ui的样式:

jQuery

首先要引用主要javascript:

注意aircity.js是以数组的形式储存城市名称等数据。j.suggest.js是控制输入查询城市的,大家可以直接下载使用。

主要看下页面使用jQuery。

$(function(){ $("#arrcity").suggest(citys,{ hot_list:commoncitys, attachObject:"#suggest" }); $("#city2").suggest(citys,{ hot_list:commoncitys, attachObject:"#suggest2" }); });

上述代码实现了输入查询城市,调用城市数据的功能。hot_list:commoncitys是指初始的热门城市,attachObject:"#suggest"是设置输入时关联的显示城市列表的DIV。

接下来要加入控制日历的代码。

我们需要控制日历的有效日期,即显示当前日期,在当前日期前的日期都不能选中,因为你不可能选择已经过去的日期作为出发日期。还有就是要显示连续的两个月的日历。代码如下:

today=new Date(); var year = today.getFullYear(); var month = today.getMonth(); var day = today.getDate(); $("#startdate,#enddate").css("color","#aaa").attr("value","yyyy-mm-dd"); $("#startdate,#enddate").datepicker({   minDate: new Date(year, month, day+1),   numberOfMonths: 2,   onClose:function(){  $(this).css("color","#000");   } });

上述内容就是jQuery中怎么实现往返城市和日期输入查询,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。


网站名称:jQuery中怎么实现往返城市和日期输入查询-创新互联
标题网址:http://ncwzjz.com/article/dedgis.html