手順 2：ウィジェットの初期化

前の手順では、ポップアップに表示するコンテンツを追加するマークアップを追加しました。この手順では、ウィジェットを初期化するために必要な jQuery スクリプトを追加します。

以下の手順を実行します。

前の手順で追加した </div>終了タグの後に、以下の jQuery スクリプトを入力して wijpopup ウィジェットを初期化します。

ソースビュー	コードのコピー
<script type="text/javascript"> $(function () { $("#food").wijpopup({ autoHide: true, showEffect: 'blind', hideEffect: 'blind' }); }); function popupbeside() { $("#food").wijpopup('show', { of: $('#Button1') }); } </script>

ソースビュー

コードのコピー

<script type="text/javascript">
    $(function () {
        $("#food").wijpopup({
        autoHide: true,
        showEffect: 'blind',
        hideEffect: 'blind'
        });
    });
    function popupbeside() {
        $("#food").wijpopup('show', {
            of: $('#Button1')
        });
    }
</script>

このスクリプトは、ウィジェットを初期化し、ボタンをクリックしたときに画像が表示される場所を指定する関数を作成します。

アプリケーションを作成し、wijpopup ウィジェットを追加して初期化しました。次の　「手順 3：プロジェクトの実行」　では、ウィジェットの実行時のインタラクティブ操作を確認します。