1

JQuery用のsimplemodalプラグインを実装しました。とても素敵なところで！問題が発生しているのは、データベースから生成されたリンクのリストがあることです。1つをクリックすると、「ロード」呼び出しを行い、その結果をosx-modal-contentdivに追加します。ロードが完了した後、osxプラグインを呼び出すにはどうすればよいですか？hrefにclass=osxを追加すると、コンテンツがdivに入る前にモーダルが開きます。

HTMLをロードする私の関数：

function loadContent(id) {
        $("#osx-modal-dialog").load("Item.cfm?ID="+id+"");
        // call OSX here????
        $('#osx-modal-dialog').modal();
    }

私のDIV：

<div id="osx-modal-dialog">
  <div id="osx-modal-content">
<div id="osx-modal-title">Title</div>
<div id="osx-modal-data">
    <h2>Summary</h2>
    <p>Description</p>
    <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
  </div>
</div>

現在、osxプラグインは入力またはクリックイベントを探しています。ロード後に「クリック」イベントをスクリプト化する方法がわかりません。または、プラグインを呼び出すためのより良い方法があるかもしれません。

含まれるもの：

4

2 に答える 2

0

loadメソッドには、ロードが完了したときに実行される関数を提供できるコールバックパラメーターがあります。このコールバックを使用して、ダイアログをトリガーします。

function loadContent(id) {
    $("#osx-modal-dialog").load("Item.cfm?ID="+id+"", function() {
        $('input.show-info').unbind('click') // remove any existing handlers
                            .click( function() { // bind click on button to show dialog
             $('#osx-modal-dialog').modal();
        });
    });
}

更新：load（）のコールバックにクリックハンドラーを追加する方法を示すためにこれを更新しましたが、処理するイベントやイベントがトリガーされる要素がわかりません。クラス「show-info」のボタンをクリックしたときにダイアログを表示したいとします。

于 2009-09-23T19:07:21.533 に答える
0

これが私がすることです：

OSXコンテンツを変更します（ほとんどのコンテンツを削除し、プレースホルダーを追加しました）：

       

<div id="osx-modal-content">
               <div id="osx-modal-title">OSX Style Modal Dialog</div>
               <div id="osx-modal-data">
                       <div id="osx-data-placeholder"></div>
                       <p><button class="simplemodal-close">Close</button> <span>(or press
ESC or click the overlay)</span></p>
               </div>
       </div>

loadContent関数：

       

function loadContent(id) {
               var d = $('#osx-modal-content');

               // load your page
               $.get("Item.cfm?ID=" + id, function(data) {

                       // replace the placeholder with the results
                       $('#osx-data-placeholder', d[0]).html(data);

                       // open the osx modal
                       d.modal({
                               overlayId: 'osx-overlay',
                               containerId: 'osx-container',
                               closeHTML: '<div class="close"><a href="#"
class="simplemodal-close">x</a></div>',
                               minHeight:80,
                               opacity:65,
                               position:['0',],
                               overlayClose:true,
                               onOpen:OSX.open,
                               onClose:OSX.close
                       });
               });
       }

私はそれをテストしていませんが、これでうまくいくはずです。

-エリック

于 2009-09-23T21:19:44.530 に答える