jquery移动页面结构答案

【问题标题】：Jquery mobile page structurejquery移动页面结构
【发布时间】：2013-10-22 21:51:38
【问题描述】：

不久前我建立了一个 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 相当陌生，所以任何建议都会有所帮助。

【问题讨论】：

当用户在主页面以外的页面点击刷新时？如果是这样，以防万一，在head中添加JS和css链接。但是，刷新时应该转到主页或第一次访问的链接。你用的是什么版本的 jquery 和 JQM？

标签： php jquery jquery-mobile

【解决方案1】：

试试这个

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

它会在加载时对页面内所有添加的内容应用增强功能。

【讨论】：

我会在哪里添加这个？
进入您需要标记的页面上的文档就绪处理程序。
.ready() 不建议在 JQM 中使用。此外，JQM 会在加载页面时增强页面，如果页面没有得到增强，这意味着没有加载 JQM。