Ext JSやRapid Driveなど
システム開発の技術情報をご紹介。
![お電話でお気軽にお問い合わせくださいTel 03-6805-2904 営業時間 [平日]AM 9:30 - PM 6:30](../../../resources/images/tel.gif)
Ext.ux.Menu
Ext.ux.Menu サンプル
Ext.ux.Menuは、Ext Coreのサンプルに同胞されています。
また、ここで公開しているExt.ux.Menuは以下の点を修正したバージョンを配布しています。
- .ux-menu-containerクラスのMac FireFoxにてテキストが自動的に折り返してしまうバグを修正
- リンク先が#に設定されている際、クイックイベントを発生させず即座にメニューを表示するように修正
ライセンス
MITライセンス
ダウンロード
Ext Coreに同胞されているソースコードを扱いやすいようにパッケージしました。
利用手順
Step.1 読み込み
パッケージに含まれる以下のファイルをコンテンツに読み込みます。
- ux/menu/menu.css
- ux/menu/menu.js
Step.2 メニュー用リスト作成
<ul id="ext-js-menu-h" style="display:none;">
<li>
<a href="#">Ext JS</a>
<ul>
<li>
<a href="http://extjs.com/">Official Page</a>
</li>
<li>
<a href="http://extjs.com/products/extjs/">Overview</a>
</li>
<li>
<a href="http://extjs.com/deploy/dev/examples/samples.html">Examples & Demos</a>
</li>
</ul>
</li>
<li>
<a href="http://www.google.com/">Google</a>
</li>
<li>
<a href="http://www.yahoo.co.jp/index.html">Yahoo!</a>
</li>
</ul>
<ul id="ext-js-menu-v" style="display:none;">
<li>
<a href="#">Ext JS</a>
<ul>
<li>
<a href="http://extjs.com/">Official Page</a>
</li>
<li>
<a href="http://extjs.com/products/extjs/">Overview</a>
</li>
<li>
<a href="http://extjs.com/deploy/dev/examples/samples.html">Examples & Demos</a>
</li>
</ul>
</li>
<li>
<a href="http://www.google.com/">Google</a>
</li>
<li>
<a href="http://www.yahoo.co.jp/index.html">Yahoo!</a>
</li>
</ul>
ここでは、2つのメニューを作成しました。一つは水平メニュー、もう一つは垂直メニューです。
Step.3 適用
Step.2で作成したリストに対して、メニューを適用します。
Ext.onReady(function() {
Ext.fly( 'ext-js-menu-h' ).setStyle( 'display', 'inline' );
Ext.fly( 'ext-js-menu-v' ).setStyle( 'display', 'inline' );
new Ext.ux.Menu( 'ext-js-menu-h', {});
new Ext.ux.Menu( 'ext-js-menu-v', {
direction: 'vertical'
});
});
コンフィグオプションでdirectionをverticalに設定することで、垂直メニューになります。
垂直メニュー
