▼Adobe AIRメモ▼
メニュー


メニューを利用するHTMLアプリケーションを作成する。


ソースコード
root.html 
<html>
    <head>
    </head>
    <frameset>
        <frame id="UI"
            src="MenuEx.html"
            sandboxRoot="http://npaka.net/"
            documentRoot="app:/"
            width="100%" 
            height="100%">
        </frame>        
    </frameset>
</html>

MenuEx.html 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>MenuEx</title>
    
    <!--ライブラリ-->
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    
    <!--プログラム-->
    <script type="text/javascript" src="MenuEx.js"></script>

    <!--スタイルシート-->
    <style type="text/css">
    .calendar .x-menu-item-icon {
        background-image:url(resources/images/default/shared/calendar.gif);
    }
    </style>
</head>
<body>
    <!--メニューバー-->
    <div id="menubar"></div>
</body>
</html>

MenuFormEx.js 
//メニュー
menuEx=function(){
    var CheckItem=Ext.menu.CheckItem;
    var ColorMenu=Ext.menu.ColorMenu;
    var DateMenu=Ext.menu.DateMenu;
    var Menu=Ext.menu.Menu;
        var MessageBox=Ext.MessageBox;
    var Toolbar=Ext.Toolbar;
    
    return {
        //初期化
        init : function(){
            //メニューバーの生成
            var menubar=new Toolbar('menubar');
            
            //メニューの追加
            menubar.add(
                //メニュー1
                {
                    text:'メニュー1',            //テキスト
                    cls :'x-btn-text-icon bmenu',//クラス
                    menu:menuEx.makeMenu1()        //メニュー
                },
        
                //メニュー2
                {
                    text:'メニュー2',            //テキスト
                    cls :'x-btn-text-icon bmenu',//クラス
                    menu:menuEx.makeMenu2()        //メニュー
                }
            );
        },
    
        //メニュー1の生成
        makeMenu1 : function(){
            //メニューの生成
            var menu=new Menu({
                id   :'menu2',
                items:[
                    //ボールド
                    {
                        id     :'mi_bold',
                        text   :'<b>ボールド</b>',
                        handler:menuEx.onItemClick
                    },
                    //イタリック
                    {
                        id     :'mi_italic',
                        text   :'<i>イタリック</i>',
                        handler:menuEx.onItemClick
                    },
                    //アンダーライン
                    {
                        id     :'mi_underline',
                        text   :'<u>アンダーライン</u>',
                        handler:menuEx.onItemClick
                    } 
                ]
            });
            return menu;
        },

        //メニュー2の生成
        makeMenu2 : function(){
            //メニューの生成
            var menu=new Menu({
                id   :'menu1',
                items:[
                    //チェックアイテム
                    new CheckItem({
                        text        :'チェックアイテム',//テキスト
                        checked     :true,              //チェック済み
                        checkHandler:menuEx.onItemCheck //ハンドラ
                    }),
                    //ラジオオプション
                    {
                        text:'ラジオオプション',//テキスト
                        menu:{
                            items: [
                                //ラジオ項目1
                                new CheckItem({
                                    text        :'ラジオ項目1',    //テキスト
                                    checked     :true,             //チェック
                                    group       :'theme',          //グループ
                                    checkHandler:menuEx.onItemCheck//ハンドラ
                                }),
                                //ラジオ項目1
                                new CheckItem({
                                    text        :'ラジオ項目2',    //テキスト
                                    group       :'theme',          //グループ
                                    checkHandler:menuEx.onItemCheck//ハンドラ
                                })
                            ]
                        }
                    },
                    //セパレータ 
                    '-', 
                    //日付メニュー
                    {
                        text:'日付メニュー',//テキスト
                        cls :'calendar',//クラス
                        menu:new DateMenu({
                            handler:menuEx.onDateClick
                        })
                    },
                    //色メニュー
                    {
                        text:'色メニュー',//テキスト
                        menu:new ColorMenu({
                            handler:menuEx.onColorClick
                        })
                    }
                ]
            });
            return menu;
        },

        //項目クリックイベントの処理
        onItemClick : function(item){
            MessageBox.alert('結果','項目クリック>'+item.id+','+item.text);
        },
        
        //項目チェックイベントの処理
        onItemCheck : function(item,checked){
            MessageBox.alert('結果','項目チェック>'+item.text+','+checked);
        },
        
        //日付クリックイベントの処理
        onDateClick : function(dp,date){
            var year=date.getYear();
            year=(year<2000)?year+1900:year;
            MessageBox.alert('結果','日付クリック>'+
                year+'/'+(date.getMonth()+1)+'/'+date.getDate());
        },
        
        //色クリックイベントの処理
        onColorClick : function(cm,color){
            if (color==null) {
            } else if (typeof(color)=='string' || 
                color instanceof String) {
                MessageBox.alert('結果','色クリック>'+color);
            }
        }
    }
}();
Ext.onReady(menuEx.init,menuEx,true);




−戻る−