启用jqmPhp的功能就像Gmail mobi？

问题描述

我很确定这从来没有被问过。
我是jQuery的新手，发现非常易于使用。然而，我试图实现一些我觉得实现起来非常复杂的事情。

我需要过滤列表项（如），并让用户选中/取消选中要删除的多个列表项。我试图实现与Gmail移动版功能类似的功能（左侧有一个复选框，选择它可以使相关行突出显示，并允许用户只需点击一个按钮即可删除已检查的行）。

有没有可能用jqmphp做到这一点？如果是这样，任何人都可以帮助我获得更多信息，链接或代码吗？ 我做了一个演示为你，通过将列表视图转换为可检查列表项。

 < div data-role =page> 
< div data-role =header> 
< h1>标头< / h1> 
< / div> 
< div data-role =content> 
 
< 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 =＃>克里斯托弗·亚当斯< / a> 
< / li> 
< li>< a href =＃> Culver James< / a> 
< / li> 
< / ul> 
< a href =＃data-role =buttonid =del>删除< / a> 
< a href =＃data-role =buttonid =reset>重置< / a> 
< / div> 
< div data-role =footer> 
< h1>页脚< / h1> 
< / div> 
< / div> 
  

  //更改图标
 $（'＃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'）; 
}） ; $（$'$'
 $ // togglechecked / 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 '）; 
}）; $（''del'）。on（'click'，function（）{
 $（'span.ui-icon'）。
 
 //删除选中的
 $ （function（）{
 if（$（this）.hasClass（'ui-icon-checkbox-on'））{
 $（this）.closest（'li'）。remove（）; 
 $（'＃list-view-test'）。listview（'refresh'）; 
} 
}）; 
}）; $（'＃reset'）。on（'click'，function（）{
 $（'span.ui-icon'）。
 
 //清除选项
 $ （'）{
 if（$（this）.hasClass（'ui-icon-checkbox-on'））{
 $（this）.removeClass（'ui-icon-checkbox-on' ）.addClass（'ui-icon-checkbox-off'）; 
} 
}）; 
}）; 
  

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/

<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>

// 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');
    }
 });
});

这篇关于启用jqmPhp的功能就像Gmail mobi？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！