• 高清:里约奥运会奖牌曝光 大部分由再生材料制成 2019-06-27
  • 在楼主大谈共产主义分配的时候,希望楼主先说明一下对马克思关于共产主义基本原则的理解。一个社会如果仍然存在“按劳动分配”,怎么会是“每一个个人的全面而自由的发展” 2019-06-25
  • 河北法院:打造互联网+诉非衔接的人民法庭工作新机制 2019-06-25
  • 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 诗经讲演录:男子如何从好色转为好德? 2019-05-10
  • 欢迎访问

    云南11选5前二和值走势图:云南鼎浩信息技术有限公司官方网站,云南网站建设诚信品牌!

    DING HAO COLUMN 鼎浩专栏

    鼎浩的一些分享
    Sharing from Ding Hao

    jQuery实现往返城市和日期输入查询

    来源:云南11选五走势图500期     2013年07月02日17:02
    字号:T|T

    云南11选五走势图500期 www.a-mcl.com 大多旅游网站上都提供了一个城市和日期输入查询的功能。用户在输入框中只需输入城市的拼音或者简称就可以即时查询到相关城市的名称,选择日期时则是出现两个月的日历控件,只需点选日期即可,整个操作简捷明了。

    本文讲解如何使用jQuery实现城市查询和日历显示的整个流程。本文用到了jquery ui库的datepicker插件来控制日历以及输入城市提示的插件。

    查看演示DEMO 下载源码

    XHTML

    
    

    设计城市和日期的输入框,注意使用了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的样式:

    
    
    

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

    代码首先获取了当前日期(即今天),然后初始日期输入框的内容和样式,再调用detepicker插件,设置最小日期为当前日期,设置numberOfMonths为连续的两个月,此外当选择日期后,调用函数将输入框的样式改变。将以上代码追加到城市输入查询代码的后面即可。

    如此,你的城市和日期选择功能已经实现。本文未涉及到日期的验证,如返回日期不能小于出发日期,这个就留给大家去想吧。

    客服中心
    点击进行在线咨询

    QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

    咨询热线:0871-63399840

    客服热线:0871-63523332

    客服中心 客服中心
  • 高清:里约奥运会奖牌曝光 大部分由再生材料制成 2019-06-27
  • 在楼主大谈共产主义分配的时候,希望楼主先说明一下对马克思关于共产主义基本原则的理解。一个社会如果仍然存在“按劳动分配”,怎么会是“每一个个人的全面而自由的发展” 2019-06-25
  • 河北法院:打造互联网+诉非衔接的人民法庭工作新机制 2019-06-25
  • 芯片是汽车产业发展的基石  专家呼吁建立"汽车芯片智库" 2019-06-13
  • “高深文学创作回顾研讨会”在北京举行 2019-06-13
  • 江苏专项督查基础教育问题 择校热、大班额成重点 2019-06-08
  • 14599元!索尼A7M3发布:续航翻番、支持4K视频 2019-06-08
  • 首页 春城壹网 七彩云南 一网天下 2019-05-22
  • QFII政策调整引增量资金入场 “成长+大消费”或成布局重点 2019-05-22
  • 密印“农禅”:何以在蛮荒之地举起文明火把(图) 2019-05-18
  • 20180531 袁隆平:海水稻打破纪录,杂交稻走向全球 2019-05-17
  • 晋城:八项重点打好水污染防治攻坚战 2019-05-15
  • 法国装置艺术家将一部老旧房车改造成移动游泳池 2019-05-13
  • 习近平致信祝贺人民日报创刊70周年 2019-05-10
  • 诗经讲演录:男子如何从好色转为好德? 2019-05-10
  • 广西11选5走势图表爱乐彩 重庆时时彩走势图是怎么看的 浙江快乐彩任选七 澳足球比分直播 贵州11选5图片 中彩网图表走势图表 中国福利彩票双色球中奖规则 体育彩票十一运夺金 江南一肖公式规律 新疆25选5走势图 3d组六胆拖 人民币棋牌游戏平台 排球少年oad{#S+}{ 三毛福彩3d 天津11选5怎样中奖