Question

我在第一页<div id=child>的按钮点击时调用了第二页<div id = home>，并在两个页面中使用了jquery主题，但问题出现在第二页，没有第一页中的主题效果。我把css文件放在同一个文件夹中，它在第一页而不是第二页生效了吗？

任何人都可以解决问题，这样主题在第2页也有效吗？以下是我的代码

 <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="jquerybasic/jquerymobilecss.css" />
        <style>
            /* App custom styles */
        </style>

        <script src="jquerybasic/jquery.min.js" type="text/javascript">
        </script>
        <script src="jquerybasic/jquery.mobile-1.1.0.min.js" type="text/javascript">
        </script>
        <script type="text/javascript">
        $(document).ready(function() {
                $('#buttonid').click(function() {
                    $('#child').toggle();
                    $('#home').toggle();
                });
                $('#buttonchild').click(function() {
                        $('#child').toggle();
                        $('#home').toggle();
                });

                $('#next').click(function() {
                        $('#home').show();
                        $('#child').hide();
                });
                $('#prev').click(function() {
                        $('#home').hide();
                        $('#child').show();
                });



                $('#nextchild').click(function() {
                        $('#home').show();
                        $('#child').hide();
                });
                $('#prevchild').click(function() {
                        $('#home').hide();
                        $('#child').show();
                });
        });

        </script>
    </head>
    <body>
        <div data-role="page" id="home">
            <div data-theme="d" data-role="header">
                <h3>
                    The Grand Bhagavati
                </h3>
                <a data-role="button" id="next"  data-inline="true" data-transition="slide"  >
                    &lt;&lt;
                </a>
                <a data-role="button" id="prev"  data-inline="true" data-transition="fade" >
                    &gt;&gt;
                </a>
            </div>
            <div data-role="content">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput1">
                            User:
                        </label>
                        <input id="textinput1" type="text" />
                    </fieldset>
                </div>
                <input id="buttonid" data-theme="d" value="Login" type="button"  />
            </div>
            <div data-theme="d" data-role="footer" data-position="fixed" >
                <h3>
                    Page 1
                </h3>

                </div>
        </div>

        <div data-role="page" id="child">
            <div data-theme="d" data-role="header">
                <h3>
                    The Grand Bhagavati
                </h3>
                <a data-role="button" id="nextchild" data-inline="true" data-direction="reverse" data-transition="slide" >
                    &lt;&lt;
                </a>
                <a data-role="button" id="prevchild" data-inline="true" data-direction="reverse" data-transition="fade" >
                    &gt;&gt;
                </a>
            </div>
            <div data-role="content">

                        <label>
                            hi khushbu. welcome...!
                        </label>


                <input id="buttonchild" data-theme="d" value="Login" type="button"  class="ui-btn-hidden" aria-disabled="false" />
            </div>
            <div data-theme="d" data-role="footer" data-position="fixed" >
                <h3>
                    Page 2
                </h3>

                </div>
        </div>

        <script>
            //App custom javascript
        </script>
    </body>

Answer 1

好男孩：）

在您阅读文档时，您似乎已经跳过了使用新软件的一个相当重要的部分。

要在页面之间导航，您只需将其放在链接的href属性中：

<a data-role="button" href="#child">...</a>

jQuery Mobile将处理到下一个伪页面的过渡。以下是Linking Pages的文档：http://jquerymobile.com/demos/1.1.0/docs/pages/page-links.html

如果您想以编程方式执行此操作，那么您可以使用内部使用的$.mobile.changePage()。手动调用此函数（例如在按钮的click事件处理程序中）的优点是您可以为转换指定非默认选项：

$('#next').on('click', function () {
    $.mobile.changePage($('#child'), { transition : 'slide', reverse : true });
});

以下是$.mobile.changePage()的文档：http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

如果你想要滚动自己的过渡，那么比显示一个div并隐藏另一个div要复杂得多。您必须设置一些CSS类，使用CSS3（转换，转换，关键帧等）为转换设置动画。

最后，这是一个代码演示，我用一个有效的链接替换了标题中的链接：http://jsfiddle.net/MmKK4/

Css不在html </div>的第二个<div>标签中工作

1 个答案: