5

リストビューのリンクをクリックすると、ポップアップが表示されます。簡単にするために、リストビューを省略し、1 つのボタンだけから始めています。

ポップアップが表示される原因となったボタンから属性を取得したいと思います。私の例では、という名前の属性ですcustomAttr。次に、値を に挿入しますpopupBasic。

これが私の非常に基本的なサンプル jQuery Mobile コードです。

<a href="#popupBasic" data-rel="popup" customAttr="value">Basic Popup</a>

<div data-role="popup" id="popupBasic">
    <p>This is a completely basic popup, no options set.</p>
</div>

jsFiddle: http://jsfiddle.net/cPRCU/2/

通常、jQuery (非モバイル) を使用するときは、クリック イベント/ポップアップ/ダイアログの開始にもっと関与します。ポップアップを表示させたボタンを読み取れるようにしたいのですが、どうすればよいですか?

4

3 に答える 3

6

ボタンにクリックハンドラーを追加するとうまくいくようです。このハンドラーで、表示される前にポップアップを変更します。

$('a[data-rel="popup"]').click(function () {
    var link = $(this);
    var data = link.attr('customAttr')
    var popup = $(link.attr('href')); // assume href attr has form "#id"
    popup.append(($('<p />').text(data)));
});

これは、複数のボタン/ポップアップを含むページをサポートする汎用ハンドラーです。一部のボタンにこの動作が必要ない場合は、目的のボタンにクラスを追加し、a[data-rel="popup"]セレクターをより具体的にします。

フィドルを参照してください: http://jsfiddle.net/cPRCU/3/

于 2013-03-29T20:31:20.423 に答える
3

あなたにとってより便利なので、リストビュー自体でそれを行いました。

ListView の場合

<a>最初に以下のように、リストビューのタグのクリック イベントを登録する必要があります。

$('#mylist a').bind('click', function(event){
});

その間、以下のようにアンカータグ内にデータを格納してください。 data-customattrここではすべてが小さいです。

例えば

<a href="#popupBasic" data-rel="popup" data-customattr="value2" >Basic Popup 2</a>

data-customattrこれで、以下のようにクリック イベント内の値を読み取ることができます。

$(this).data('customattr')

<p>ここで、ポップアップ内にタグの ID があると仮定します。以下のようなもの

  <p id="mypopup">This is a completely basic popup, no options set.</p>

ID を使用して、ポップアップのコンテンツを置き換えることができます。

最終的に以下のようなものをすべてまとめる

$('#mylist a').bind('click', function(event){
    console.log($(this).text());
   $('#mypopup').html($(this).data('customattr'));
});

live fiddle実際の例については、これをチェックしてください http://jsfiddle.net/gFTzt/5/

ボタンの場合

ボタンを使用した例を主張する場合は、以下のように ID を持つボタンを宣言します。

<a href="#popupBasic" data-rel="popup" id="mybutton" data-role="button" data-customattr="button value">button example</a>

上記のように、クリック イベントを登録し、customattr値を読み取ります。

 $('#mybutton').bind('click',function(){
        alert($(this).data('customattr'));
 });

live fiddleボタンとリストビューの両方について、この例を確認してくださいhttp://jsfiddle.net/gFTzt/5/

.attr() の使用

ここでは、 を使用しdataて値を取得しました。data 属性がなければ、以下のようにアンカータグから値を直接取得できます。

たとえば、次のようなアンカー タグがあります。

<a href="#popupBasic" customattr="value1">Basic Popup 1</a>

value1以下のようにを使用してを読むことができ.attr()ます。

$(this).attr('customattr')

ここにLive fiddle例があります。

于 2013-03-29T20:31:36.627 に答える