实现自定义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元

回答

相关问题