js06金沙官网登录-js06.com-欢迎您

来自 计算机 2020-01-04 23:49 的文章
当前位置: js06金沙官网登录-js06.com-欢迎您 > 计算机 > 正文

jQuery往返城市和日期查询实例讲解,jquery日期查

jQuery往返城市和日期查询实例批注,jquery日期查询

基本上旅游网址上都提供了二个城郭和日期输入查询的听从。客户在输入框中只需输入城市的拼音恐怕简单称谓就足以立刻查询到有关城市的称呼,选用日期时则是出新五个月的日历控件,只需点选日期就可以,整个操作简捷明了。
正文用到了jquery ui库的datepicker插件来决定日历以致输入城市提醒的插件。

金沙官网登录 1

XHTML金沙官网登录

<div class="qline"> 
  <label for="arrcity">出发城市:</label><input type="text" name="arrcity" class="input" 
id="arrcity" />  
  <div id="suggest" class="ac_results"></div> 
  <label for="city2">目的城市:</label><input type="text" name="city2" class="input" 
id="city2" /> 
  <div id="suggest2" class="ac_results"> </div> 
</div> 
<div class="qline"> 
  <label for="startdate">出发日期:</label><input type="text" name="startdate" class="input" 
id="startdate" /> 
  <label for="enddate">返回日期:</label><input type="text" name="enddate" class="input" 
id="enddate" /> 
</div> 

设计城市和日期的输入框,注意使用了div#suggest和div#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的体制:

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 

jQuery
先是要引用重要javascript:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui.js"></script> 
<script type="text/javascript" src="js/aircity.js"></script> 
<script type="text/javascript" src="js/j.suggest.js"></script> 

在意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"); 
  } 
}); 

代码首先获得了当下日子(即今日),然后初阶日期输入框的剧情和体制,再调用detepicker插件,设置最小日期为当下日期,设置numberOfMonths为一而再的五个月,此外当选用日期后,调用函数将输入框的样式校订。将以上代码追加到城邑输入查询代码的末尾就可以。
这么,你的城市和日期选拔功用已经贯彻。本文未涉嫌到日期的证实,如再次回到日期不可能小于出发日期,这些就留下我们去想啊。

以上正是怎么着利用jQuery完成城市查询和日历呈现的任何流程,希望对我们的就学抱有助于。

比超多旅游网址上都提供了多少个都会和日期输入查询的法力。客商在输入框中只需输入城市...

本文由js06金沙官网登录-js06.com-欢迎您发布于计算机,转载请注明出处:jQuery往返城市和日期查询实例讲解,jquery日期查

关键词: