マークアップとスクリプティング

wijpopup ウィジェットのマークアップは次のようになります。

マークアップ	コードのコピー
<!-- Any items that display when the button is clicked. --> <div id="myText"> <p>This is my text.</p> </div> <!-- Button that calls the popupbelow function and shows the popup items. --> <div> <input type="button" id="showbtn" onclick="popupbelow();" value="Show Popup" /> </div>

マークアップ

コードのコピー

<!-- Any items that display when the button is clicked. -->
<div id="myText"> 
    <p>This is my text.</p> 
</div>
 
<!-- Button that calls the popupbelow function and shows the popup items. -->
<div> 
    <input type="button" id="showbtn" onclick="popupbelow();" value="Show Popup" /> 
</div>

次のようなスクリプトでポップアップを初期化できます。ポップアップの位置設定の詳細については、「jQuery UI の位置」を参照してください。

スクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#myText").wijpopup({ //Sets the popup items to be hidden again //when the user clicks elsewhere. autoHide:'true' }); }); //Function that is called in the button onclick event. function popupbelow() { //Shows the popup items. $("#myText").wijpopup('show', { //Sets the position to just below the button. of: $('#showbtn') }); }; </script>

スクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () { 
        $("#myText").wijpopup({ 
            //Sets the popup items to be hidden again
            //when the user clicks elsewhere.
            autoHide:'true'
        }); 
    }); 
    //Function that is called in the button onclick event.
    function popupbelow() { 
        //Shows the popup items.
        $("#myText").wijpopup('show', { 
            //Sets the position to just below the button.
            of: $('#showbtn')
        }); 
    };
</script>

ここで説明しているマークアップとスクリプトの結果は次のようになります。ボタンをクリックすると、テキストが表示されます。

関連トピック

参照