jQuery Mobile 1.0:如何多次增强页面 [英] jQuery mobile 1.0: how to enhance page more than one time

问题描述

jQuery mobile 1.0

jQuery mobile 1.0

为了简单起见，我更改了页面的内容:

I change the content of the page, to put it simple:

//$page - is enhanced page.
$page.html('<div data-role="header">New Header</div>');
// I what it to be enhanced but $page.page(), $page.trigger('create'), $page.trigger('refresh') is not working 

根据docs'page()'使用一次，第二次将其忽略.那么，动态添加页面后增强页面元素的方法是什么?

According to docs 'page()' used once, the second time it is ignored. So what is the way to enhance page elements after dynamically added?

我知道如何增强列表视图"，但是其他元素呢?

I know how to enhance "listview" but what about other elements?

推荐答案

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

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').

这篇关于jQuery Mobile 1.0:如何多次增强页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！