<!DOCTYPE html>
<html>
<head><title>
仿格子微酒店触屏版html5手机wap旅游网站模板下载酒店正文-懒人模板【http//www.lanrenmb.com/yulexiuxian/lvyou/】
</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><meta content="yes" name="apple-mobile-web-app-capable" /><link href="styles/bootstrap.min.css" rel="stylesheet" /><link href="styles/NewGlobal.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/zepto.js"></script>
</head>
<body>
<div class="header">
<a href="Default.htm" class="home">
<span class="header-icon header-icon-home"></span>
<span class="header-name">主页</span>
</a>
<div class="title" id="titleString"></div>
<a href="javascript:history.go(-1);" class="back">
<span class="header-icon header-icon-return"></span>
<span class="header-name">返回</span>
</a>
</div>
<script type="text/javascript" src="http//gmu.baidu.com/src/extend/touch.js"></script><!--新版zepto合并版中不包括touch.js-->
<script type="text/javascript" src="http//gmu.baidu.com/src/extend/highlight.js"></script>
<script type="text/javascript" src="http//gmu.baidu.com/src/core/gmu.js"></script>
<script type="text/javascript" src="http//gmu.baidu.com/src/core/event.js"></script>
<script type="text/javascript" src="http//gmu.baidu.com/src/extend/parseTpl.js"></script>
<script type="text/javascript" src="http//gmu.baidu.com/src/core/widget.js"></script>
<script type="text/javascript" src="http//gmu.baidu.com/src/widget/calendar/calendar.js"></script>
<script type="text/javascript" src="http//gmu.baidu.com/src/widget/dialog/dialog.js"></script>
<link rel="stylesheet" type="text/css" href="http//gmu.baidu.com/assets/widget/calendar/calendar.css" />
<link rel="stylesheet" type="text/css" href="http//gmu.baidu.com/assets/widget/calendar/calendar.default.css" />
<link rel="stylesheet" type="text/css" href="http//gmu.baidu.com/assets/widget/dialog/dialog.css" />
<link rel="stylesheet" type="text/css" href="http//gmu.baidu.com/assets/widget/dialog/dialog.default.css" />
<style>
.section {
background: #f3f3f3;
font-size: 14px;
}
#datepicker_wrap {
overflow: hidden;
height: 0;
-webkit-transition: height 200ms ease-in-out;
background: #e1e1e1;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
#datepicker_wrap>div {
display: none;
padding: 5px 5px 25px 5px;
}
.filter {
padding:10px 10px 0px;
}
.filter:after {
content: '\0020';
clear: both;
display: block;
height: 0;
font-size: 0;
line-height: 0;
}
.filter a {
border: 1px solid #e1e1e1;
text-decoration: none;
color: #000;
padding: 5px 26px 5px 5px;
margin: 0 5px 0 0;
position: relative;
background: #fff;
}
.icon-down {
background-image: url("http//gmu.baidu.com/demo/assets/icons-36-black.png");
background-position: -216px 50%;
width:18px;
height: 18px;
display: inline-block;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
float: right;
margin-top: 10px;
}
.icon-down-up {
background-position: -180px 50%;
}
.filter a .ui-icon-down {
position: absolute;
top: 50%;
right: 5px;
background-image: url("http//gmu.baidu.com/demo/assets/icons-36-black.png");
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
width:18px;
height: 18px;
margin-top: -9px;
background-position: -216px 50%;
}
.filter a.ui-state-active, .filter a.ui-state-hover {
background: #fff;
}
.filter a.ui-state-active .ui-icon-down, .filter a.ui-state-hover .ui-icon-down {
background-position: -180px 50%;
}
.filter a.search {
float: right;
padding: 5px;
margin: 0;
}
.result {
padding:10px 15px;
text-align: left;
}
</style>
<div class="container">
<ul class="unstyled hotel-bar">
<li class="first">
<a href="#BookRoom" class="active">房型</a>
</li>
<li><a href="HotelInfo.aspx.html">简介</a></li>
<li><a href="#">地图</a></li>
<li><a href="Hotelreview.aspx.html">评论</a></li>
</ul>
<div id="BookRoom" class="tab-pane active fade in">
<div class="detail-address-bar">
<img alt="" src="images/location_icon.png">
<p>秀灵路55号（出入境管理局旁）</p>
</div>
<div id="datetab" class="detail-time-bar">
<img alt="" src="images/calendar.png">
<p>04月11日 - 04月12日</p>
<span class="icon-down"></span>
</div>
<form action="hotel.aspx" method="GET">
<div id="datebox" class="section none">
<div class="filter clearfix">
<p style="margin-bottom: 10px;display: block;">入住：<a id="datestart" href="javascript:void(0)"><span class="ui-icon-down"></span></a></p>
<br/>
<p> 离开：<a id="dateend" href="javascript:void(0)"><span class="ui-icon-down"></span></a></p>
</div>
<div id="datepicker_wrap">
<div id="dp_start">
<p>入住时间：</p>
<div id="datepicker_start"></div>
</div>
<div id="dp_end">
<p>离开时间：</p>
<div id="datepicker_end"></div>
</div>
</div>
<div class="result">
<input type="submit" class="btn" value="确定修改" />
<span class="btn" id="datecancel">取消</span>
</div>
<input id="id" name="id" type="hidden" value="5" />
<input id="CheckInDate" name="CheckInDate" type="hidden" value="2014-4-11" />
<input id="CheckOutDate" name="CheckOutDate" type="hidden" value="2014-4-12" />
</div>
</form>
<script type="text/javascript">
(function ($, undefined) {
$(function () { //dom ready
$('#titleString').text($(document)[0].title);
$('#datetab').click(function () {
$('#datebox').toggle();
$('.icon-down').toggleClass('icon-down-up');
});
$('#datecancel').click(function () {
$('#datebox').hide();
});
var open = null, today = new Date();
var beginday = '2014-4-11';
var endday = '2014-4-12';
//设置开始时间为今天
$('#datestart').html(beginday + '<span class="ui-icon-down"></span>');
//设置结束事件
$('#dateend').html(endday +
'<span class="ui-icon-down"></span>');
$('#datepicker_start').calendar({
//初始化开始时间的datepicker
date: $('#datestart').text(), //设置初始日期为文本内容
minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()), //设置最小日期为当月第一天，既上一月的不能选
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 25), //设置最大日期为结束日期，结束日期以后的天不能选
select: function (e, date, dateStr) { //当选中某个日期时。
var day1 = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
$('#datepicker_end').calendar('minDate', day1).calendar('refresh'); //将结束时间的datepick的最小日期设成所选日期
//收起datepicker
前端静态模板-手机网站-学生作业毕设实训素材.zip
版权申诉
32 浏览量
2022-04-07
22:11:03
上传
评论
收藏 391KB ZIP 举报
前端静态模板-手机网站-学生作业毕设实训素材.zip （46个子文件） 
手机网站 
HotelInfo.aspx.html 4KB HotelList.aspxcheckInDate.html 12KB Images 
coupon_icon7.png 4KB icon_reality.png 40KB icon_return.png 838B share-icon.png 16KB defaultimg.png 32KB calendar.png 4KB coupon_icon5.png 3KB location_icon.png 3KB icon_home.png 763B coupon_icon2.png 4KB coupon_icon4.png 4KB icon_weixin.png 2KB memberbg.png 2KB help 
2.jpg 24KB 1.jpg 30KB 3.jpg 29KB 5.jpg 38KB 4.jpg 23KB 0.jpg 20KB time_icon.png 4KB icon_gps2.png 994B coupon_icon6.png 5KB memberdefault.png 11KB coupon_icon3.png 4KB logo.png 5KB coupon_icon1.png 4KB GiftList.html 7KB Hotel.aspx.html 16KB login.html 4KB index.html 3KB CityList.html 10KB Hotel.aspxcheckInDate.html 16KB help Help.html 2KB HotelReview.aspx.html 8KB News.aspx.html 2KB Scripts 
jquery-1.7.2.min.js 93KB zepto.js 29KB bootstrap.min.js 28KB styles NewGlobal.css 17KB bootstrap.min.css 104KB Gift.aspx.html 5KB Activitys.html 4KB Member Default.aspx 152B MyOrder.aspx 152B资源评论
