我正在考虑创建一个事件和预订系统。
我找到了Stack;溢出问题jQuery-移动日期选择器控件,显示jQuery移动日期框和jQuery移动主题日期选择器。
我想显示一个日历,其中我从服务器获得的某些日期是
- 可用
- 不可用
- 保留
当一个预定或可用的日期被触摸时,我想显示时间——每天可以有不止一次。然后,用户可以点击一个时间来预订它,这将满足Ajax请求。
例如,jQuery UI日期选择器具有
onSelect: function(date, inst) {
从我在上述拾荒者身上看到的情况来看,我所需要的并不是现成的。在我自己开始破解它们之前:
- 哪一个最适合我想要的
- 有没有更好的产品已经满足了我的需求
更新:
萤火虫给了我
<div class="ui-datebox-griddate ui-corner-all ui-btn-up-e" data-date="25" data-theme="e">25</div>
其中ui-btn-up-e可以从-e改变。
现在我需要找出数据主题是否也需要更改
$('.ui-datebox-griddate').click(function () {
alert($(this).attr("class"));
}
切换三个类并每次保存状态的最佳方式是什么?
$('.ui-datebox-griddate').toggle(
function () {
$(this).????? // change ui-btn-up-? to ui-btn-up-a
$.get(...)
},
function () {
$(this).????? // change ui-btn-up-a to ui-btn-up-b
$.get(...)
},
function () {
$(this).????? // change ui-btn-up-b to ui-btn-up-c
$.get(...)
}
);
更新:注意:当我点击时,日历会更改日期,完全重新加载日历。也许我需要停止:(
切换三个类并每次保存状态的最佳方式是什么?
类似于:
$('.ui-datebox-griddate').click(function (e) {
var $this = $(this);
var cycle = ["ui-btn-up-a", "ui-btn-up-b", "ui-btn-up-c"];
if (typeof $this.data("ui-btn-cycle") == "undefined" ) {
this.className = this.className.replace(/ui-btn-up-./, cycle[0]);
$this.data("ui-btn-cycle", cycle[0]);
}
for (var i=0; i<cycle.length; i++) {
if ( $this.hasClass(cycle[i]) ) {
$this.removeClass(cycle[i]).addClass(cycle[i % cycle.length]);
$this.data("ui-btn-cycle", [i % cycle.length]);
break;
}
}
$.get( ... );
e.preventDefault() // stop default click behaviour
});
这可以循环通过任意数量的类。当前状态将通过调用相应元素上的.data("ui-btn-cycle")
而可用。
这甚至更好:
$('.ui-datebox-griddate')
.each(function () {
var cycle = ["ui-btn-up-a", "ui-btn-up-b", "ui-btn-up-c"];
$(this).data("ui-btn-cycle", cycle);
this.className = this.className.replace(/ui-btn-up-./, cycle[0]);
})
.click(function (e) {
var cycle = $(this).data("ui-btn-cycle");
$(this).removeClass(cycle[0]).addClass(cycle[1]);
cycle.push(cycle.shift());
e.preventDefault();
});
在各个元件上,当前状态将始终是.data("ui-btn-cycle")[0]
。请在此处查看它的工作情况:http://jsfiddle.net/Tomalak/mAH4n/
根据J.T.Sage的说法,我想我应该玩一下jQuery Mobile Calendar。我想我有一些东西可以扩展以满足您的要求。我不确定多色主题在多大程度上是可能的(如果没有广泛的修改)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQueryMobile - DateBox Demos</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css" rel="stylesheet" />
<!-- NOTE: Script load order is significant! -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$( document ).bind( "mobileinit", function(){ $.mobile.page.prototype.options.degradeInputs.date = 'text'; });
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript">
$('#page').live('pagecreate', function(event) {
$('#mydate').bind('change', function () {
alert($(this).val());
});
});
</script>
</head>
<body>
<div id="page" data-role="page">
<div data-role="content">
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "calHighToday": false, "calHighPicked": false, "useInline": true, "useInlineHideInput": true, "highDates": ["2011-06-25", "2011-06-27", "2011-07-04"]}'></input>
</div>
</div>
</html>
更新
我认为可以完全绕过highDates机制,并将个别日期作为唯一目标。该插件维护一个上次选择日期的JavaScript Date对象(如果没有选择任何日期,则为今天),因此应该可以获取当前月份并迭代所有匹配数据,适当地更新当前月份的匹配日期(例如,用数据/状态感知的方法替换下面的setColours方法)。
<script type="text/javascript">
$('#page').live('pagecreate', function(event) {
$('#mydate').bind('change', function () {
//alert($(this).val());
alert($('#mydate').data('datebox').theDate);
});
setColours();
$('#mydate').bind('datebox', function (e, pressed) {
setColours();
});
$('.ui-datebox-gridplus, .ui-datebox-gridminus').bind('vclick', function(){
// To handle changing months
setColours();
//alert($('#mydate').data('datebox').theDate);
});
function setColours(){
$('div.ui-datebox-griddate[data-date=25][data-theme]').css({"background-color":"red", "background-image":"none", "color" : "white"});
$('div.ui-datebox-griddate[data-date=26][data-theme]').css({"background-color":"green", "background-image":"none", "color" : "white"});
$('div.ui-datebox-griddate[data-date=27][data-theme]').css({"background-color":"blue", "background-image":"none", "color" : "white"});
}
});
</script>