實現自定義JQM元

我要實現第二個按鈕，在這個職位描述：Listview with more than one split button?（第二個答案）實現自定義JQM元

現在，我實現了在一個易於安裝的代碼：在瀏覽器中

但excecution只向我顯示一個按鈕。第二個按鈕丟失：/可能某人擁有我嗎？我想我通過包含類定義來犯錯誤。（我是新來JQM等）

親切的問候

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- Include meta tag to ensure proper rendering and touch zooming --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Include jQuery Mobile stylesheets --> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <!-- Include the jQuery library --> 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <!-- Include the jQuery Mobile library --> 
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    <style type="text/css"> 
     .split-button-custom { 
      float: right; 
      margin-right: 10px; 
      margin-top: -32px; 
      border-bottom-left-radius: 1em 1em; 
      border-bottom-right-radius: 1em 1em; 
      border-top-left-radius: 1em 1em; 
      border-top-right-radius: 1em 1em; 
     } 
     .split-button-custom span.ui-btn-inner { 
      border-bottom-left-radius: 1em 1em; 
      border-bottom-right-radius: 1em 1em; 
      border-top-left-radius: 1em 1em; 
      border-top-right-radius: 1em 1em; 
      padding-right: 0px; 
     } 
     .split-button-custom span.ui-icon { 
      margin-top: 0px; 
      right: 0px; 
      top: 0px; 
      position: relative; 
     } 
    </style> 
    </head> 
    <body> 
    <div data-role="page" id="pageone"> 
     <div data-role="header"> 
     <h1>Welcome To My Homepage</h1> 
     </div> 
     <div data-role="main" class="ui-content"> 
     <p>Welcome!</p> 
     <ul data-role="listview" data-filter="true" data-theme="b" style="margin-bottom: 50px;"> 
      <li> 
      <a href="#" onclick="alert('the item!');"> 
       <h3>The item</h3> 
      </a> 
      <a href="#" onclick="alert('1st splitbutton!');" class="split-button-custom" data-role="button" data-icon="gear" data-iconpos="notext">1st link</a> 
      <a href="#" onclick="alert('2nd splitbutton!');" class="split-button-custom" data-role="button" data-icon="arrow-r" data-iconpos="notext">2nd link</a> 
      <a href="#" style="display: none;">Dummy</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </body> 
</html>

來源

2015-11-05 Findus

的按鈕，似乎在這個** [小提琴]正確顯示（http://jsfiddle.net/rwachtler/sgqxrxt6/2/）**還是我失去了一些東西？ –

的問題是，你正在使用的答案適用於JQM 1.3.x中，但使用的是1.4所支持這是給你一個1.4的解決方案：

<ul class="has-btns" data-role="listview" data-icon="false" data-filter="true" data-theme="b" style="margin-bottom: 50px;"> 
    <li> 
     <a href="#"> 
      <h3>Line Item 1</h3> 
     </a> 
     <div class="split-btns"> 
      <a href="#" class="ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all" ></a> 
      <a href="#" class="ui-btn ui-icon-arrow-r ui-btn-icon-notext ui-corner-all" ></a> 
     </div> 
    </li> 
</ul>

在標記，關閉默認的鏈接圖標（data-icon="false"在<UL>）。

.has-btns > li > a:first-child { 
    margin-right: 72px !important; 
} 
.split-btns { 
    position: absolute; 
    right: 0; 
    top: 0px; 
    width: 72px; 
    bottom: 0px; 
    z-index: 100; 
    border-top: 1px solid rgb(221, 221, 221); 
    border-left: 1px solid rgb(204, 204, 204); 
    background-color: rgb(246, 246, 246); 
} 
.ui-group-theme-b .split-btns { 
    background-color: rgb(51,51,51); 
    border-top: 1px solid rgb(31,31,31); 
    border-left: 1px solid rgb(80,80,80); 

} 
.has-btns > li:last-child .split-btns { 
    border-bottom: 1px solid rgb(221, 221, 221); 
} 
.ui-group-theme-b.has-btns > li:last-child .split-btns { 
    border-bottom: 1px solid rgb(51, 51, 51); 
} 
.split-btns a { 
    position: absolute; 
    top: 50%; 
    margin-top: -14px;  
} 
.split-btns a:first-child { 
    right: 36px; 
} 
.split-btns a:last-child { 
    right: 6px; 
}

在CSS，我給第一鏈路的右邊距，以留出空間按鈕，然後我用絕對定位放置div和2個按鈕。其餘的是邊框和背景修補以匹配現有的元素。 CSS還涵蓋了jQM 1.4.x提供的默認A和B主題。

DEMO

來源

2015-11-05 16:17:57 ezanker

我可以問一下，我如何實現第三個（和第四個）按鈕到CSS類？在JQM中添加另一個按鈕可修復左側的按鈕。 – Findus

@Findus，你會有一個可變數量的按鈕或固定數量？你想讓他們排成一排還是多排？有很多方法來完成這取決於你真正需要什麼...... – ezanker

不，只有固定數量（四）的按鈕，並在一行。它只是一個測試應用程序。 – Findus

實現自定義JQM元

回答

相關問題