以下是 jquery带日历多条件筛选特效js代码 的示例演示效果:
部分效果截图:
HTML代码(index.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" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>jquery带日历多条件筛选特效</title>
<link rel="stylesheet" type="text/css" href="style/list.css"/>
<link rel="stylesheet" type="text/css" href="style/manhuaDate.1.0.css"/>
<script type="text/javascript" src="JS/jquery-1.5.1.js"></script><!--日期控件，JS库版本不能过高否则tab会失效-->
<script type="text/javascript" src="JS/datejs.js"></script>
<script type="text/javascript" src="JS/ui.tab.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tab = new $.fn.tab({
tabList:"#demo1 .ui-tab-container .ui-tab-list li",
contentList:"#demo1 .ui-tab-container .ui-tab-content"
});
var tab = new $.fn.tab({
tabList:"#demo1 .ui-tab-container .ui-tab-list2 li",
contentList:"#demo1 .ui-tab-container .ui-tab-content2"
});
});
</script>
<script type="text/javascript">
$(function (){
$("input.mh_date").datejs({
Event : "click",//可选
Left : 0,//弹出时间停靠的左边位置
Top : -16,//弹出时间停靠的顶部边位置
fuhao : "-",//日期连接符默认为-
isTime : false,//是否开启时间值默认为false
beginY : 2010,//年份的开始默认为1949
endY :2015//年份的结束默认为2049
});
});
</script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#selectList").find(".more").toggle(function(){
$(this).addClass("more_bg");
$(".more-none").show()
},function(){
$(this).removeClass("more_bg");
$(".more-none").hide()
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var taboy_box=$(".lefttable-list");
taboy_box.children("tbody").find("tr:gt(2)").hide();
$(".leftbox-morea").toggle(function(){
$(this).parent().prev().find("tr").show();
$(this).addClass("more-i")
},function(){
$(this).removeClass("more-i");
$(this).parent().prev().children("tbody").find("tr:gt(2)").hide();
}
);
});
</script>
</head>
<body>
<br>
<div class="w1200">
<div class="list-screen">
<div class="screen-top" style="position:relative;"><span>目的地<input id="txtadress" type="text"/></span><span>入住<input type="text" class="mh_date" readonly="true" /></span><span>退房<input type="text" class="mh_date" readonly="true" /></span><span>酒店位置<input type="text" class="ju-adress" /></span><span>酒店名称<input type="text" class="ju-name" /></span><a href="#" id="submit-btn"/>搜索</a></div>
<div style="padding:10px 30px 10px 10px;"><div class="screen-address">
<div class="list-tab">
<div id="demo1" class="clearfix">
<div class="jiud-name">酒店位置</div>
<div class="ui-tab-container">
<ul class="clearfix ui-tab-list">
<li class="ui-tab-active">景点</li>
<li>交通枢纽</li>
<li>地铁周边</li>
<li>行政区</li>
</ul>
<div class="ui-tab-bd">
<div class="ui-tab-content clearfix">
<ul class="clearfix ui-tab-list2">
<li class="ui-tab-active">景点</li>
<li>交通枢纽</li>
</ul>
<div class="ui-tab-bd">
<div class="ui-tab-content2 clearfix"><p>
<label>
<input name="tabrad1" type="radio" value="" />
琶洲展馆</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
淘金/环市东 </label>
</p></div>
<div class="ui-tab-content2 clearfix" style="display:none">22222</div>
</div>
</div>
<div class="ui-tab-content clearfix" style="display:none">
<p>
<label>
<input name="tabrad1" type="radio" value="" />
琶洲展馆</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
淘金/环市东 </label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
广州东站/天河北</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
北京路/海珠广场</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
珠江新城/跑马场 </label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
长隆景区/广州南站</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
沙面/上下九步行</label>
</p>
</div>
<div class="ui-tab-content clearfix" style="display:none">
<p>
<label>
<input name="tabrad1" type="radio" value="" />
琶洲展馆</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
淘金/环市东 </label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
广州东站/天河北</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
北京路/海珠广场</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
珠江新城/跑马场 </label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
长隆景区/广州南站</label>
</p>
<p>
<label>
<input name="tabrad1" type="radio" value="" />
沙面/上下九步行</label>
</p>
</div>
<div class="ui-tab-content clearfix" style="display:none">
<p>
<input name="tabrad1" type="radio" value="" />
琶洲展馆</p>
<p>
<input name="tabrad1" type="radio" value="" />
淘金/环市东 </p>
<p>
<input name="tabrad1" type="radio" value="" />
广州东站/天河北</p>
<p>
<input name="tabrad1" type="radio" value="" />
北京路/海珠广场</p>
<p>
<input name="tabrad1" type="radio" value="" />
珠江新城/跑马场 </p>
<p>
<input name="tabrad1" type="radio" value="" />
长隆景区/广州南站</p>
<p>
<input name="tabrad1" type="radio" value="" />
沙面/上下九步行</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="screen-term">
<div class="selectNumberScreen">
<div id="selectList" class="screenBox screenBackground">
<dl class="listIndex" attr="价格范围">
<dt>酒店价格</dt>
<dd>
<label><a href="javascript:;" values2="" values1="" attrval="不限">不限</a></label>
<label>
<input name="radio2" type="radio" value="" />
<a href="javascript:;" values2="99" values1="1" attrval="1-99">100元以下</a></label>
<label>
<input name="radio2" type="radio" value="" />
<a href="javascript:;" values2="300" values1="100" attrval="100-300">100-300元 </a></label>
<label>
<input name="radio2" type="radio" value="" />
<a href="javascript:;" values2="600" values1="300" attrval="300-600">300-600元</a></label>
<label>
<input name="radio2" type="radio" value="" />
<a href="javascript:;" values2="1500" values1="600" attrval="5000以上">600-1500元</a></label>
<div class="custom"><span>自定义</span>
<input name="" type="text" id="custext1"/>
-
<input name="" type="text" id="custext2"/>
<input name="" type="button" id="cusbtn"/>
</div>
</dd>
</dl>
<dl class=" listIndex" attr="terminal_os_s">
<dt>酒店星级</dt>
<dd>
<label><a href="javascript:;" values2="" values1="" attrval="不限">不限</a> </label>
<label>
<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
<a href="javascript:;" values2="" values1="" attrval="android"> 五星/豪华</a> </label>
<label>
<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
<a href="javascript:;" values2="" values1="" attrval="symbian">四星/高档</a></label>
<label>
<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
<a href="javascript:;" values2="" values1="" attrval="百度易平台">三星/舒适</a></label>
</dd>
</dl>
<dl class="listIndex" attr="terminal_brand_s">
<dt>主题风格</dt>
<dd data-more=true>
<label><a href="javascript:;" values2="" values1="" attrval="不限">不限</a></label>
<label>
<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
<a href="javascript:;" values2="" values1="" attrval="小米">客栈</a></label>
<label>
<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
<a href="javascript:;" values2="" values1="" attrval="华为">精品酒店</a> </label>
<label>
<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
<a href="javascript:;" values2="" values1="" attrval="lenovo">情侣酒店</a> </label>
<label>
<input name="checkbox2" type="checkbox" value="" autocomplete="off"/>
<a href="javascript:;" values2="" values1="" attrval="zte中兴">园林庭院</a></label>
<span class="more"><em class="open"></em>更多</span>
</dd>
</dl>
<dl class="listIndex more-none" attr="terminal_brand_s" style="display:none;border:none">
<dt style='visibility:hidden'>主题风格</dt>
<dd >
<label style='visibility:hidden'><a href="javascript:;" values2="" values1="" attrval="不限">不限</a></label>
<form action="" method="get">
<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;" values2="" values1="" attrval="华为">精品酒店2</a></label>
<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;" values2="" values1="" attrval="华为">精品酒店3</a> </label>
<label><input name="checkbox2" type="checkbox" value="" /><a href="javascript:;" values2="" values1="" attrval="华为">精品酒店4</a> </label>
</form>
</dl>
</div>
</div>
</div>
</div>
<div class="hasBeenSelected clearfix"><span id="time-num"><font>208</font>家酒店</span>
<div style="float:right;" class="eliminateCriteria">【清空全部】 </div>
<dl>
<dt>已选条件：</dt>
<dd style="DISPLAY: none" class=clearDd>
<div class=clearList></div>
</dl>
</div>
<script type="text/javascript" src="JS/shaixuan.js"></script>
</div>
</div>
</body>
</html>
JS代码(datejs.js):
// JavaScript Document$(function(){
$.fn.datejs = function(options){
var defaults ={
Event:"click",//插件绑定的响应事件Left:0,//弹出时间停靠的左边位置Top:22,//弹出时间停靠的上边位置fuhao:"-",//日期之间的连接符号isTime:false,//是否开启时间值默认为falsebeginY:1949,//年份的开始默认为1949endY:2049//年份的结束默认为2049}
;
var options = $.extend(defaults,options);
var stc;
if($("#calender").length<=0){
$("body").prepend("<div class='calender'><div class='calenderContent'><div class='calenderTable'><div class='getyear'><a class='preMonth' id='preMonth'>上一月</a><select id='year'></select><select id='month'></select><a class='nextMonth' id='nextMonth'>下一月</a></div><div class='tablebg'><table id='calender' class='calendertb' cellpadding='0' cellspacing='1'><tr bgcolor='#D6D6D6'><th class='weekend'>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class='weekend noborder'>六</th></tr><tr><td class='weekend2'></td><td></td><td></td><td></td><td></td><td></td><td class='weekend2 noborder'></td></tr><tr><td class='weekend2'></td><td></td><td></td><td></td><td></td><td></td><td class='weekend2 noborder'></td></tr><tr><td class='weekend2'></td><td></td><td></td><td></td><td></td><td></td><td class='weekend2 noborder'></td></tr><tr><td class='weekend2'></td><td></td><td></td><td></td><td></td><td></td><td class='weekend2 noborder'></td></tr><tr><td class='weekend2'></td><td></td><td></td><td></td><td></td><td></td><td class='weekend2'></td></tr><tr><td class='weekend2'></td><td></td><td></td><td></td><td></td><td></td><td class='weekend2'></td></tr></table></div></div></div></div>");
}
var $mhInput = $(this);
var isToday = true;
//是否为今天默认为是var date = new Date();
//获得时间对象var nowYear = date.getFullYear();
//获得当前年份var nowMonth = date.getMonth() + 1;
//获得当前月份var today = date.getDate();
//获得当前天数var nowWeek = new Date(nowYear,nowMonth - 1,1).getDay();
//获得当前星期var nowLastday = getMonthNum(nowMonth,nowYear);
//获得最后一天//年、月下拉框的初始化for(var i=options.beginY;
i<=options.endY;
i++){
$("<option value='"+i+"'>"+i+"年</option>").appendTo($("#year"));
}
for(var i=1;
i<=12;
i++){
$("<option value='"+i+"'>"+i+"月</option>").appendTo($("#month"));
}
ManhuaDate(nowYear,nowMonth,nowWeek,nowLastday);
//初始化为当前日期//上一月绑定点击事件$("#preMonth").click(function(){
isToday = false;
var year = parseInt($("#year").val());
var month = parseInt($("#month").val());
month = month - 1;
if (month < 1){
month = 12;
year = year - 1;
}
if(nowYear==year && nowMonth==month){
isToday = true;
}
var week = new Date(year,month - 1,1).getDay();
var lastday = getMonthNum(month,year);
ManhuaDate(year,month,week,lastday);
}
);
//年下拉框的改变事件$("#year").change(function(){
isToday = false;
var year = parseInt($(this).val());
var month = parseInt($("#month").val());
if(nowYear==year && nowMonth==month){
isToday = true;
}
var week = new Date(year,month - 1,1).getDay();
var lastday = getMonthNum(month,year);
ManhuaDate(year,month,week,lastday);
}
);
//月下拉框的改变事件$("#month").change(function(){
isToday = false;
var year = parseInt($("#year").val());
var month = parseInt($(this).val());
if(nowYear==year && nowMonth==month){
isToday = true;
}
var week = new Date(year,month - 1,1).getDay();
var lastday = getMonthNum(month,year);
ManhuaDate(year,month,week,lastday);
}
);
//下一个月的点击事件 $("#nextMonth").click(function(){
isToday = false;
var year = parseInt($("#year").val());
var month = parseInt($("#month").val());
month = parseInt(month) + 1;
if (parseInt(month) > 12){
month = 1;
year = parseInt(year) + 1;
}
if(nowYear==year && nowMonth==month){
isToday = true;
}
var week = new Date(year,month - 1,1).getDay();
var lastday = getMonthNum(month,year);
ManhuaDate(year,month,week,lastday);
}
);
//初始化日历 function ManhuaDate(year,month,week,lastday){
$("#year").val(year);
$("#month").val(month)var table = document.getElementById("calender");
var n = 1;
for (var j = 0;
j < week;
j++){
table.rows[1].cells[j].innerHTML = "
"}
for (var j = week;
j < 7;
j++){
if (n == today && isToday){
table.rows[1].cells[j].className="tdtoday";
}
else{
table.rows[1].cells[j].className="";
}
table.rows[1].cells[j].innerHTML = n;
n++;
}
for (var i = 2;
i < 7;
i++){
for (j = 0;
j < 7;
j++){
if (n > lastday){
table.rows[i].cells[j].innerHTML = " "}
else{
if (n == today && isToday){
table.rows[i].cells[j].className="tdtoday";
}
else{
table.rows[i].cells[j].className="";
}
table.rows[i].cells[j].innerHTML = n;
n++;
}
}
}
}
//获得月份的天数function getMonthNum(month,year){
month = month - 1;
var LeapYear = ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? true:false;
var monthNum;
switch (parseInt(month)){
case 0:case 2:case 4:case 6:case 7:case 9:case 11:monthNum = 31;
break;
case 3:case 5:case 8:case 10:monthNum = 30;
break;
case 1:monthNum = LeapYear ? 29:28;
}
return monthNum;
}
//每一列的悬挂事件改变当前样式$("#calender td:not(.tdtoday)").hover(function(){
$(this).addClass("hover")}
,function(){
$(this).removeClass("hover");
}
);
//点击时间列表事件$("#calender td").die().live("click",function(){
var dv = $(this).html();
if (dv != "
"){
var str = "";
if (options.isTime){
var nd = new Date();
str = $("#year").val() + options.fuhao + $("#month").val() + options.fuhao + dv + " "+ nd.getHours()+":"+nd.getMinutes()+":"+nd.getSeconds();
}
else{
str = $("#year").val() + options.fuhao + $("#month").val() + options.fuhao + dv;
}
$("input.dateVisited").val(str);
$("input.dateVisited").removeClass('dateVisited')$(".calender").hide();
}
}
);
//文本框绑定事件$mhInput.live(options.Event,function(e){
$(this).addClass("dateVisited");
if(stc){
clearTimeout(stc);
//清除定时器}
var iof = $(this).offset();
$(".calender").css({
"left":iof.left+options.Left,"top":iof.top+options.Top}
);
$(".calender").show();
}
);
//当鼠标离开控件上面的时候延迟3秒关闭$(".calender").live("mouseleave",function(){
stc = setTimeout(function (){
$(".calender").hide();
clearTimeout(stc);
}
,3000);
}
);
//当鼠标移到控件上面的时候显示$(".calender").live("mousemove",function(){
if(stc){
clearTimeout(stc);
//清除定时器}
$(this).show();
}
);
//点击年选择下拉框的时候清除定时器阻止控件层关闭$("#year").die().live("click",function(){
if(stc){
clearTimeout(stc);
//清除定时器}
}
);
//点击月选择下拉框的时候清除定时器阻止控件层关闭$("#month").die().live("click",function(){
if(stc){
clearTimeout(stc);
//清除定时器}
}
);
}
;
}
);
CSS代码(header.css):
/* CSS Document */
@import url(common.css);.top_box{width:1200px;height:78px;margin:0 auto;overflow:hidden;}
.top_logo{width:250px;height:78px;background:url(../images/top_ico.jpg) no-repeat top;}
.top_logo a{width:250px;height:78px;display:block;}
.top_gd{width:90px;height:78px;background:url(../images/top_ico.jpg) no-repeat 0 -156px;}
.top_tel{width:250px;height:78px;background:url(../images/top_ico.jpg) no-repeat 0 -78px;}
.top_menu_box{width:100%;height:40px;background:#0d93cc;}
.top_menu_box ul{width:1200px;height:40px;margin:0 auto;display:block;}
.top_menu_box li{line-height:40px;}
.top_menu_box li.menu_r{width:2px;height:40px;float:left;background:url(../images/menu_r_2x22.gif) no-repeat 0 9px;}
.top_menu_box li a:link,.top_menu_box li a:visited{font-size:16px;color:#fff;padding:0 30px;font-family:"微软雅黑";display:block;}
.top_menu_box li a:hover,.top_menu_box li a:active{font-size:16px;color:#fff;padding:0 30px;font-family:"微软雅黑";background:#0f7aa8;text-decoration:none}
.top_menu_box li.cur{height:37px;line-height:34px;border-top:3px solid #f96e03;background:#0f7aa8;}
.top_menu_box li.member{background:#fa7003;}
CSS代码(manhuaDate.1.0.css):
*{padding:0;margin:0}
.calender{width:200px;margin:40px auto 0;top:0;left:0;border:4px #D6D6D6 solid;background:#EBEBEB;position:absolute;display:none;z-index:999;}
.calendertb{width:100%;}
.calendertb td{width:25px;height:25px;border:1px #CCCCCC solid;text-align:center;vertical-align:middle;cursor:pointer;font-size:14px;font-weight:bold;}
.calendertb td.hover,.calendertb td.weekendhover{background:#D6D6D6;}
.calendertb th{width:25px;height:20px;border:1px #CCCCCC solid;text-align:center;vertical-align:middle;cursor:pointer;color:#979797;}
.tdtoday{background:#0080FF;color:#fff;width:25px;height:25px;border:1px #CCCCCC solid;text-align:center;vertical-align:middle;cursor:pointer;font-size:14px;font-weight:bold;}
.getyear{height:35px;line-height:35px;width:100%;text-align:center;}
.preMonth{font-size:12px;font-weight:bold;cursor:pointer;margin-right:5px;color:#0080FF;}
.nextMonth{font-size:12px;font-weight:bold;cursor:pointer;margin-left:5px;color:#0080FF;}
.mh_date{width:150px;}
.zhezhao{width:100%;height:100%;position:fixed;z-index:998;background:#fff;filter:alpha(opacity=10);opacity:0.1;display:none;}
分享到QQ
分享到微博
微信扫一扫
