1

私はここで小さなウェブサイトを開発しており (Zurb を使い始めたばかりですFoundation)、大きなメトロ スタイルの div サムネイル (ページに最大 10 個のサムネイル) を持つ基本的なグリッド レイアウトを作成しました。

ユーザーのためにここにインタラクションを追加しようとしています。つまり、ユーザーがこれらのサムネイルのいずれかをクリックすると、クリックされた特定のアイテムに関する詳細情報を示すモーダル ウィンドウが表示されます。(豊富に用意されている画像ギャラリー ライトボックス プラグインに多少似ています)

ただし、次の2つから同じことを達成するためのより良い方法は何かを知りたかった. モーダル ポップアップ ダイアログのコンテンツを別の html にする必要があり、ユーザーのクリック時に ajax 経由で取得する必要がありますか?
または、セクションを非表示にして、ユーザーのクリック時に表示する必要がありますか?
各セクションはプロジェクト名に似ており、クリックするとプロジェクトの説明が表示されます (プロジェクトごとにビデオ、画像、説明などがある場合があります)。

上記のより良いアプローチが何であれ、モーダルポップアップを表示する方法のサンプルをチェックアウトすることは素晴らしいことです (それは、すべてのサムネイルに適用でき、個別の個別のハンドラーを実行しないことが望ましいことを考慮して)サムネイルごとに）

4

2 に答える 2

0

これを行う最善の方法は、これらのダイアログを別のファイルに格納し、ユーザーが何かをクリックしたときに ajax を介してロードすることです。これにより、物事の管理がはるかに簡単になり、より整理されます。

非表示の div に html を保存すると、ユーザーがそのページの読み込みですべてのダイアログを使用するわけではないため、リソースが無駄になる可能性があります。非表示の div セクションでコードを更新し、両方を使用する場合は外部ファイル セクションでコードを更新する必要があるため、コードを最新の状態に保つのに苦労することもあります。

私の提案は、すべてのhtmlをphpクラス/関数に入れ（またはphp MVCフレームワークを使用して）、必要なときにそこからロードすることです。このようにして、サイト全体に変更を加えるために、1 つの場所から更新するだけで済みます。また、AJAX の読み込みの場合は、HTML を JSON 形式で読み込みます。これにより、外部スクリプトや CSS ファイル、ステータス インジケーターなどの他の変数を JSON に追加できます (コードがより整理されます)。

于 2013-06-23T18:51:45.477 に答える
0

これはスタンドアロンの例です。実行後、次の点に注意してください。

  • <head>タグに jQuery/jQueryUI ライブラリをロードする
  • クリックされた画像の識別: (1)imgクラスの要素がクリックされるたびにクリック イベントをトリガーし、(2) jQuery を介してその特定の画像の ID を取得する
  • AJAX を使用してそのイメージ ID を PHP プロセッサ ファイルに送信する
  • PHP プロセッサ ファイルは何らかの処理を行い、結果を返します
  • AJAX 成功関数で受け取った PHP からの結果。(PHP から) 受信したデータを使用するすべての処理は、JQUI dlg の呼び出しを含め、success 関数内で行わなければなりません。
  • JQUI dlg は TEST.PHP の空の DIV として始まり、AJAX 成功関数内にマークアップが取り込まれます。$('#dlgID').html(data_received_from_PHP);
  • [OK] ボタンがクリックされたら、忘れずに JQUI dlg を閉じてください (または、そのコマンドをclose:JQUI dlg のセクションに入れることもできます)。

この簡単な例を実行するには、次の 2 つのファイルが必要です。

ファイル 1: TEST.PHP

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

        <style>
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                $('.img').click(function() {
                    var iid = $(this).attr('id');
                    //alert('You clicked ID: ' + iid);
                    $.ajax({
                        type: "POST",
                        url: "yogibear.php", // "source.php",
                        data: "iid="+iid,
                        success: function(data) {
                            //alert('AJAX recd: ' +data);
                            $('#moddlg').html(data);
                            $('#moddlg').dialog('open');
                        } //END success fn
                    }); //END $.ajax

                });
                $('#moddlg').dialog({
                    autoOpen: false,
                    modal: true,
                    width: 400, //default is 300
                    title: 'This is yer dialog:',
                    buttons: {
                        'Click Me': function() {
                            $(this).dialog('close');
                        }
                    },
                    close: function() {
                        alert('Dlg is closing... I can do more stuff in here, including running another AJAX call');
                    }
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <img id="i-1" class="img" src="http://placehold.it/140x100" />
    <img id="i-2" class="img" src="http://placehold.it/140x100" />
    <img id="i-3" class="img" src="http://placehold.it/140x100" />
    <img id="i-4" class="img" src="http://placehold.it/140x100" />
    <div id="moddlg"></div>

</body>
</html>

ファイル 2: YOGIBEAR.PHP

<?php
    $x = $_POST['iid'];
    die('PHP file recd: ' . $x);
    //Of course, this is where you receive the img id sent via AJAX
    //and look up stuff in MySQL or etc, then return the results
    //simply by putting it all into a variable and ECHOing that
    //variable. Or, you can use JSON to echo an array - but make
    //sure to look up a couple of examples as you must add another
    //couple of params to the AJAX code block
于 2013-06-23T21:05:50.157 に答える