0

jQuery mobileから始めていますが、ボタンに問題があります。

Webアプリケーションはショッピングリストです。買い物をするアイテムのリストと、アイテムに対して実行できるアクションのフッターボタンが表示されます。

アクションは次のとおりです。

  1. 購入するアイテムの数を増やす
  2. 購入するアイテムの数を減らします
  3. リスト内のアイテムを上に移動
  4. リスト内のアイテムを下に移動します
  5. 新しいアイテムを追加する
  6. アイテムを削除
  7. アイテムのテキストの説明を変更する

アクションはjavascriptで実装され、正常に機能します。私が抱えている問題は、ボタンと関連するアクションの制御にあります。

経験上、インクリメントとデクリメントでは、アクティブな状態のボタンを使用する方が便利ですが、他の操作では、選択したアイテムを選択し、ボタンが押されたときに選択したアイテムにアクションを適用することが望ましいことがわかりました。 。アイテムを追加すると、選択したアイテムの前にアイテムが挿入され、アイテムが選択されていないときに押すと、新しいアイテムがリストに追加されます。

また、2つのモードが欲しいです。1つのモードでは、インクリメントボタンとデクリメントボタンのみが表示され、ユーザーはリスト内のアイテムの数を更新できます。他のモードでは、ユーザーはリストを変更しています。選択したアイテムが必要なのは2番目のモードです。

.on（）メソッドをデリゲートとして使用して、アイテムリストのデフォルトアクションを関連付けることができました。

$('#itemList').on( "click", ".item", function(evt)
    { ctrl.doAction($(evt.currentTarget)); });

これが私が最初のモードをテストするために使用するhtmlコードです。

<!-- footer -->
<div data-role="footer" data-position="fixed" class="ui-bar" id="btnBar" >
    <a href="" data-role="button" data-icon="plus" id="btnPlus"> Plus </a>
    <a href="" data-role="button" data-icon="minus" id="btnMinus"> Minus </a>
</div>
<!-- /footer -->

href値として何を入力する必要がありますか？ページをリロードしたくありません。いくつかの例では、「＃」が表示されます。

これは、アクションをボタンに関連付ける方法です。

$('#btnPlus').on( "tap", function(evt) 
    { ctrl.doAction = ctrl.increment; });

私が抱えているもう1つの問題は、ボタンのクリックアクションに関するフィードバックがないことです。ボタンをクリックすると、短時間ハイライト表示されると思います。これは起こりません。

ブラウザの動作も異なります。Firefoxでは、クリックされたボタンに青いハローが表示され、フォーカスがあることを示しているようです。ただし、ボタンはアクティブとして表示されません。

「＃！」を入れたら Androidではhref（意味がわからない）として、クリックされたボタンがアクティブに表示されます。

イベントタイプとしてクリックまたはタップを使用する必要がありますか？クリックまたはタップを書くにはどうすればよいですか？

アクティブと非アクティブとして表示される2つの状態ボタンを実装するにはどうすればよいですか？アクションボタンの使用方法：押すと常に非アクティブでフィードバックが表示されますか？

4

1 に答える 1

0

私は自分で問題を解決しました。

  1. フッターのボタンのセットを切り替えるには、HTMLドキュメントに複数のフッターを作成し、非表示のフッターにstyle = "display：none"を付けます。これがないものが表示されます。$（ "＃footer1"）。hide（）;と書くことができるように、各フッターに特定のIDを割り当てました。$（ "＃footer2"）。show（）;

  2. フッターを切り替えるボタンがあります。フッター切り替えイベントハンドラーは、「マウスアップ」イベントで呼び出す必要があります。これは、iPadおよびAndroidフォンで動作するために必要です。

  3. 外観を変更するには、ここで提案されているように.button（）を使用しないでください。使用する：

    $（ "＃myButton"）.removeClass（ "ui-btn-up-a ui-btn-down-a ui-btn-hover-a"）.addClass（ "ui-btn-up-b"）.attr（ "データテーマ"、 "b"）;

注：私のコードにバグがあり、必死に髪を引っ張る原因になりました

于 2012-06-01T10:55:19.980 に答える