且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

jQuery Mobile 1.0:如何多次增强页面

更新时间:2023-12-02 11:01:04

通常,一次初始化(增强)页面后,您便会刷新它,而不是尝试再次对其进行初始化.

Generally when you initialize (enhance) a page once, you then refresh it instead of trying to initialize it again.

我没有试图一次增强整个页面,通常我会调用每个小部件的刷新方法:

I have not tried to enhance a whole page at once, I normally call each widget's refresh method:

$('#my-listview-id').listview('refresh');

所以也许您也可以对page()函数执行此操作:

So perhaps you can do that for the page() function as well:

$('#my-page-id').page('refresh');

更新

我在动态创建页面的文档( http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic.html ):

    // Pages are lazily enhanced. We call page() on the page
    // element to make sure it is always enhanced before we
    // attempt to enhance the listview markup we just injected.
    // Subsequent calls to page() are ignored since a page/widget
    // can only be enhanced once.

更新

因此,您在这里所做的工作将覆盖所有jQuery Mobile样式,但是您不必这样做.使用开发人员工具,检查初始化的标题小部件(或您可能要更新的任何小部件)的HTML结构. HTML的结构将有所不同,您将可以定位某些元素来更新诸如文本,图标,阴影等之类的内容.

Update

So what you're doing there is overwriting all the jQuery Mobile styles, but you don't have to be doing that. With your developer tools, inspect the HTML structure of an initialized header widget (or whatever widget you may want to update). The structure of the HTML will be different and you will be able to target certain elements to update things like: text, icons, shadows, etc.

这是初始化后的jQuery Mobile Header小部件示例:

Here is an example jQuery Mobile Header widget after initialization:

<div data-role="header" data-theme="f" class="ui-header ui-bar-f" role="banner">
    <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Content formatting</h1>
    <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home ui-btn ui-btn-up-f ui-btn-icon-notext ui-btn-corner-all ui-shadow" title="Home" data-theme="f">
        <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
            <span class="ui-btn-text">Home</span>
            <span class="ui-icon ui-icon-home ui-icon-shadow"></span>
        </span>
    </a>
</div>

请注意,如果要更新按钮的图标或其文本,可以在按钮"小部件内将.ui-icon.ui-btn-text定位为:$('.ui-header').children('.ui-btn').find('.ui-text').text('my new button text').

Notice that if you want to update the icon for the button, or it's text, you can target .ui-icon or .ui-btn-text inside the Button widget: $('.ui-header').children('.ui-btn').find('.ui-text').text('my new button text').