I'm quite sure this has never been asked before. I am new to jQuery and found jqmPhp very easy to use. However, I am trying to achieve a few things that I find very complicated to implement.
I need to filter list items (like here) and enable the user to check/uncheck several list items to delete. I am trying to implement a similar feature to what Gmail mobile is doing (with a checkbox on the left, where selecting it will make the relevant row highlight and allows users to just click a button to delete checked rows).
Is it possible at all to do that with jqmphp? If so, can anyone assist me with more information, links or code?
I made a Demo for you, by converting list-view into check-able list items.
http://jsfiddle.net/Palestinian/vcXmK/
HTML
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul id="list-view-test" data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
<li><a href="#">Adam Kinkaid</a>
</li>
<li><a href="#">Alex Wickerham</a>
</li>
<li><a href="#">Avery Johnson</a>
</li>
<li><a href="#">Bob Cabot</a>
</li>
<li><a href="#">Caleb Booth</a>
</li>
<li><a href="#">Christopher Adams</a>
</li>
<li><a href="#">Culver James</a>
</li>
</ul>
<a href="#" data-role="button" id="del">Delete</a>
<a href="#" data-role="button" id="reset">Reset</a>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
Code
// Change icons
$('#list-view-test').find('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-arrow-r')) {
$(this).removeClass('ui-icon-arrow-r').addClass('ui-icon-checkbox-off');
}
$('#list-view-test').listview('refresh');
});
// toggle "checked/unchecked"
$('#list-view-test').on('click', 'li', function (event) {
event.preventDefault();
$(this).find('span.ui-icon').removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');
});
// Delete selected
$('#del').on('click', function () {
$('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-checkbox-on')) {
$(this).closest('li').remove();
$('#list-view-test').listview('refresh');
}
});
});
// Clear selection
$('#reset').on('click', function () {
$('span.ui-icon').each(function () {
if ($(this).hasClass('ui-icon-checkbox-on')) {
$(this).removeClass('ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');
}
});
});