I'm using JQM listview and it works fine as Fig. 1
,and the code as following:
<ul data-role="listview" data-inset="true" data-split-icon="gear">
<li>
<a href="#">
<h3>Button A</h3>
<p>Button A</p>
</a>
<a href="#">Set Button A</a>
</li>
<li>
<a href="#">
<h3>Button B</h3>
<p>Button B</p>
</a>
<a href="#">Set Button B</a>
</li>
<li>
<a href="#">
<h3>Button C</h3>
<p>Button C</p>
</a>
<a href="#">Set Button C</a>
</li>
</ul>
I'm trying to use one split button for Button B and Button C, as Fig. 2.
The code as following:
<ul data-role="listview" data-inset="true" data-split-icon="gear">
<li>
<a href="#">
<h3>Button A</h3>
<p>Button A</p>
</a>
<a href="#">Set Button A</a>
</li>
<li>
<a href="#">
<h3>Button B</h3>
<p>Button B</p>
</br>
<h3>Button C</h3>
<p>Button C</p>
</a>
<a href="#">Set Button B and C</a>
</li>
</ul>
Is it possible to separate "Button B" and "Button C" with the line in Fig.2 as that in Fig.1 but only use one split button?
I have a quick & dirty solution, which may apply to your case. Replace the </br>
with a
<div class="separator"></div>
styled like this:
.separator
{
border-top: 1px solid lightgray;
margin: 0px;
position: relative;
left: -50px;
width: 200%;
}
If the listview is generated dynamically you have to implement this programmatically.