5

我尝试使用 jQuery Mobile 链接虚拟页面，但我有两个问题：

  • 第一次加载页面时，没有应用 CSS。
  • 当我选择一个页面并想切换到另一个页面后，我注意到每次经过第 1 页。

这是我的例子。

代码 ：

            var nbrButton = 3;
            $(document).ready(function(){
                for(i = 1;i <= nbrButton;i++) {

                    $("body").append('<div id="p'+i+'" data-role="page" class="pages"><div data-role="content">Page'+i+'</br><a data-role="button" rel="internal" href="#p1"  data-inline="true">1</a><a data-role="button" rel="internal" href="#p2"  data-inline="true">2</a><a data-role="button" rel="internal" href="#p3"  data-inline="true">3</a></div></div>');

                }
                $("#p1").show();

            });

你能告诉我问题是什么，或者是否有更好的方法来做到这一点。

谢谢你。

4

3 回答 3

2

除非您至少有一个现有的，否则您不能动态创建新的 jQuery Mobile 页面（可以，但该页面不会有样式）。这里有一个解决方法，您可以创建一个空的 jQuery 移动页面并使用它来创建一个新页面。

这是一个工作示例：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>        
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script>
                $(document).on('pageshow', '#index', function(){       
                    $('<div>').attr({'data-role':'page','id':'second'}).appendTo('body');
                    $('<div>').attr({'data-role':'header','id':'second-header'}).append('<h3>Header Title</h3>').appendTo('#second');
                    $.mobile.changePage("#second");
                });    
    </script>
</head>
<body>
    <div data-role="page" id="index">

    </div>  
</body>
</html>

现在您应该使用第一个隐藏页面的 pageshow 页面事件来创建新的动态页面。创建页面后，只需使用更改页面来显示第一个可见页面。

于 2013-03-21T14:52:02.903 回答
2

更新

我也删除data-rel="internal"了链接。

回答

我已经完成了以下操作。

代替

$('#p1').show();

我加了这个

$.mobile.changePage( '#p1', { allowSamePageTransition: true });

它将刷新 Page-1p1以重新加载样式。

工作示例。

于 2013-03-21T15:02:03.910 回答
-1

要应用 CSS 样式，只需$("#p1").trigger('create');在最后一行 添加$("#p1").show();

于 2013-07-11T07:46:21.517 回答