Применяйте jquery (мобильные) классы CSS программно после рендеринга - PullRequest
Новая
       19

Применяйте jquery (мобильные) классы CSS программно после рендеринга

3 голосов
/ 08 апреля 2011

jquery mobile автоматически применяет css и некоторые html для элементов на странице, основываясь на том, какие атрибуты data- находятся на них при загрузке страницы.

IЯ вытягиваю некоторый html-контент через ajax-вызов, но он появляется на странице после того, как произошел рендеринг js jQuery Mobile, и поэтому не получает много классов CSS.

Можно ли просто вызватьjs и попросить, чтобы рендеринг был применен только к моему новому html-контенту?

ДО 

<div id="someDiv">
    <ul data-role="listview" data-theme="b" data-inset="true">          
            <li>
                <a href="#">
                    <h3>
                        Some title
                    </h3>
                    <p>
                        Some text
                    </p>
                </a>
            </li>
    </ul>
</div>

ПОСЛЕ 

<div id="someDiv">
    <ul data-role="listview" data-theme="b" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">          
        <li data-theme="b" class="ui-btn ui-btn-icon-right ui-li ui-corner-top ui-corner-bottom ui-btn-up-b">
            <div class="ui-btn-inner ui-li ui-corner-top ui-corner-bottom">
                <div class="ui-btn-text">
                    <a href="#" class="ui-link-inherit">
                        <h3 class="ui-li-heading">
                            Some title
                        </h3>
                        <p class="ui-li-desc">
                            Some text
                        </p>
                    </a>
                </div>
                <span class="ui-icon ui-icon-arrow-r"></span>
            </div>
        </li>
    </ul>
</div>

Ответы [ 3 ]

2 голосов
/ 08 апреля 2011

Подключите .page() к вашему вызову AJAX

Пример: 

var parm = '123';

function loadPage(page){    
    $.ajax({
        url: 'page.php?parm='+value,
        type: 'POST',
        error : function (){ document.title='error'; },
        success: function (data) {                  
            $('#placeholder').html(data).page();
        }
    });
    // Scrolls to the top of the page
    $.mobile.silentScroll(0);
}

HTML 

<div name="placeholder" id="placeholder"><!-- This is the placeholder --></div>
2 голосов
/ 08 апреля 2011

После просмотра jquery.mobile-1.0a4.1.js и чтения этой замечательной статьи , объясняющей использование виджета, ответ был прост:

Существует существующий виджет mobile.listview, которыйприменяет рендеринг к спискам. 

$.widget( "mobile.listview", $.mobile.widget, {

});

Примените это непосредственно к html.Важно нацелиться на уль . 

$("div#someDiv ul").listview();

Вот полный пример 

function hijack(form) {
    $("div#someDiv").html("");
    $("div#someDiv").addClass('loading');

    $.ajax({
        url: form.action,
        type: form.method,
        dataType: "html",
        data: $(form).serialize(),
        success: function(data) {
            $("div#someDiv").removeClass('loading');
            $("div#someDiv").html(data);

            //apply rendering of jquery mobile styles via listview widget
            $("div#someDiv ul").listview();
        }
    });
}
0 голосов
/ 08 апреля 2011

Связыватель событий .live () (http://api.jquery.com/live/) может быть тем, что вы ищете.

...