jQuery mobile 1.0
我改变了网页的内容,简单来说就是:
//$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
根据文档'page()'使用过一次,第二次被忽略。那么动态添加后增强页面元素的方法是什么?
我知道如何增强“listview”,但其他元素呢?
答案 0 :(得分:3)
尝试
$('#pageId').trigger('create');
文档:
增强新标记
页面插件调度pagecreate事件,大多数窗口小部件都使用它来自动初始化自己。只要 当引用widget插件脚本时,它会自动增强 它在页面上找到的小部件的任何实例。但是,如果您通过生成新标记客户端或加载内容 Ajax并将其注入页面,您可以触发create事件 处理其中包含的所有插件的自动初始化 新标记。这可以在任何元素(甚至是页面)上触发 div本身),为您节省了手动初始化每个插件的任务 (列表视图按钮,选择等)。
例如,如果加载了一个HTML标记块(比如一个登录表单) 通过Ajax,触发create事件自动转换 它包含的所有小部件(在这种情况下为输入和按钮) 增强版本。此方案的代码为:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
创建与刷新: 重要区别
请注意,create事件和刷新方法之间存在重要差异 一些小部件有。 create事件适合增强原始 包含一个或多个小部件的标记。刷新方法应该是 用于已经被操纵的现有(已经增强的)小部件 以编程方式,需要更新UI以匹配。例如,如果您有一个动态添加新页面的页面 页面后面带有
data-role=listview
属性的无序列表 创建,触发该列表的父元素上的创建 将其转换为listview样式的小部件。如果有更多列表项 然后以编程方式添加,调用listview的refresh方法 会将这些新列表项更新为增强状态并离开 现有的列表项目未受影响。
更新:
你能试试吗
$page.html('<div data-role="header">New Header</div>');
$("div:jqmData(role='header')").trigger('create');
答案 1 :(得分:2)
通常在初始化(增强)页面一次时,然后刷新它而不是尝试再次初始化它。
我没有尝试过立刻增强整个页面,我通常会调用每个小部件的刷新方法:
$('#my-listview-id').listview('refresh');
所以也许你也可以为page()
函数做到这一点:
$('#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的结构将有所不同,您将能够定位某些元素以更新诸如文本,图标,阴影等内容。
以下是初始化后的jQuery Mobile Header小部件示例:
<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>
请注意,如果您要更新按钮的图标或文本,可以在Button小部件中定位.ui-icon
或.ui-btn-text
:$('.ui-header').children('.ui-btn').find('.ui-text').text('my new button text')
。
答案 2 :(得分:2)
经过一段时间的努力,我终于找到了一种方法来欺骗jQuery Mobile重新增强:
$('#your-page').data({mobilePage: null}).page();
你不会在任何地方的文档中找到它,但是他们通过jQuery的mobilePage
检查附加到元素的.data()
,看看它是否已被增强。
我不知道这是否会产生副作用。它不适合我,但我使用骨干进行路由。您可以先尝试存储mobilePage
的值,然后再使用hack,然后再设置mobilePage
。
我要使用的另一个选项是found here:
$('#your-page').trigger('pagecreate');
有人评论说会导致后退按钮中断。
如果您只更新页面的内容部分,则$('#your-page').trigger('create');
将有效。