Search code examples
listviewjquery-mobilesplit-button

JQuery Mobile listview with split button


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?

Solution

  • enter image description here

    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.