机票酒店类型的搜索表单效果，

最新推荐文章于 2024-06-29 16:57:52 发布

weixin_30302609

最新推荐文章于 2024-06-29 16:57:52 发布

阅读量106

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/huangmingcong/archive/2013/05/10/3070539.html

版权

因为公司网站类型是预订机票酒店及各方面的票业务，导致很多地方都有都需要这个功能，面临网站以后的重新开发，特地为之后做准备，在网友“刀刀”的帮助下，把例子和大家分享下。

效果图如下

分享源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ font-size:12px; margin:0px; padding:0px;}
.formDivBox{ margin:200px 0px 0px 500px; border:9px solid #F93; border-radius:8px; width:300px;}
.formDivBox h1{ font:bold 14px/2em 'simsun'; color:#666; padding:10px 10px 0px 10px;}
.formUlBox { list-style:none; margin:10px;}
.formUlBox li{ margin:20px 0px;}
.formUlBox .txt{ border:1px solid #f90; border-radius:5px; height:24px; width:170px; padding:0px 10px;}
.formUlBox .btn{ width:190px; cursor:pointer; color:#666; font-weight:bold; padding:5px 0px; border:0px; background:#FC0; border-radius:5px; margin-left:65px;}
.listDivBox{ position:absolute; width:370px; padding:10px; border:1px solid #ccc; background:#FFF;display:none;}
.listDivBox a{ display:inline-block; text-align:center; margin:2px; background:#6CF; color:#fff; border-radius:5px; padding:5px 0px;}
</style>
</head>

<body>

<div class="formDivBox">
　　<h1>酒店搜索</h1>
　　<ul class="formUlBox">
　　　　<li>
　　　　　　<label>选择城市：</label>
　　　　　　<input type="text" class="txt a" data-type="city" />
　　　　</li>
　　　　<li>
　　　　　　<label>酒店星级：</label>
　　　　　　<input type="text" class="txt" data-type="star" />
　　　　</li>
　　　　<li>
　　　　　　<label>酒店位置：</label>
　　　　　　<input type="text" class="txt" data-type="area" />
　　　　</li>
　　　　<li>
　　　　　　<label>酒店名称：</label>
　　　　　　<input type="text" class="txt" data-type="hotel" />
　　　　</li>
　　　　<li>
　　　　　　<input type="submit" value="搜索" class="btn" />
　　　　</li>
　　</ul>
</div>
<div id='listDiv' class='listDivBox'></div>
</body>
<script src="http://www.cfaec.cn/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(function(){
　　var infoData = {
　　city:["北京","上海","深圳","广州","重庆","长沙","南京","武汉","珠海","杭州","三亚"],
　　star:["二星级","三星级","四星级","五星级"],
　　area:["福田区","罗湖区","南山区","盐田区","宝安区","龙岗区","光明新区","坪山新区"],
　　hotel:["七天连锁","速8","快捷","豪庭"]
};

var txtInput = $(".formUlBox .txt"),listDiv= $("#listDiv"),foucsInput;
txtInput.on('click',function(e){
　　var _this = $(this),_type = _this.attr('data-type'),strHtml = "",i=0,_data = infoData[_type],offset = _this.offset();
　　foucsInput = _this;
　　for(;i<_data.length;i++){
　　　　strHtml += "<a href='javascript:;'>"+_data[i]+"</a>";
　　}

　　listDiv.html(strHtml)
　　.css({"top":offset.top+_this.height(),"left":offset.left})
　　.children('a').css({width:(listDiv.width() / 3) -6})
　　.end().show();

　　e.stopPropagation();
});

listDiv.on('click','a',function(e){
　　foucsInput.val($(this).html());
　　listDiv.hide();
});

listDiv.on('click',function(e){
　　e.stopPropagation();
});

$(document).on('click',function(){
　　listDiv.hide();
});
})
</script>
</html>

转载于:https://www.cnblogs.com/huangmingcong/archive/2013/05/10/3070539.html

weixin_30302609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
机票酒店类型的搜索表单效果，

因为公司网站类型是预订机票酒店及各方面的票业务，导致很多地方都有都需要这个功能，面临网站以后的重新开发，特地为之后做准备，在网友“刀刀”的帮助下，把例子和大家分享下。效果图如下分享源码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/...
复制链接

扫一扫