jQuery Mobile的：在頭箱中選擇

我有這個代碼

<div data-role="header" data-position="inline" data-theme="b"> 
    <h1>My Page</h1> 
    <select> 
     <option>Option 1</option> 
     <option>option 2</option> 
    </select> 
</div>

測試，但它不工作

編輯：

遺憾，因爲這個問題不是那麼清楚。使用上面的代碼，我在標題中有一個選擇框，但選擇框居中（在頁面標題下）。我想要的是，選擇放置在右側（就像頭內的按鈕）。

| [返回] --------- -----------標題[選擇框] |

來源

2011-07-04 Peacemoon

你看到了什麼/看不出到底是什麼？我把你的代碼放在一個jQuery Mobile頁面中，並且我在頁頭中得到了一個如預期的選擇字段。下面的代碼片段我使用，這確定檢查出在臺式機和移動Safari瀏覽器（iPad版）：

<body> 
    <div data-role="page" id="somepage" data-theme="c"> 
    <div data-role="header" data-position="inline" data-theme="b"> 
     <h1>My Page</h1> 
     <select> 
     <option>Option 1</option> 
     <option>option 2</option> 
     </select> 
    </div> 
    <!-- rest of page --> 
    </div> 
<body>

編輯我想你遇到的問題是h1當然是一個塊元素，依此是jQM運行其代碼後的select字段。如果檢查場一旦頁面是在WebKit瀏覽器渲染，你會看到，JQM應用額外的div之類的，這意味着選擇字段不能輕易駐留在同一線路頭。

根據該文件，你需要把它放在自己的div（所以JQM不會嘗試對其進行操作），然後自己造型與它的頭定製加價進行試驗。您希望實現的外觀最好是在構建帶有兩個鏈接的標題欄時完成的，但顯然這不適用於您，因爲第二個「按鈕」不是鏈接，它是select字段：

標題插件查找表頭容器的直接子，並自動設置在左按鈕槽和在右側的第二連桿的第一連桿。在本例中，'取消'按鈕將出現在左側插槽中，'保存'將根據源順序中的順序出現在右側插槽中。

你可以嘗試做這樣的事情來搞定它，但你需要測試你的應用程序中支持的設備（顯然把樣式放在一個類中，我只做了它這種方式，例如用途）：

<div data-role="header" data-position="inline" data-theme="b"> 
    <h1>My Page</h1> 
    <div data-role="fieldcontain" style="position: absolute; top: 0; right: 0; margin: 0; padding: 0"> 
    <select> 
     <option>Option 1</option> 
     <option>option 2</option> 
    </select> 
    </div> 
</div> 
...

來源

2011-07-04 09:18:39 Ben

我編輯我的職務，使問題更加清晰 – Peacemoon

我已經添加了一些編輯答案，以矇混-Y修復 – Ben

太好了，我在Android模擬器和Android設備測試，它看起來像我想要的。由於 – Peacemoon

如果你想用一個實際的選擇元素，在錨標記data-role="none"封裝它爲我工作。

例如

<div data-role="header"> 
    <a data-role="none"> 
     <select> 
      <option value="1">Option One</option> 
      <option value="2">Option Two</option> 
     </select> 
    </a> 
</div>

來源

2014-01-03 20:06:14 kappamaki

Rahhhhhhh，這並沒有幫助我的選擇，但它讓我發現數據角色=「無」。我非常憤怒，jquerymobile試圖改變我的代碼，沒有我問任何東西在世界各地添加任何東西！謝啦！！ – Yahel

jQuery Mobile的：在頭箱中選擇

回答

相關問題