jQuery UI の Button と Menu によるボタンクリックで現れるメニュー

jQuery UI の Button Widget と Menu Widget で、アイコンボタンをクリックすると現れるメニューを作る方法。

実装例(サンプル)

実装例(サンプル)の動作について

「▼」ボタンをクリックすると、「Menu A~C」のメニューボタンが現れる。

メニューボタンをクリックするか、「▼」ボタン以外の場所をクリックすると、「Menu A~C」のメニューボタンが消える。

実装例(サンプル)のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

<link rel="stylesheet" href="jquery-ui.css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="ui/1.10.2/jquery-ui.js"></script>

JavaScript

<script>
jQuery( function() {
    jQuery( "#sampleSelect" )
        .button( {
            text: false,
            icons: {
                primary: "ui-icon-triangle-1-s"
            }
        } )
        .click( function() {
                var menu = jQuery( this ).parent().next().show().position( {
                    my: "left top",
                    at: "left bottom",
                    of: this
                } );
                jQuery( document ).one( "click", function() {
                    menu.hide();
                } );
                return false;
        } )
        .parent()
        .buttonset()
        .next()
        .hide()
        .menu();
} );
</script>

CSS

<style>
<!--
#sample {
    width: 200px;
}
-->
</style>

HTML

<div id="sample">
    <div>
        <button id="sampleSelect">Select</button>
    </div>
    <ul>
        <li><a href="#A">Menu A</a></li>
        <li><a href="#B">Menu B</a></li>
        <li><a href="#C">Menu C</a></li>
    </ul>
</div>

スポンサード リンク

カテゴリー: Button, GUI, JavaScript, jQuery, jQuery UI パーマリンク