Question

使用Adobe提供的模板离线练习他们的首发JQuery Mobile网站示例 http://www.adobe.com/devnet/dreamweaver/articles/dw-template-jqmobile.html

但我发现我似乎无法构建超过4页。我用内容制作了第五页，我得到了黑屏。我需要做些什么来解决这个问题？

Answer 1

您的HTML中可能有ab错误。

以下是adobe使用额外第五页构建的示例。将其复制到单个文件中并对其进行测试，所有js / css文件都是硬编码的，因此您无需担心：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>`enter code here`
        <link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
        <script src="http://www.maja-klajic.info/js/jquery-1.8.2.min.js" type="text/javascript"></script>       
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div data-role="page" id="page">
            <!-- The 'logo' DIV below was added to the default markup -->
            <div class="logo"></div>
            <div data-role="header" class="heading">
                <h1>Your Organization</h1>
            </div>
            <div data-role="content">   
                <ul data-role="listview" class="mainmenu">
                    <li><a href="#page2">Who We Are</a></li>
                    <li><a href="#page3">What We Do</a></li>
                    <li><a href="#page4">About Us</a></li>
                    <li><a href="#page5">Fift Page</a></li>                 
                </ul>       
            </div>
            <div data-role="footer">
                <h4>&copy;2011 &bull; Your Organization Name</h4>
            </div>
        </div>

        <div data-role="page" id="page2">
            <div data-role="header">
                <h1>Who We Are</h1>
            </div>
            <div data-role="content">   
                <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.</p>       
            </div>
            <div data-role="footer">
                <h4>&copy;2011 &bull; Your Organization Name</h4>
            </div>
        </div>

        <div data-role="page" id="page3">
            <div data-role="header">
                <h1>What We Do</h1>
            </div>
            <div data-role="content">
                <h2>Maecenas porta accumsan mauris</h2>
                <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam</p>
                <figure>
                    <img src="images/photo.jpg" alt="photo" width="120" />
                    <figcaption>Duis a eros lit ora tor quent per conu bia nos tra per.</figcaption>
                </figure>
                <p>Consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.</p>
                <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.</p>
            </div>
            <div data-role="footer">
                <h4>&copy;2011 &bull; Your Organization Name</h4>
            </div>
        </div>

        <div data-role="page" id="page4">
            <div data-role="header">
                <h1>About Us</h1>
            </div>
            <div data-role="content">   
                <p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis, rhoncus non, metus. Fusce neque dolor, adipiscing sed, consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed, suscipit eu, eros. Etiam ligula enim, tempor ut, blandit nec, mollis eu, lectus. Nam cursus. Vivamus iaculis. Aenean risus purus, pharetra in, blandit quis, gravida a, turpis. Donec nisl. Aenean eget mi. Fusce mattis est id diam. Phasellus faucibus interdum sapien. Duis quis nunc. Sed enim.</p>
            </div>
            <div data-role="footer">
                <h4>&copy;2011 &bull; Your Organization Name</h4>
            </div>
        </div>          

        <div data-role="page" id="page5">
            <div data-role="header">
                <h1>This is fifth page</h1>
            </div>
            <div data-role="content">   
                <p>This is fifth page</p>
            </div>
            <div data-role="footer">
                <h4>&copy;2011 &bull; Your Organization Name</h4>
            </div>
        </div>          
    </body>
</html>

jQuery Mobile-DW的可定制启动器设计 - 添加更多页面？

1 个答案: