Jquery Mobile - Проблемы с выбором даты - PullRequest
Новая
       1

Jquery Mobile - Проблемы с выбором даты

2 голосов
/ 06 сентября 2011

Так что я использую ввод Date Picker из Jquery Mobile и испытываю некоторые трудности с его корректным рендерингом. Я включил все необходимые файлы (http://dev.jtsage.com/jQM-DateBox/#/jQM-DateBox/demos/install.html), предоставленные командой JQM, и могу получить их для рендеринга при добавлении непосредственно в статический HTML: 

<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox"}'>

Однако я создаю форму динамически и добавляю этот фрагмент HTML на лету. Все остальные мои входные данные получают стили Jquery Mobile, за исключением следующего: 

$(form).html(formFields);               
var page = document.getElementById('page');
$(page).trigger('create');

formFields - это HTML-строка, которую я добавляю на страницу.

Может показаться, что на статической HTML-странице выше, когда страница загружается, JQM добавляет кучу вещей в этот код. Похоже, он не делает то же самое, когда я вызываю метод create. У кого-нибудь есть идеи, если есть что-то вокруг этого? Заранее спасибо.

UPDATE: Таким образом, с помощью полезного комментария, опубликованного ниже, может показаться, что, поскольку это не официальный ввод JQM, вызов метода 'create' не обновит этот ввод и не применит необходимые стили. Приведенный выше HTML-код - это именно то, что я создаю с помощью моего строителя строк. Проблема заключалась в освежении. Когда страница загружается, к вводу даты HTML добавляется куча лишних вещей. Вот как это выглядит в Firebug ... Кто-нибудь испытал это? 

<div class="ui-input-datebox ui-shadow-inset ui-corner-all ui-body-c">
  <input id="mydate" class="ui-input-text ui-body-null ui-body-x" type="text" data-   options="{'mode': 'calbox'}" data-role="datebox" name="mydate">
  <a class="ui-input-clear ui-btn ui-btn-up-c ui-btn-icon-notext ui-btn-corner-all ui-shadow" title="date picker" href="#" data-theme="c" style="vertical-align: middle; float: right;">
     <span class="ui-btn-inner ui-btn-corner-all">
       <span class="ui-btn-text">date picker</span>
       <span class="ui-icon ui-icon-grid ui-icon-shadow"></span>
     </span>
  </a>

Ответы [ 3 ]

1 голос
/ 22 марта 2012

Чтобы правильно отобразить JB Stage DateBox при динамической вставке HTML, выполните следующий код 

$('#mydate').textinput();
$('#mydate').datebox();
$('#mydate').datebox('hardreset');

Первая строка превращается в текстовый ввод JQM, а следующие 2 строки делают остальное

1 голос
/ 15 сентября 2011

Ладно, ребята, разобрались.

Оказывается, что к стилям не применяли даже после вызова метода create.Поэтому я обратился к хаку, который плавал по сети.По сути, я просто уничтожил всю форму и перестроил ее так: 

$('#page').page("destroy").page();

Страница - это имя панели содержимого, в которой была форма.Перезагрузка простая, как это.Надеюсь, это поможет некоторым из вас, ребята ...

0 голосов
/ 22 марта 2012

Стоит рассмотреть еще один сборщик дат - Mobi Pick, см. http://mobipick.sustainablepace.net/

...