具有三态日颜色的jQuery移动日历
||
我正在寻找一个活动和预订系统。
我发现了堆栈溢出问题jQuery-移动日期选择器控件，其中显示了jquery-mobile-datebox和jQuery-Mobile-Themed-DatePicker。
我想显示一个日历，我从服务器得到的某些日期是
可用的
无法使用
保留的
触摸保留或可用日期时，我想显示时间-每天可能有多个时间。然后，用户可以单击一个时间来保留它，这将触发Ajax请求。
例如，jQuery UI datepicker具有
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-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(...)
}
);
没有找到相关结果
已邀请:
2 个回复
翱抹村
<!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><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>漂截嘘
$(\'.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 });，可以获取当前状态。 这样更好：$(\'.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(); });