0

我在第<div id=child>1 页的按钮单击时调用了第 2 页，<div id = home>并在两个页面中都使用了 jquery 主题，但问题出在第 2 页，没有像第 1 页那样的主题效果。我已将 css 文件放在同一个文件夹中，它在第一页而不是在第二页生效？

任何人都可以解决这个问题，让主题在第二页也有效果吗？下面是我的代码

 <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>
4

1 回答 1

2

好的男孩:)

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

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

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

jQuery Mobile 将处理到下一个伪页面的转换。这是文档：http Linking Pages: //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 });
});

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

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

  • 最后，这是您的代码演示，我用一个有效的链接替换了标题中的链接：http: //jsfiddle.net/MmKK4/
于 2012-04-21T16:18:10.163 回答