1

私はjQueryUIを使用し、大量のダイアログを作成するWebアプリに取り組んでいます。ダイアログはすべて異なり、ダイアログを閉じるためのボタンは、ダイアログにいくつかのdivを埋め込んでしまう可能性があります。

含まれているダイアログを常に閉じる関数が欲しいのですが。

たとえば、次のhtmlを取り上げます。

<div id="demoDialog">
   <div>
      <div id='demoDialogSubmit'>
         <input type='submit' onClick='selfCloseDialog();' value='Ok' style='margin-top:10px' />
      </div>
   <div>
<div>

私のjsコードのどこかで、これをダイアログとして初期化しました。

$( "#demoDialog" ).dialog( params );

今、クリックするために、私はいくつかのそれほど素晴らしい選択肢がありません。ダイアログのIDを知っているクローズボタンを主張することができます。たとえば、次のようなことを行います。

onclick="$( '#demoDialog' ).dialog( 'close' );"

ただし、ダイアログのIDを常に持ち歩くのではなく、汎用コードを使用して、ダイアログを閉じる可能性のあるウィジェットに送信できるようにしたいと思います。

または、自分が何層下にあるかを思い出すことができます。

function selfCloseDialog() { $(this).parent().dialog( 'close' ); }

しかし、実際には、selfCloseDialog（）で、閉じるダイアログオブジェクトを探している要素のレイヤーを探し出すだけで済みます。どうすればよいですか？

@アップデート：

だから私はそれを動かしました。皆さんの提案に感謝します。問題には実際に2つの問題がありました。

最初の1つの問題はここにありました：

<input type='submit' onClick='selfCloseDialog();' value='Ok'/>

そのはず：

<input type='submit' onClick='selfCloseDialog(this);' value='Ok'/>

ボタン要素は、関数の「this」引数として渡されません。これは今では明らかなようです。

そして、以下の直接法JAAuldeが機能し、最もクリーンなようです。

function selfCloseDialog( caller ) {
   $(caller).closest( ".ui-dialog-content" ).dialog('close');
}

最も近いものとセレクターに関するいくつかの答えがありましたが、彼が提案するプレーンなクラスセレクター以外のものを使用する理由はわかりません。

4

5 に答える 5

2

ダイアログを作成するときは、閉じるボタンを含めます。

var params = {
    //whatever you already had in there
    buttons: {
        // In the buttons object, the "key" will be the button text, the function
        // will be executed on click of the button in scope of the dialoged element
        Close: function () {
            $(this).dialog('close');
        }
    }
};

$( "#demoDialog" ).dialog( params );

そして、ダイアログ要素の任意の子孫要素のスコープで実行されているコードから、次のコマンドを実行します。

$(this).closest('.ui-dialog-content').dialog('close');
于 2012-10-10T00:15:27.040 に答える
1

あなたが何を求めているのか正確に理解しているかどうかはわかりませんが、すべてのダイアログに標準クラスを追加して、次のようなコードを作成するのが最も簡単な方法のようです。

$(this).closest('.dialog-class').dialog('close');

close（）はここで定義されます：

http://api.jquery.com/closest/

于 2012-10-10T00:17:40.307 に答える
1

*ダイアログのajax部分を反映するように更新されました。*コメントを反映するように更新

<div id="soemthing.random.ui.dialog.makes">
.... your content....
<a class='custom-close' href="#Close">Custom Close</a>
.... 
</div>

$(function(){
  $("your selector").dialog();
  var selector = ":ui-dialog";
//developers choice.  ".ui-dialog-content" is faster, ":ui-dialog" is guaranteed
  $(selector ).on({
   "click":function(event){
     event.preventDefault();
     $(this).closest(selector).dialog("close");
   }
  },"a.custom-close",null);

})
于 2012-10-10T00:18:47.430 に答える
0

インライン関数呼び出しを作成する代わりにクラスを使用することをお勧めしますが、それはあなた次第です。

selfcloseこれは、クラスで要素をクリックすると祖先ダイアログが閉じるイベント委任を使用したハックなソリューションです。

$(document).on('click', '.selfclose', function() {
    $(this).parents().each(function() {
        try {
            $(this).dialog('close');
        } catch(e) {}
    });
});

フィドル

しかし、DefyGravityが述べたように、:ui-dialogセレクターを使用することははるかにクリーンなソリューションです。

$(document).on('click', '.selfclose', function() {
    $(this).closest(":ui-dialog").dialog("close");
});

フィドル

于 2012-10-10T00:37:55.853 に答える
-1

これを確認してください：http： //jsfiddle.net/Wqh4Y/3/

function closeParentDialog(closeButton)
{
closeButton.parents('.ui-dialog').eq(0).find('a.ui-dialog-titlebar-close').eq(0).click();

}

$(function() {


    $( "#dialog" ).dialog();

});​

あなたはそれをこのように使うことができます：

     <div id="dialog" title="Basic dialog">
        <p>This is the default dialog which is useful for displaying information. The dialog   window can be moved, resized and closed with the 'x' icon.

          <span> <a class="close-dialog" onclick="closeParentDialog($(this))">selfclose</a>  </span>
        </p>
     </div>
于 2012-10-10T00:30:31.847 に答える