JQuery Mobile listview with split button

Question

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?

score 0 · Accepted Answer · answered Oct 23 '15 at 12:25

0

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.

answered Oct 23 '15 at 12:25

Sga

3,608
2
36
47

Looks good, but I imagine the OP wants button b and c to be separate buttons (although that is not 100% clear from the question)... – ezanker Oct 23 '15 at 13:28
I assumed only one shared button because there was only one `` in the HTML (but yeah, that would be a quite confusing GUI) – Sga Oct 23 '15 at 14:13

JQuery Mobile listview with split button

1 Answers1