Jquery移动页面结构

时间:2013-10-22 21:51:39

标签: php jquery jquery-mobile

我不久前建立了一个jquery移动网站,最近我一直在扩展它并注意到性能问题。我相信这是因为我使用多页设置构建了网站,其中一个php文件包含以下页面:

ALL_PAGES.PHP

    <html>
    <head>
    /* external css and js files */
    </head>
    <body>

     <div date-role="page" id="main">
          <div class="page_link">
              page 1
          </div> 

          <div class="page_link">
              page 2
          </div> 

          <div class="page_link">
              page 3
          </div>

    </div>


    <div date-role="page" id="page 1">
          <div class="page_link">
              main
          </div>     

          <div class="page_link">
              page 2
          </div> 

          <div class="page_link">
              page 3
          </div>

    </div>

    <div date-role="page" id="page 2">

          <div class="page_link">
              main
          </div>     

          <div class="page_link">
              page 1
          </div>


          <div class="page_link">
              page 3
          </div>

    </div>

    <div date-role="page" id="page 3">

          <div class="page_link">
              main
          </div> 

          <div class="page_link">
              page 1
          </div> 

          <div class="page_link">
              page 2
          </div>


    </div>

    </body>

    </html>

我想在一个php文件中脱离这个多页面设置,然后转到一个设置,其中每个页面都是一个单独的php文件。为了实现这一点,我从每个页面获取了html并将其移动到自己的php页面。然后我添加了href链接来替换我用于“page_link”类的mobile.change()函数。

MAIN.PHP

 <html>
    <head>
     external css and js files
    </head>
    <body>
        <div date-role="page" id="page 1">
              <a href="/main.php">
                  main
              </a>        

              <a href="/page_2.php">
                  page 2
              </a> 

              <a href="/page_3.php">
                  page 3
              </a>

        </div>


        </body>

    </html>

PAGE_1.PHP

        <div date-role="page" id="page 1">
              <a href="/main.php">
                  main
              </a>        

              <a href="/page_2.php">
                  page 2
              </a> 

              <a href="/page_3.php">
                  page 3
              </a>

        </div>

PAGE_2.PHP

        <div date-role="page" id="page 2">
              <a href="/main.php">
                  main
              </a>            

              <a href="/page_1.php">
                  page 1
              </a> 

              <a href="/page_3.php">
                  page 3
              </a>

        </div>

PAGE_3.PHP

        <div date-role="page" id="page 3">
              <a href="/main.php">
                  main
              </a>            

              <a href="/page_1.php">
                  page 1
              </a> 

              <a href="/page_2.php">
                  page 2
              </a>

        </div>

除非用户点击浏览器中的刷新按钮,否则网站工作正常。发生这种情况时,每个页面都会失去对主页上任何外部css和js文件的访问权限。我对JQM相当新,所以任何建议都会有所帮助。

1 个答案:

答案 0 :(得分:0)

试试这个

$("#whicheverPage").trigger("pagecreate");

加载后,它将对页面中所有添加的内容应用增强功能。