Add Split Button in Folded Set (JQuery Mobile)
Is there a way to add a split button (that comes with the ListView) to a foldable one; I've tried / tested the below code but doesn't work!
<div data-role="collapsible-set" data-theme="a" data-content-theme="e" data-split-icon="gear" data-split-theme="e">
<div data-role="collapsible">
<h3> Breakfast </h3>
<p>
<a href="somthing.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
<div data-role="collapsible">
<h3> Lunch</h3>
<p>
<a href="somthingElse.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
</div>
Any idea or any other solution (workaround) is appreciated.
+3
source to share
1 answer
Well it takes a little work, but this is what I have
Live example:
- http://jsfiddle.net/yPhJp/5/
- http://jsfiddle.net/yPhJp/6/ (Adding Wording to Build)
Js
$(".splitButtonClicked").on("click", function (event, ui) {
alert('Hello');
return false; // stop collapsible event
});
Html
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Breakfast</h3>
</a><a href="#breakfast_menu" data-rel="popup" data-position-to="window" data-transition="pop" class="splitButtonClicked">View Menu</a>
</li>
</ul>
</h2>
</div>
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Lunch</h3>
</a><a href="#lunch_menu" data-rel="popup" data-position-to="window" data-transition="pop" class="splitButtonClicked">View Menu</a>
</li>
</ul>
</h2>
</div>
</div>
</div>
</div>
Hope this helps you
+3
source to share