2

jquery mobileを使用してモバイルアプリを構築しています。リストビュー コントロールを使用していますが、これまでのところ問題なく動作しています。ただし、分割ボタン ( http://view.jquerymobile.com/1.3.0/docs/widgets/listviews/#list-split )を表示したいのですが、特定のボタンがクリックされた場合のみです。使用例は、「削除モード」を有効/無効にして、ツールバーのボタンがクリックされた後にのみ削除アイコンがリスト要素の横に表示されるようにすることです。私は次のような多かれ少なかれ実用的なソリューションを持っています:

$('#editmode').live('click', function(e){
e.preventDefault();
$('.deletelog').toggle();
$('.deletelog:hidden').closest('li').removeClass("ui-li-has-alt");
$('.deletelog:visible').closest('li').addClass("ui-li-has-alt");
});

問題は、ボタンがデフォルトで非表示になっている場合でも、最初のページの読み込みです。

<a href="#" class="deletelog" style="display:none">Delete</a>

データ属性 data-split-icon と data-split-theme を追加する必要があります。これにより、最初のページの読み込みが、ボタン用に予約されたスペースがあるように見えます。上記のコードからわかるように、これはクラス「data-split-theme」が原因です。したがって、トグルすると、2 回目のトグルで消えます。

このようなトグル分割ボタンを実現するより良い方法はありますか?

ありがとう！

スクリーンショット 1 スクリーンショット 2

4

1 に答える 1

1

クラスを追加し、jQuery を使用して操作することで、分割ボタンを表示および非表示にすることができます。

見せる

$('.delete').css('display', 'compact');

隠れる

$('.delete').css('display', 'none');

このフィドルをチェックしてくださいhttp://jsfiddle.net/mayooresan/2XxJx/

アップデート

その場合、のcssを更新する必要がありますui-li-aside

$('.ui-li-aside ').css('margin-right', '50px');

このライブフィドルをチェックしてくださいhttp://jsfiddle.net/mayooresan/2XxJx/3/

于 2013-03-29T09:05:14.293 に答える