Split Button listview without the first <a> tag?

Question

I need a button on the right - aligned in the middle of a <ul data-role="listview" /> element.

Here is the HTML I am using that does this the best that I can think of, but it's not exactly a split button and it's not even aligned in the middle of the content...

<ul data-role="listview" data-theme="d" data-divider-theme="d">
    <li>
        <h3>New York Group Applies for CDFI Status</h3>
        <p>The New York Business Development Corp. is <a target="_blank" href="http://www.bizjournals.com/albany/news/2013/09/05/nybdc-doubling-albany-office-space.html">doubling its office space</a> in downtown Albany.</p>
        <p class="ui-li-aside read_more"><a href="#" data-role="button" data-transition="slide" data-mini="true" data-icon="arrow-r" data-theme="d" data-shadow="false" data-inline="true" data-iconpos="notext" class="ui-btn-right">Read More</a></p>
    </li>
</ul>

So, the problem here is I kinda would like it to be displayed in the same way as the Split Button approach, however, if I try to use this, it ruins the look of it, because I do not have the first <a> tag wrapping up the <h3>, and first <p> element. And Also because I have tags defined within the body copy of the <p> elements.

Here is a jsfiddle of what I have so far: http://jsfiddle.net/MY8Tg/

How can I make this a split button while maintaining the structure of the left side and not making the left side an actual link to anything, thus keeping the other links working properly??

And I need this to be middle aligned exactly like the Split button. Why isn't this possible right out of the box??

Answer 1

Surround the left and right sections with divs and and give the right div a class of ui-li-link-alt:

<ul data-role="listview" data-theme="d" data-divider-theme="d" class="has-right-radio">
    <li>
        <div>
            <h3>New York Group Applies for CDFI Status</h3>
            <p>The New York Business Development Corp. is <a target="_blank" href="http://www.bizjournals.com/albany/news/2013/09/05/nybdc-doubling-albany-office-space.html">doubling its office space</a> in downtown Albany.</p>
        </div>

        <div class="ui-li-link-alt borderLeft">
            <a href="#" data-role="button" data-transition="slide" data-mini="true" data-icon="arrow-r" data-theme="d" data-shadow="false" data-inline="true" data-iconpos="notext" >Read More</a>
        </div> 
    </li>
</ul>

.borderLeft{
    border-left: 1px solid rgb(204, 204, 204);
}

Here is your updated FIDDLE

Answer 2

With inspiration from Gajotres' answer in jQuery mobile listviews split buttons, right button only, I did it like that:

• inspected the elements in Google Chrome's developer tools

• from that information, created the below style. If you are using your own theme, be sure to use the correct background-color:

  .ui-listview > li.ui-li-has-alt > a.ui-btn.nolink-a {
    cursor: default !important;
    font-weight: normal !important;
    background-color: #f5f8f9 !important; /*{a-body-background-color}*/
  }
  

• I personally saved that style in a file called jquery.custom.css and loaded it into my html via <link> (see below). You could also add the CSS code into your html within <style> tags. (<style>.ui-listview ... </style>).

  <link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.from.themeroller.css"> 
  <link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.mobile.icons.min.css">
  <!-- add your custom css here: -->
  <link rel="stylesheet" href="/jquery.mobile-1.4.5/jquery.custom.css">
  

• gave the first <a> element within every <li> the class nolink-a:

  <ul data-role="listview" data-split-theme="a" data-inset="true">
    <li>
      <a class="nolink-a">This is your text which doesn't appear as a link</a>
      <a href="/your/link/target/for/the/button/on/the/right"></a>
    </li>
  </ul>
  

If you use multiple themes (-a, -b, ...) feel free to create more nolink-x styles if you need them. If you are using only one anyway, you can also skip the -a and call the element nolink.

Update: why not create my first fiddle going along with my first post on stackoverflow: http://jsfiddle.net/dc3re3L2/ :)