頁眉/頁腳中的JQueryMobile分組按鈕

我在JQueryMobile網站上看到了關於如何將頁眉/頁腳中的鏈接分組在一起的文檔。我還看到了一些文檔，可以將鏈接專門放置在標題標籤左側和/或右側的空間中。我還沒有看到關於如何將它們合併頁眉/頁腳中的JQueryMobile分組按鈕

我想基本上就是任何文件被

<div data-role="header"> 
    <a href="#" data-icon="gear">left 1</a> 
    <a href="#" data-icon="gear">left 2</a> 
    <h1>Page Title</h1> 
    <a href="#" data-icon="gear">right 1</a> 
    <a href="#" data-icon="gear">right 2</a> 
    <a href="#" data-icon="gear">right 3</a> 
</div>

併爲顯示爲

[left 1][left 2]   Page Title   [right 1][right 2][right 3]

我已經試過包裝在一個div的鏈接，使用浮動（添加類ui-btn-left/right也顯示工作），但錨標記保持原樣，框架定義的樣式從不應用（我所看到的只是常規鏈接，沒有花哨的按鈕）

有人可以告訴我，如果我錯過了一個屬性？或者如果有一個我可以使用的容器類將不會阻止按鈕應用新的標記？

編輯： 上面的代碼將目前輸出

[left 1]   Page Title   [left 2] 
[right 1][right 2][right 3]

來源

2011-09-20 rlemon

我發現的唯一解決方案是物理寫出按鈕所需的標記並將其放置在'float'容器中。我不喜歡編寫所有額外的html .. – rlemon

這應該開箱即用。你可以嘗試將'href'屬性設置爲有效的URL而不是'＃'嗎？這可能是工具包不改變鏈接的原因。 –

看到我上面的更新。注意：改變'href'屬性什麼都不做。:(:) – rlemon

解決方案：

使用的包裝容器以固定的位置向左或右對齊（我用的是類ui-btn-[left/right]），然後鏈接強行把標記與data-role="button"

所以看起來

<div data-role="header"> 
    <div class="ui-btn-left"> 
    <a href="#" data-role="button" data-icon="gear">left 1</a> 
    <a href="#" data-role="button" data-icon="gear">left 2</a> 
    </div> 
    <h1>Page Title</h1> 
    <div class="ui-btn-right"> 
    <a href="#" data-role="button" data-icon="gear">right 1</a> 
    <a href="#" data-role="button" data-icon="gear">right 2</a> 
    <a href="#" data-role="button" data-icon="gear">right 3</a> 
    </div> 
</div>

來源

2011-09-20 15:39:03 rlemon

你可以給我-2點使用類「ui-btn-right」/「ui-btn-left」我已經測試過它只有一個按鈕在每邊，所以我沒有測試多個按鈕:)。 Thnx無論如何，我學會了一些 – Dynamikus

更新你的答案。它仍然是錯誤的;）_also，你不能改變你的投票（除非答案更新）_ – rlemon

使用類「UI-BTN-右」/ 「UI-BTN左」

更新使用多個按鈕的包裝

<div class="ui-btn-left"> 
    <a href="#" data-role="button" data-icon="gear">left 1</a> 
    <a href="#" data-role="button" data-icon="gear">left 2</a> 
    </div>

來源

2011-09-20 15:13:54 Dynamikus

然後所有的鏈接層疊在彼此之上。使用這個類只適用於一個按鈕或一個包含所有按鈕的容器。 ..容器解決方案失敗，因爲在標記按鈕時框架錯過了鏈接。 – rlemon

ups對不起沒有時間測試我正在嘗試。:( – Dynamikus

這使事情變得更糟了。再次，按鈕標記未被框架應用並且所有的位置都是左側的，右側沒有任何東西 – rlemon

<div data-role="header"> 
    <div class="ui-btn-left" data-role="controlgroup"> 
    <a href="#" data-role="button" data-icon="gear">left 1</a> 
    <a href="#" data-role="button" data-icon="gear">left 2</a> 
    </div> 
    <h1>Page Title</h1> 
    <div class="ui-btn-right" data-role="controlgroup"> 
    <a href="#" data-role="button" data-icon="gear">right 1</a> 
    <a href="#" data-role="button" data-icon="gear">right 2</a> 
    <a href="#" data-role="button" data-icon="gear">right 3</a> 
    </div> 
</div>

來源

2013-09-16 09:26:41

工程。謝謝。您還可以添加一個像這樣的CSS規則： div.ui-btn-left a { \t padding：0; } div.ui-btn-right a { \t padding：0; } ...所以它看起來好多了。 – 2014-05-05 22:51:07

頁眉/頁腳中的JQueryMobile分組按鈕

回答

相關問題