jQuery Mobile 工具栏 refresh() 方法

概述

在 jQuery Mobile 中，工具栏是一种常用的 UI 组件，用于显示导航，工具等内容。refresh() 是 jQuery Mobile 工具栏中的一个方法，可以在 DOM 结构发生变化的时候重新渲染工具栏，使其适应新的结构。

语法

$( ".ui-toolbar" ).toolbar( "refresh" )

参数

该方法不需要传递任何参数。

返回值

该方法没有返回值。

示例

假设我们有一个简单的工具栏：

<div data-role="header">
  <div data-role="toolbar">
    <h1>My App</h1>
    <a href="#" data-icon="gear" class="ui-btn-right">Settings</a>
  </div>
</div>

现在我们想在某个事件触发后动态添加一个按钮到工具栏中。但是，只是添加按钮到 DOM 中是不够的，我们还需要调用 refresh() 方法重新渲染工具栏：

$(document).on('pagecreate', function(){
  $( ".ui-toolbar" ).append( "<a href='#' data-icon='plus' class='ui-btn-right'>New</a>" ).toolbar( "refresh" );
});

此时我们可以看到，页面上已经成功添加了一个新按钮。

注意事项

• refresh() 方法必须被调用，才能使新增或删除的组件生效。
• refresh() 方法只会重新渲染工具栏组件本身，不会影响到其父组件或其它组件。
• refresh() 方法只有在 DOM 结构发生变化的时候才需要调用，否则会造成不必要的性能损耗。

总结

refresh() 方法是 jQuery Mobile 工具栏中一个非常有用的方法，可以在动态修改 DOM 结构的时候重新渲染工具栏，使页面保持良好的交互体验。