Как визуализировать загрузку страницы поста jQuery Mobile UI Object - PullRequest
Новая
       11

Как визуализировать загрузку страницы поста jQuery Mobile UI Object

5 голосов
/ 12 января 2011

У меня есть некоторый HTML-код, который я генерирую с помощью JS на стороне клиента.Я все еще хотел бы применить стиль и функциональность jQuery Mobile UI к этим объектам.Кажется, я не могу понять, как ...

Скажем, я сгенерировал: 

<div data-role="fieldcontain">
    <label for="select-choice-1" class="select">Choose shipping method:</label>
    <select name="select-choice-1" id="select-choice-1">
        <option value="standard">Standard: 7 day</option>
        <option value="rush">Rush: 3 days</option>
        <option value="express">Express: next day</option>
        <option value="overnight">Overnight</option>
    </select>
</div>

И хочу отрендерить его с помощью jQuery Mobile UI внутри страницы ... как быодин делает это?

Я знаю, что со стандартным пользовательским интерфейсом jQuery мне просто нужно позвонить в следующем формате: 

$("#select-choice-1").buttonset();

Есть ли что-то подобное для пользовательского интерфейса jQuery Mobile?

Ответы [ 2 ]

2 голосов
/ 13 января 2011

ОБНОВЛЕНИЕ!

Да! Новая реализация с событием только что приземлился!

http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/

Теперь в бета2 будет происходить событие create, которое сработает на элементе, что приведет к его визуализации.

Я обновлю FAQ, когда выйдет бета2.

Найдите самый верхний элемент, который вы добавляете в DOM, и наберите на нем .page(). На самом деле этот вопрос дублирует множество других вопросов, помеченных как jquery-mobile, поэтому я создал учебное руководство, чтобы не описывать его снова каждый раз.

Смотрите первое сообщение здесь: http://jquerymobiledictionary.dyndns.org/faq.html

2 голосов
/ 13 января 2011

Если вызывается при создании страницы 

$('#page').live('pagecreate',function(event){
    $('#elem_container').page();
});

вы идете на рекурсивную петлю. Я написал свою собственную функцию extension (), чтобы решить эту проблему. 

$('#page').live('pagecreate',function(event){
    enhance($('#elem_container'));
});

Функция в основном просто сокращена, код ниже ... 

function enhance(dis){
    dis.find( "[type='radio'], [type='checkbox']" ).checkboxradio();
    dis.find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" ).not( ".ui-nojs" ).button();
    dis.find( "input, textarea" ).not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" ).textinput();
    dis.find( "input, select" ).filter( "[data-role='slider'], [data-type='range']" ).slider();
    dis.find( "select:not([data-role='slider'])" ).selectmenu();
}

Предыдущее сообщение:

После поиска по мобильному файлу jQuery я наконец-то понял ... довольно просто ... 

$("#select-choice-3").selectmenu();

А вот кусок кода, в котором я это выкопал ... 

_enchanceControls: function() {
    var o = this.options;
    // degrade inputs to avoid poorly implemented native functionality
    this.element.find( "input" ).each(function() {
        var type = this.getAttribute( "type" );
        if ( o.degradeInputs[ type ] ) {
            $( this ).replaceWith(
                $( "<div>" ).html( $(this).clone() ).html()
                    .replace( /type="([a-zA-Z]+)"/, "data-type='$1'" ) );
        }
    });

    // enchance form controls
    this.element
        .find( "[type='radio'], [type='checkbox']" )
        .checkboxradio();

    this.element
        .find( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .not( ".ui-nojs" )
        .button();

    this.element
        .find( "input, textarea" )
        .not( "[type='radio'], [type='checkbox'], button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
        .textinput();

    this.element
        .find( "input, select" )
        .filter( "[data-role='slider'], [data-type='range']" )
        .slider();

    this.element
        .find( "select:not([data-role='slider'])" )
        .selectmenu();
}
...