Мобильный календарь jQuery с 3-дневными цветами дня - PullRequest
Новая
       7

Мобильный календарь jQuery с 3-дневными цветами дня

10 голосов
/ 15 июня 2011

Я смотрю на создание системы событий и резервирования.

Я нашел вопрос переполнения стека jQuery - элемент управления выбора даты на мобильном устройстве , который показывает jquery-mobile-datebox и jQuery-Mobile-Themed-DatePicker .

Я хочу отобразить календарь, в котором определенные даты, которые я получаю с сервера,

  1. доступны
  2. недоступно
  3. зарезервировано

При касании зарезервированной или доступной даты я хочу показать время - может быть несколько раз в день.Затем пользователь может щелкнуть по времени, чтобы зарезервировать его, что могло бы вызвать запрос Ajax.

jQuery UI datepicker, например, имеет 

 onSelect: function(date, inst) {

Из того, что я вижу в приведенном вышесборщики, что мне нужно, не всегда доступны.Прежде чем я сам начну их взламывать:

  1. Какой из них лучше всего подойдет для того, что я хочу?
  2. Возможно, есть лучшие, которые уже служат моим потребностям?

ОБНОВЛЕНИЕ:

Firebug дал мне

<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(...)
  }
);

ОБНОВЛЕНИЕ: ПРИМЕЧАНИЕ. Когда я нажимаю, календарь меняет дату, полностью перезагружая календарь.Возможно, мне нужно остановить это: (

Ответы [ 2 ]

5 голосов
/ 25 июня 2011

Как лучше всего переключаться между тремя классами и каждый раз сохранять состояние?

Что-то вроде: 

$('.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/

4 голосов
/ 23 июня 2011

Исходя из того, что сказал Дж.Т. Сэйдж, я подумал, что поиграю с 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>

UPDATE

Полагаю, механизм 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>
...