0

次のjQueryツールオーバーレイがあります。

<div id='editDescriptiontOverlay' class='overlay'>
  <input type='text' class='description'/>
  <button class='save'>Save</button>
  <button class='close'>Cancel</button>
</div>

背景情報：このオーバーレイのHTMLは静的です。それぞれが独自の編集リンクを持つアイテムのリストがあります。特定の[編集]リンクをクリックすると、：$('a[rel=#editDescriptionOverlay]').overlay( { ... } );を呼び出すことでオーバーレイが生成され、入力にそれぞれのテキストが入力されます。

[保存]ボタンは、入力要素のテキストを検証し、検証が成功した場合にのみオーバーレイを閉じる必要があります。それ以外の場合、オーバーレイは開いたままにする必要があります。[キャンセル]ボタンは、検証せずにオーバーレイを閉じるだけです。

検証ロジックは、動作することが個別に検証されています。

onBeforeClose検証の手段として、オーバーレイ生成中にイベントを設定してみました。このアプローチでは、[保存]ボタンと[キャンセル]ボタンの両方に同じクラスが必要でした.close。残念ながら、この条件は.closeオーバーレイ内のすべての要素に適用されるため、 [キャンセル]ボタンも有効でした。

また、次のように、オーバーレイを生成した直後にクリックイベントを[保存]ボタンにバインドしようとしました。

$('.save', $('#editDescriptionOverlay'))
  .unbind('click')
  .bind('click', function() {
    if (validateText) {
      console.log("Validation passed.");
      $('a[rel=#editDescriptionOverlay]').overlay().close();
    }
    else {
      console.log("Validation failed.");
    }
  });

console.logは検証が機能していることを確認しますが、オーバーレイは閉じません。

どんな洞察もありがたいです、ありがとう。

4

2 に答える 2

1

jqueryウィジェットの場合、パブリックメソッドは次のように呼び出す必要があります。

$（'a [rel =＃editDescriptionOverlay]'）。overlay（ "close"）;

ここで、closeは呼び出したいメソッド名です。

メソッドがパラメーターを受け入れる場合は、メソッド名の直後にパラメーターとして追加する必要があります。

更新しました：

ごめんなさい。jQueryオーバーレイツールとは何かを確認する時間がありましたが、間違っています。これは他のjQueryウィジェットとは似ていないため、上記のコメントもこの場合は機能しません。上記のコードを試してみましたが、うまくいきました。オーバーレイが閉じられました。しかし、私が複数<a rel="#editDescriptionOverlay">でそれを試したとき、それはあなたがしたことだと思います。それは動かなかった。私の提案は、1つだけ<a rel="#editDescriptionOverlay">を使用し、[編集]リンクにダミーのアンカー要素を使用することです。これをクリックすると、へのクリックがトリガーされます<a rel="#editDescriptionOverlay">。あなたはこのようなことをすることができます：

<script type="text/javascript">

    $(document).bind("ready", function(e){
        $("a[rel]").overlay();
        $('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
            if (validationValue){
                $("a[rel=#editDescriptionOverlay]").overlay().close();
            }
        });
    });

    function clickThis(){
        $("a[rel=#editDescriptionOverlay]").trigger('click'); 
        return false;
    }
</script>

<a href="#" onclick="return clickThis();">Edit1</a>
<a href="#" onclick="return clickThis();">Edit2</a>

<a rel="#editDescriptionOverlay">Dummy</a>

<div id='editDescriptionOverlay' class='overlay'>
  <input type='text' class='description'/>
  <button class='save'>Save</button>
  <button class='close'>Cancel</button>
</div>
于 2012-07-23T16:26:20.157 に答える
0

イベントを保存ボタン（2番目に言及したボタン）にバインドすることをお勧めします。実際には、コードは問題なく表示されますが、イベントをバインドする必要がなく、$('#editDescriptionOverlay')上記のhtmlマークアップにタイプミスがある場合を除きます（そうする必要<div id='editDescriptiontOverlay'があります<div id='editDescriptionOverlay'）。

例については、こちらをご覧ください。

于 2012-07-23T18:59:32.880 に答える