Fatal编程技术网
  • php/
  • Php Jquery移动页面结构

Php Jquery移动页面结构

php jquery jquery-mobile

Php Jquery移动页面结构,php,jquery,jquery-mobile,Php,Jquery,Jquery Mobile,不久前我建立了一个jquery移动站点，最近我一直在扩展它，并注意到性能问题。我相信这是因为我使用多页面设置构建了网站，其中单个php文件包含以下页面： 所有页面.PHP <html> <head> /* external css and js files */ </head> <body> <div date-role="page" id="main"> <

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

所有页面.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>

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

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

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

        <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文件*/
第1页
第2页
第3页
主要的
第2页
第3页
主要的
第1页
第3页
主要的
第1页
第2页
我想脱离一个php文件上的多页设置，转到一个每个页面都是单独的php文件的设置。为了实现这一点，我从每个页面获取html并将其移动到自己的php页面。然后，我添加了href links来替换我用于“page\u link”类的mobile.change（）函数

MAIN.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>

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

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

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

        <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文件
PAGE_1.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>

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

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

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

        <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>
PAGE_2.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>

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

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

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

        <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>
PAGE_3.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>

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

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

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

        <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的新手，所以任何建议都会很有帮助

试试这个

$("#whicheverPage").trigger("pagecreate");
加载时，它将对页面中所有添加的内容应用增强功能。

当用户在除主屏幕以外的页面上单击“刷新”时？如果是这样，以防万一，在head中添加JS和css链接。但是，刷新时应转到主页或第一次访问的链接。您使用的是什么版本的jquery和JQM？我将在哪里将其添加到需要标记的页面上的文档就绪处理程序中。
.ready（）
不建议在JQM中使用。此外，JQM增强了加载时的页面，如果页面没有增强，这意味着JQM没有加载。