jQuery Mobile的內容只在重裝

顯示我有一個包含以下內容的index.html的：jQuery Mobile的內容只在重裝

的index.html

<html> 
<head>...</head> 
<body> 
<div data-role="page" id="pageone"> 
    <div data-role="header"> 
     <div data-role="navbar"> 
      <ul> 
       <li><a href="#pagetwo" id="pagetwo">Page two</a> 
       </li> 
       <li><a href="#pagethree" id="pagethree">Page three</a> 
       </li> 
      </ul> 
     </div> 
    </div> 

<div data-role="page" id="pagetwo"> 
</div> 

<div data-role="page" id="pagethree"> 
    <div id="headerPageThree" data-role="header"> 
     <div data-role="main"> 
     <div id="anyDiv"></div> 
     </div> 
    </div> 
</div> 
<body> 
<html>

正如你看到的，在pagetwo和pagethree之間的index.html鏈接導航欄。

而且我有一個main.js

main.js

$(document).ready(function() { 
$('<select>').attr({'name': 'fuu','id': 'load-fuu', 
     'data-native-menu': 'false'}).appendTo('#headerPageThree'); 
     $('<option>').html('Load').appendTo('#load-fuu'); 
     $('select').selectmenu(); 
});

比方說，我打開index.html使用Chrome。 URL是

file:///C:/Users/index.html

然後我點擊導航欄中的「第三頁」。 URL是

file:///C:/Users/index.html#pagethree

問題是，像選擇菜單項目的樣式看起來很奇怪。例如它是透明的。我添加了比main.js示例中顯示的更多的東西，其中一些甚至沒有顯示。意思是沒有什麼應該是。

但最奇怪的是，如果我按F5在頁面上其中URL是

file:///C:/Users/index.html#pagethree

，那麼一切都是完美的。我不明白這一點。

按index.html上的F5和按index.html＃pagethree上的F5按壓有什麼區別？

任何人都可以幫忙嗎？

非常感謝。

來源

2015-06-03 ReyamOki

主題必須在元件上設置的，因爲它沒有被從父頁施加。我不完全知道爲什麼，雖然...

這可以通過將數據-theme屬性來完成，當您創建的選擇元素：

$(document).ready(function() { 
    $('<select>').attr(
    {'name': 'fuu','id': 'load-fuu', 
     'data-native-menu':'false', 
     'data-theme': 'a' 
    }).appendTo('#headerPageThree'); 
      $('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu'); 
    $('#load-fuu').selectmenu(); 
});

最後，如果你想，a codepen example.

編輯：關於需要選擇值的選項提出的觀點是有效的（儘管在我們添加數據主題之後它仍然會正常運行）

來源

2015-06-03 17:49:40 laughingpine

而不是常規的jQuery document.ready，使用jQuery Mobile事件，如pagecreate;

$(document).on("pagecreate","#pagethree", function(){ 
    $('<select>').attr({'name': 'fuu','id': 'load-fuu', 
     'data-native-menu': 'false'}).appendTo('#headerPageThree'); 
    $('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu'); 
    $('select').selectmenu(); 
});

如果您希望您的選項可選，請爲其賦予一個值屬性。

DEMO

來源

2015-06-03 17:36:28 ezanker

jQuery Mobile的內容只在重裝

回答

相關問題