【问题标题】:jQuery Mobile Collapsible with nested Listview does not display correctly带有嵌套 Listview 的 jQuery Mobile Collapsible 无法正确显示
【发布时间】:2013-08-13 13:14:23
【问题描述】:

我是 jQueryMobile 的新手,遇到了一个我无法单独解决的问题。

我有一个非常大的 HTML 表单(约 100 个字段)。为了提高可用性,表单被分成 4 个部分,分别位于 4 个 JQM 页面上。在每个页面上,我都有相同的菜单,其中包含一个显示用户的可折叠集。如果您点击一个用户,您可以看到每个用户的报告(即列表视图)。

$(document).ready - 事件我正在调用load_users 函数以从数据库中检索所有用户及其报告。有了这些数据,我建立了可折叠和列表视图,最后我打电话 $(".listview:visible").listview().listview("refresh"); $(".menu:visible").collapsibleset("refresh"); 正确显示可折叠和列表视图。因为菜单是同时建立在所有四个页面上的,所以我不得不添加 :visible-pseudoclass。

现在当我向数据库中插入一个新用户时,就会出现问题。插入工作正常。之后,我从菜单中删除所有元素并再次调用load_users() 以再次填充菜单。但之前有效的结果是一个没有预期样式的普通列表。

谁能告诉我如何让 JQM 使我的可折叠和列表视图正确显示?

【问题讨论】:

  • 第一次创建列表视图时调用.listview() 方法(就其本身而言,刷新方法是不必要的),之后当您只是更新它时,您应该是only 调用它的刷新方法 (.listview('refresh'))。
  • @jack 因为他再次重新插入整个列表视图,他将需要调用将重新创建小部件的 .listview() 构造函数。如果他只是单独更新 li 的 .listview('refresh') 就可以了。
  • @DalSoft 我最初了解到他正在清空列表视图并重新插入元素,但重新阅读他的问题看起来他正在重新创建整个列表视图。
  • DalSoft 是对的。我删除了整个可折叠和嵌套的列表视图。这样我就可以随时调用 load_clients 而不必担心用户是否被插入、删除或更新。
  • 不要使用.ready()。为了增强可折叠集使用.collapsibleset().trigger('create');

标签: jquery css html jquery-mobile


【解决方案1】:

当您在 jQuery Mobile 中手动添加 html 时,您需要告诉它重新执行在页面创建期间完成的增强功能。

为此调用.listview() 构造函数,它将重新创建小部件,而不是仅刷新的.listview('refresh')。还要确保在重新创建任何标记时添加 data-role 属性。

最后不要使用 $(document).ready 它会导致 JQM 导航出现问题,而是使用 $('#mypageid').on('pageinit', function(){});

http://api.jquerymobile.com/category/events/

【讨论】:

  • 如果跨页面使用 .listview() 和/或 .collapsible('refresh') 似乎无法正常工作。我更改了代码,以便仅在活动页面上创建可折叠和列表视图。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-08-27
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多