jQuery mobile Datebox CSS加載不正確

我有一個簡單的使用jQuery移動框架開發的雙頁面網站。我需要使用Datebox插件來選擇時間。我的網站的兩個頁面都在相同的.php文件中，由正確分隔。jQuery mobile Datebox CSS加載不正確

我唯一的問題是，如果日期框存在於網頁的第一頁，它會正常加載，但在任何其他頁面中，它的圖標會混亂。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Home</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    <link href="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.css" rel="stylesheet" type="text/css"> 
    <script src="http://cdn.jtsage.com/jtsage-datebox/4.1.1/jtsage-datebox-4.1.1.jqm.min.js" type="text/javascript"></script> 


</head> 
<body> 

    <div data-role="page" id="index"> 
     <header data-role="header" data-position="fixed"> 
      <h1>Home</h1> 
     </header> 

     <div data-role="main" class="ui-content"> 
      <div class="ui-field-contain"> 
       <label for="datebox">Time (seconds)</label> 
       <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'> 
      </div> 
     </div> 

     <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#index" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">Home</a></li> 
        <li><a href="#onoff" class="ui-btn ui-icon-plus ui-btn-icon-left">ON/OFF</a></li> 
        <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li> 
        <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li> 
       </ul> 
      </div> 
     </footer> 
    </div> 

    <div data-role="page" id="onoff"> 
     <header data-role="header" data-position="fixed"> 
      <h1>ONOFF</h1> 
     </header> 

     <div data-role="main" class="ui-content"> 

      <div class="ui-field-contain"> 
       <label for="datebox">Time (seconds)</label> 
       <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'> 
      </div> 
     </div> 

     <footer data-role="footer" data-position="fixed" style="text-align:center;" class="ui-body-a"> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#index" class="ui-btn ui-icon-plus ui-btn-icon-left">Home</a></li> 
        <li><a href="#onoff" data-direction="reverse" class="ui-btn ui-icon-plus ui-btn-icon-left ui-btn-active ui-state-persist">ON/OFF</a></li> 
        <li><a href="#timer" class="ui-btn ui-icon-plus ui-btn-icon-left">Timer</a></li> 
        <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Scheduler</a></li> 
       </ul> 
      </div> 
     </footer> 

    </div> 

</body> 
</html>

以下圖像顯示了該問題。在頁面加載，與page-role="page"和id="index"第一個div被加載和預期datebox圖標的工作原理：

但是，如果我用頁腳導航欄ON/OFF標籤導航到第二頁，我得到這個奇怪的圖標放置：

請幫我弄清楚是怎麼回事錯在這裏。

來源

2017-04-09 user3889963

user3889963一針見血的頭部。

下載JQM for Datebox的源文件，然後在您的腦海中直接調用它們。

<script src="../jtsage-datebox.min.js" type="text/javascript"></script> 
<link href="../jtsage-datebox.min.css" rel="stylesheet">

此之前的問題表明存在與通過CDN Jquery Mobile DateBox plugin only working when linked directly to page

這裏使用插件一個問題是，它直接安裝的文件工作。

來源

2017-04-09 15:42:33

此答案僅供參考。 –

唯一命名是問題。

在這兩個頁面中，您使用相同的名稱調用日期框項目，因此只有第一個頁面的樣式正確。

只需將第二頁重命名爲datebox2，就可以解決問題。作爲用於搜索「datebox」的第一個唯一標識的標籤和樣式。

<div data-role="main" class="ui-content"> 
      <div class="ui-field-contain"> 
       <label for="datebox2">Time (seconds)</label> 
       <input type="text" data-role="datebox" data-options='{"mode":"calbox"}'> 
      </div> 
     </div>

來源

2017-04-09 14:28:22

這似乎不是問題所在。在更改= datebox2的標籤後，我仍然得到相同的輸出 – user3889963

@ user3889963這個答案是錯誤的，但我會建議Datebox字段的唯一命名，因爲您很快就會遇到問題，當試圖在JQM中定位日期框的值時。 –

嗯，我不知道這是爲什麼，但使用的，而不是在頭部的CDN聯繫本地文件使我能夠使用所有網頁datebox插件。用在這裏找到下載建設者生成的文件：

http://dev.jtsage.com/DateBox/builder/

來源

2017-04-09 14:59:11 user3889963

jQuery mobile Datebox CSS加載不正確

回答

相關問題