Geek asks and answers

JQuery Mobile List Split Button element without reference to the main element

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

Is it possible that the left side of the list item is not wrapped in href, but save the button on the right side?

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

enter image description here

I tried:

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

And it works, it removes the link as requested (and fixes the problem described below), but it goes and breaks a whole bunch of layout and style in the list item.

The problem I'm trying to solve is this:

  • I have about 100 <li>elements per page
  • Everyone <li>can have an element <select>in it with 5-10 options.
  • jQuery Mobile <select>
  • . IPhone 4S , iPad 2 (Android , ).
  • data-role="none" <select>
  • ( , Firefox), , , <select>, - <select> <select>

?

+5
1

, , jQuery Mobile CSS, , <li>. <span> <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; }

<li> :

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

jQuery:

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

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

+1

More articles:


All Articles