jQuery Mobile, live (метод 'pageinit', function () для темы данных - PullRequest
Новая
       1

jQuery Mobile, live (метод 'pageinit', function () для темы данных

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

В моем нижнем колонтитуле я написал эту функцию ... 

    jQuery('#page').live('pageinit', function() {
$('.widget ul').attr('data-inset', 'true');
$('.widget ul').attr('data-theme', 'd');
$('.widget ul').attr('data-dividertheme', 'b');
$('.widget ul').attr('data-role', 'listview');
$('.widget ul').listview();
$('a.post-edit-link').attr('data-inline', 'true');
$('a.post-edit-link').attr('data-role', 'button');
$('a.post-edit-link').button();
$('#commentform').attr('data-theme', 'e'); ...

Итак, как применить data-theme в последней строке?Что это за метод, как listview или button?

Мне также интересно, как применить 'widget ul' к первому атрибуту ...

$ ('.widget ul: first ')

не работает.

Спасибо за помощь!

С уважением,

V.

Ответы [ 2 ]

2 голосов
/ 01 марта 2012

.widget ul:first выберет первый элемент ul, являющийся потомком элемента .widget.Если вы хотите выбрать первый элемент списка в ul, то вам нужно: .widget ul li:first.

Сами формы не инициализируются jQuery Mobile, поэтому вместо ориентации на форму вам нужно нацелить наопределенные виджеты ввода и их инициализация.

Чтобы инициализировать группу элементов, вы можете выбрать их все и вызвать .trigger('create') для них: 

$('#commentform').find('input, textarea').trigger('create');

Это становится немного сложнее, когда вы хотите обновитьвиджеты, а не инициализировать их: 

$('#commentform').find('input[data-type="slider"]').slider('refresh').end()
                 .find('input[type="text]').textinput('refresh').end()
                 .find('input[type="checkbox"], input[type="radio"]').checkboxradio('refresh');

Также вы можете оптимизировать свой код, связывая вызовы функций вместо повторного выбора одного и того же элемента (элементов) несколько раз: 

$('.widget ul').attr('data-inset', 'true')
               .attr('data-theme', 'd')
               .attr('data-dividertheme', 'b')
               .attr('data-role', 'listview')
               .listview();

$('a.post-edit-link').attr('data-inline', 'true')
                     .attr('data-role', 'button')
                     .button();

Или выможет передать объект в .attr(), чтобы установить все атрибуты в одном вызове функции: 

$('.widget ul').attr({
                   'data-inset'        : true,
                   'data-theme'        : 'd',
                   'data-dividertheme' : 'b',
                   'data-role'         : 'listview'
               }).listview();

$('a.post-edit-link').attr({
                         'data-inline' : true,
                         'data-role'   : 'button'
                     }).button();
0 голосов
/ 01 марта 2012

Не уверен, почему дополнение к форме комментариев не работает ... 

jQuery('#page').live('pageinit', function() {
   var ulList = $('.widget ul'), aTag = $('a.post-edit-link')
   ulList.attr('data-inset', 'true');
   ulList.attr('data-theme', 'd');
   ulList.attr('data-dividertheme', 'b');
    ulList.attr('data-role', 'listview');
   ulList.listview();
   aTag.attr('data-inline', 'true');
   aTag.attr('data-role', 'button');
   aTag.button();
   $('#commentform').attr('data-theme', 'e'); ...

попробуйте сначала (причина в том, что вы не хотите каждый раз анализировать DOM для этого объекта jQuery, вместо этого сохраняйте его в памяти, это значительно сэкономит время обработки) ... теперь попробуйте это для вопрос выбора: 

$('.widget').first('ul');
...