jQuery Mobile 动态内容插入

发布于 2024-12-22 21:28:39 字数 1023 浏览 0 评论 0原文

好的，有人能帮我弄清楚为什么下面代码中的“test”li 不可见吗？我检查了 live dom，元素似乎正在处理：

<!DOCTYPE HTML> 
<html> 
<head> 

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script>
  $(document).ready(function(){
      $('<div data-role="content" class="content"><ul data-role="listview" data-inset="true"><li><a href="#im?at=animals">test</a></li></ul></div>').appendTo("#home").page();
      $.mobile.changePage("#home", {transition: "none"});
  });
  </script>
</head> 

<body> 
<div id="home" data-role="page"> 
</div> 
</body> 
</html>

提前致谢。

原文

Ok, would someone help me figure out why the "test" li in the following code isn't visible? I inspected the live dom and the elements do seem to be getting processed:

<!DOCTYPE HTML> 
<html> 
<head> 

  <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
  <script>
  $(document).ready(function(){
      $('<div data-role="content" class="content"><ul data-role="listview" data-inset="true"><li><a href="#im?at=animals">test</a></li></ul></div>').appendTo("#home").page();
      $.mobile.changePage("#home", {transition: "none"});
  });
  </script>
</head> 

<body> 
<div id="home" data-role="page"> 
</div> 
</body> 
</html>

Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

神经大条 2024-12-29 21:28:39

对changePage 的调用不起作用，因为默认情况下您只有一个可见/活动的页面。
您可以通过触发 create 事件来强制活动页面更新。

$('<div data-role="content" class="content"><ul data-role="listview" data-inset="true"><li><a href="#im?at=animals">test</a></li></ul></div>').appendTo("#home");
$.mobile.changePage("#home", {transition: "none"});  
$.mobile.activePage.trigger('create');

The call to changePage doesn't work because you only have a single page which is visible/active by default.
You can force the active page to update by triggering the create event.

$('<div data-role="content" class="content"><ul data-role="listview" data-inset="true"><li><a href="#im?at=animals">test</a></li></ul></div>').appendTo("#home");
$.mobile.changePage("#home", {transition: "none"});  
$.mobile.activePage.trigger('create');

回复收藏 0 原文

∝单色的世界 2024-12-29 21:28:39

下面的元素将 display 属性设置为 none 并且隐藏了其同级元素：

<div data-role="content" class="content ui-page ui-body-c ui-content" tabindex="0" role="main">

CSS 规则：

.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display: none;
border: 0;
}

The element below has display property set to none and it hides its siblings:

<div data-role="content" class="content ui-page ui-body-c ui-content" tabindex="0" role="main">

The CSS rule:

.ui-mobile [data-role="page"], .ui-mobile [data-role="dialog"], .ui-page {
top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display: none;
border: 0;
}

回复收藏 0 原文

~没有更多了~