Response title
This is preview!
Move this topic
listview with checkboxes
in Developing jQuery Mobile
•
12 years ago
Hi,
Would be nice to have out of the box checkbox support in listviews (e.g. mobile.listview could search for any "input type=checkbox" and then apply appropriate css + handle click events appropriately, etc).
I suppose this is a very common use case.
On another subject, would be nice if listviews(refresh) could trigger an event. This would benefit plugin developers who want to extend the listview rendering capabilities.
Let me know if you need a hand and/or more details...
Would be nice to have out of the box checkbox support in listviews (e.g. mobile.listview could search for any "input type=checkbox" and then apply appropriate css + handle click events appropriately, etc).
I suppose this is a very common use case.
On another subject, would be nice if listviews(refresh) could trigger an event. This would benefit plugin developers who want to extend the listview rendering capabilities.
Let me know if you need a hand and/or more details...
3
Replies(3)
Re: listview with checkboxes
12 years ago
I think more generally, allowing "space" to be reserved on the left (or right) hand side for controls is a useful generalization of the thumbnail markup currently done by the jQ Mobile enhancer.
Here are some examples of how I would use a more generalized left hand space:
Checkboxes are one example of a control that could be embedded in that space.
Re clicks - can't you just bind an click handler to the LI ?
Re: Re: listview with checkboxes
12 years ago
I completely agree. Allowing an extra generic space/div would be enough. However, the checkboxradio widget would also have to be modified (the enhancer adds formatting only when a <label> is present), which is not the biggest of our problems).
The other problem is that the enhancer is not executed when the list gets refreshed (listview.refresh), so form elements wouldn't get jquery markup.
Re Re Clicks: JQuery mobile automatically attach a handler to the <li> that delegates the click event to the first <a> element inside that <li>. One could definitely override this behavior, however, it would be nice if JQuery mobile could leave the extra generic space/div click events alone.
ps. nice post on list elements and styles! thanks for sharing!
The other problem is that the enhancer is not executed when the list gets refreshed (listview.refresh), so form elements wouldn't get jquery markup.
Re Re Clicks: JQuery mobile automatically attach a handler to the <li> that delegates the click event to the first <a> element inside that <li>. One could definitely override this behavior, however, it would be nice if JQuery mobile could leave the extra generic space/div click events alone.
ps. nice post on list elements and styles! thanks for sharing!
Leave a comment on toad99's reply
Re: listview with checkboxes
10 years ago
i solved your problem you need to change some stuff but you can accomplish a searchable listview with checkbox like so:
<div data-role="content">
<div data-role="fieldcontain">
<ul data-role="listview" data-split-icon="gear" data-filter="true">
<li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 42px;padding-left: 0px;">
<label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false">
<fieldset data-role="controlgroup" >
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" />
<label for="checkbox-2b" style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;">
<img src="Images/Sensor_Icon.png" style="float:left;width:80px;height:80px"/>
<label style="float:left;padding:10px 0px 0px 10px;">
<h3>Wolfgang Amadeus Phoenix</h3>
<p>other</p>
</label>
</label>
</fieldset>
</label>
</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 42px;padding-left: 0px;">
<label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false">
<fieldset data-role="controlgroup" >
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" />
<label for="checkbox-2b" style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;">
<label style="padding:10px 0px 0px 10px;">
<h3>Wolfgang Amadeus Phoenix</h3>
<p>other</p>
</label>
</label>
</fieldset>
</label>
</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
<li><a href="#" style="padding-top: 0px;padding-bottom: 0px;padding-right: 0px;padding-left: 0px;">
<label style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;" data-corners="false">
<fieldset data-role="controlgroup" >
<input type="checkbox" name="checkbox-2b" id="checkbox-2b" />
<label for="checkbox-2b" style="border-top-width: 0px;margin-top: 0px;border-bottom-width: 0px;margin-bottom: 0px;border-left-width: 0px;border-right-width: 0px;">
<label style="padding:10px 0px 0px 10px;">
<h3>Wolfgang Amadeus Phoenix</h3>
<p>other</p>
</label>
</label>
</fieldset>
</label>
</a>
</li>
<li><a href="index.html">
<img src="Images/Sensor_Icon.png" />
<h3>Kid A</h3>
<p>Radiohead</p>
</a><a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>
</ul>
<div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;">
<h3>Purchase Album?</h3>
<p>Your download will begin immediately on your mobile device when you purchase.</p>
<a href="index.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
<a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
</div>
</div>
Leave a comment on yakirmanor's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to itopcin's idea
Statistics
- 3 Replies
- 22268 Views
- 1 Followers