1

これは今までに聞かれたことがないと確信しています。私はjQueryが初めてで、jqmPhpは非常に使いやすいことがわかりました。ただし、実装が非常に複雑であると思われるいくつかのことを達成しようとしています。

リスト項目をフィルタリングし (ここのように)、ユーザーがいくつかのリスト項目をチェック/チェック解除して削除できるようにする必要があります。Gmailモバイルが行っているのと同様の機能を実装しようとしています(左側にチェックボックスがあり、選択すると関連する行が強調表示され、ユーザーはボタンをクリックしてチェックされた行を削除できます)。

jqmphpでそれを行うことはまったく可能ですか? もしそうなら、誰かが私をより多くの情報、リンク、またはコードで助けてくれますか?

4

1 に答える 1

4

リストビューをチェック可能なリスト項目に変換するデモを作成しました。

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>

コード

// 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');
    }
 });
});
于 2013-04-13T16:01:48.227 に答える