CODEWITHSUNDEEP
jqueryjquery-mobile
Mark Henderson
Mark Henderson

Reputation: 2696

jQuery Mobile List Item Split Button without Link on main item

Let's say I have a jQuery Mobile site with a bunch of <li> with a split icon (data-icon="grid").

Is it possible to have the left-hand side of the list item not wrapped in a href but keep the button on the right-hand side?

Example: http://jsfiddle.net/SSQMB/

enter image description here

I have tried:

$(selection).contents().unwrap();

And this works, it removes the link as requested (and fixes the problem I've outlined below), but it goes and breaks a whole bunch of the layout and styling on the list item.

The issue I'm trying to resolve is this:

Any ideas?

Upvotes: 5

Views: 2035

Answers (1)

Mark Henderson
Mark Henderson

Reputation: 2696

OK, after delving through the stock jQuery Mobile CSS, I found the styles that determine the formatting for the <li>. I duplicated these in a seperate stylesheet and made them apply to a <span> instead of an <a>:

.ui-li .ui-btn-text span.ui-link-inherit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap;  }
.ui-li .ui-btn-inner span.ui-link-inherit { padding: .7em 15px .7em 15px; display: block; }

Then, set up the <li> as such:

<li data-icon="grid">
  <a href="#" onclick="return false;" class="leftLink">
    <span class="ui-link-inherit">
      .... content ....
    </span>
  </a><a href="#"> ... </a>
</li>

Then some jQuery:

$('.leftLink').parent().parent().parent().removeClass('ui-btn');
$('.leftLink').contents().unwrap();

and Voila: http://jsfiddle.net/Zwhs3/2/

Upvotes: 1

Related Questions