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

投稿日: 2013年4月3日作成者: alphasis

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>

</style>

HTML

<ul id="sampleMenu">
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a>
<ul id="sampleMenu">
<li><a href="#">メニュー２－１</a>
<ul id="sampleMenu">
<li><a href="#">メニュー２－１－１</a></li>
<li><a href="#">メニュー２－１－２</a></li>
<li><a href="#">メニュー２－１－３</a></li>
</ul>
</li>
<li><a href="#">メニュー２－２</a></li>
<li><a href="#">メニュー２－３</a></li>
</ul>
</li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a>
<ul id="sampleMenu">
<li><a href="#">メニュー４－１</a></li>
<li><a href="#">メニュー４－２</a></li>
<li><a href="#">メニュー４－３</a></li>
</ul>
</li>
<li><a href="#">メニュー５</a></li>
</ul>

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