jQuery UI の Menu による多階層メニューのサブメニューアイコンを変更

jQuery UI の Menu Widget の多階層メニューにおけるサブメニューアイコンを変更する方法。

実装例(サンプル)

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

各アイコンボタンをクリックすると、多階層メニューにおけるサブメニューアイコンを変更する。

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

読み込み

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

<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

menu( { icons: { submenu: "アイコンの種類" } } )で、サブメニューアイコンの種類を指定している。

<script>
jQuery( function() {
    jQuery( '#jqueryUiButton1' ) . button( {
        icons: {
            primary: 'ui-icon-carat-1-e',
        },
        text: false
    } );
    jQuery( '#jqueryUiButton2' ) . button( {
        icons: {
            primary: 'ui-icon-triangle-1-e',
        },
        text: false
    } );
    jQuery( '#jqueryUiButton3' ) . button( {
        icons: {
            primary: 'ui-icon-circle-triangle-e',
        },
        text: false
    } );
    jQuery( '#jqueryUiButton4' ) . button( {
        icons: {
            primary: 'ui-icon-folder-collapsed',
        },
        text: false
    } );
    jQuery( '#jqueryUiButton1' ) . click( function () {
        jQuery( "#sampleMenu" ).menu( { icons: { submenu: "ui-icon-carat-1-e" } } );
    } );
    jQuery( '#jqueryUiButton2' ) . click( function () {
            jQuery( "#sampleMenu" ).menu( { icons: { submenu: "ui-icon-triangle-1-e" } } );
    } );
    jQuery( '#jqueryUiButton3' ) . click( function () {
            jQuery( "#sampleMenu" ).menu( { icons: { submenu: "ui-icon-circle-triangle-e" } } );
    } );
    jQuery( '#jqueryUiButton4' ) . click( function () {
            jQuery( "#sampleMenu" ).menu( { icons: { submenu: "ui-icon-folder-collapsed" } } );
    } ) . click();
} );
</script>

CSS

<style>
<!--
.ui-menu {
    width: 200px;
    font-size: 12px;
}
#jqueryUiButton {
    font-size: 12px;
}
-->
</style>

HTML

<ul id="sampleMenu">
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a>
        <ul id="sampleMenu">
            <li><a href="#">メニュー2-1</a>
                <ul id="sampleMenu">
                    <li><a href="#">メニュー2-1-1</a></li>
                    <li><a href="#">メニュー2-1-2</a></li>
                    <li><a href="#">メニュー2-1-3</a></li>
                </ul>
            </li>
            <li><a href="#">メニュー2-2</a></li>
            <li><a href="#">メニュー2-3</a></li>
        </ul>
    </li>
    <li><a href="#">メニュー3</a></li>
    <li><a href="#">メニュー4</a>
        <ul id="sampleMenu">
            <li><a href="#">メニュー4-1</a></li>
            <li><a href="#">メニュー4-2</a></li>
            <li><a href="#">メニュー4-3</a></li>
        </ul>
    </li>
    <li><a href="#">メニュー5</a></li>
</ul>

スポンサード リンク

カテゴリー: GUI, JavaScript, jQuery, jQuery UI, Menu, メニュー パーマリンク