1

我有一个多页 jquery 移动 html。

第一个页面加载完美，但是当我按 a 到 href 第二个 data-role="page" id 加载时，它看起来不错，但看起来 css 正在运行或刚刚损坏。

当我尝试将有问题的（第二个）页面放在不同的文件中时，它加载得很好。

我没有使用 ajax 或服务器端进行此测试。

我只使用了一个 css，但即使我尝试了 2 个分离它也没有用，我错过了什么？

<!DOCTYPE html> 
<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="/assets/jquery.mobile-1.3.0.min.css" />
  <script src="/assets/jquery.mobile-1.3.0.min.js"></script>

  <script src="/assets/jquery-1.8.2.min.js"></script>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">

  <link href="/assets/mobile.css" rel="stylesheet" type="text/css"> 

  <script type="text/javascript" src="/assets/modernizr.min.js"></script>    

  <script type="text/javascript" src="/assets/underscore.min.js"></script>
  <script type="text/javascript" src="/assets/backbone.min.js"></script>
  <script type="text/javascript" src="/assets/prettify.min.js"></script>

  <script type="text/javascript" src="/assets/mobiscroll.custom-2.4.5.min.js"></script>

  <head>

    <style>
      p.small {line-height:90%;}
    </style>
    <%= stylesheet_link_tag 'navigation.css' %>

    <link rel="stylesheet" href="/assets/jquery.mobile-1.3.0.min.css" />

    <script src="/assets/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="/assets/modernizr.min.js"></script>    
    <script type="text/javascript" src="/assets/underscore.min.js"></script>
    <script type="text/javascript" src="/assets/backbone.min.js"></script>
    <script type="text/javascript" src="/assets/prettify.min.js"></script>
  </head>
  <body style='background-image: url("/assets/app/background.jpg");background-size: 100% auto; margin:0px;'>

  <div data-role="page" id="navigation">
    <div id="mygames"><img src="/assets/app/mygames.png" id="mygamesimg"></div>
    <div class="create"><a href="#createPool" data-ajax="false"><img src="/assets/app/create.png" id="createimg"></a></div>
    <div class="profile"><img src="/assets/app/center.png" class="profileimg" id="userImage" onclick="log();"></div>
    <div class="find"><img src="/assets/app/find.png" id="findimg" onclick="gotoFind();"></div>
    <div style="clear:both;"></div>
    <div id="lower">
      <div class="leaderboard">
        <img src="/assets/app/leaderboard.png" id="leaderboardimg">
      </div>
      <div class="management">
        <img src="/assets/app/management.png" id="managementimg">
      </div>
    </div>
    <div style="clear:both;"></div>

    <div id="bottom">
      <div id="upcoming">
        <div id="container">
          <div class="box1">  
            <span id="date">
              <p class="small">
                <span id="day">16</span>
                <span id="month">/7
                  <br>&nbsp thursday
                </span> 
              </p>  
            </span>
          </div>

          <div class="box4">
            <div class="vertical-line1">
            </div>
          </div>

          <div class="box2">
            <p class="small">
              <span id="plrnum">&nbsp8</span>
              <br><span id="players"> players</span>
            </p>
          </div>

          <div class="box5"><div class="vertical-line1"></div></div>

          <div class="box3">      
            <span id="hour">18:00&nbsp</span>
            <span><br><span id="add">Park Hayarkon<br>Tel-Aviv</span>
          </div>
          <span class="stretch"></span>

        </div>
      </div>



      <div id="status">

        <div id="imin" onclick="setImIn(7);">I'm in!</div>
        <div id="imout" onclick="setImOut(7);">I'm out</div>

        <div style="clear:both;"></div>

        <div class='container3'>
          <div class='right3'>
            <div id="out" onclick="setImOut(7);"></div>
          </div>
          <div class='left3'>
            <div id="in" onclick="setImIn(7);"></div>
          </div>
          <div class='middle3'>
            <div id="horizontal-line"></div>
          </div>
        </div>
      </div>
    </div>
  </div> <!-- end of navigation page-->


  <div data-role="page" id="createPool">
  <div data-role="header">
        <%= stylesheet_link_tag 'navigation.css' %>
</div>
    <div class="createBarBG">
      <div id="datePicker" onclick="aler();"><img src="/assets/app/dateicon.png" id="datePickerImg"><br>Set date<br><br></div>
      <div class="createline1"></div>
      <div id="timePicker"><img src="/assets/app/timeicon.png" id="timePickerImg"><br>Set time<br><br></div>
      <div class="createline2"></div>
      <div id="locPicker"><img src="/assets/app/locicon.png" id="locPickerImg"><br>Set location<br><br></div>
      <div style="clear:both;"></div>
      <div class="createhorizontal"></div>
    </div>
<div style="margin-top:10px;">
    <div style="float:left; width:28%; text-align:right; margin-right: 5%;">Private</div>
    <div id="privat" style="float:left;"></div>
    <div style="float:right; width:28%; text-align:left;margin-left: 5%;">Public</div>
   </div>


  </div>
  </body>
</html>

清除并重新排列顶部的所有负载后，它看起来像这样：

<!DOCTYPE html> 
<html>
<head>

  <meta charset="UTF-8" name="viewport" content="initial-scale=1, maximum-scale=1">
  <title>Gamepool Mobile</title>
  <script src="/assets/jquery-1.8.2.min.js"></script>

  <script src="/assets/jquery.mobile-1.3.0.min.js"></script>

<link rel="stylesheet" href="/assets/jquery.mobile-1.3.0.min.css" />



<%= stylesheet_link_tag 'navigation.css' %>


  </head>
  <body style='background-image: url("/assets/app/background.jpg");background-size: 100% auto; margin:0px;'>

仍然没有运气

4

0 回答 0