小菜毛毛技术分享

与大家共同成长

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  164 Posts :: 141 Stories :: 94 Comments :: 0 Trackbacks

本菜单的效果

 

完整代码下载

 

详细代码:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <title>EXT MenuTest..........</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="build/locale/ext-lang-zh_CN.js"></script>

        <script type="text/javascript">

           

        /**

         * 颜超群

         * 2008.05.31

         *

         *

         *菜单

         *

         * 所在包:   Ext.menu

         *

         * 所有菜单类:

         *      Ext.menu.Adapter   

         *      Ext.menu.BaseItem  

         *      Ext.menu.CheckItem

         *      Ext.menu.ColorItem

         *      Ext.menu.ColorMenu

         *      Ext.menu.DateItem

         *      Ext.menu.Item

         *      Ext.menu.Menu

         *      Ext.menu.MenuMgr

         *      Ext.menu.Separator

         *                

         */

            /*

             * 最常用的菜单类

             * Ext.menu.Menu

             * 属性:items    可以放菜单包中所有的实例,一般我们常用Ext.menu.Item

             *

             * Ext.menu.Item属性:

             *

             * handler      处理函数

             * hideDelay    隐藏延迟,默认100毫秒

             * hideOnClick  是否点击菜单项后自动隐藏,默认是true

             * href         指定链接地址

             * hrefTarget   链接打开的发式

             * icon         可以指定在菜单项前面显示的图标,默认没有图标

             * text         菜单项显示的文本,可以使用Html

             *

             */

           

           

            Ext.onReady(function(){

               

                var menu1=new Ext.menu.Menu({

                    items:[{                //菜单项的集合

                        text:"颜超群",      //菜单项的文本,

                        href:"http://jaychaoqun.cnblogs.cn",//指定链接地址

                        hrefTarget:"_blank",        //链接打开的发式,在新窗口打开

                        icon:"icon-info.gif"        //菜单项前面的图标

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    }]

                });

                /**

                 * 普通菜单

                 */

                var menu2=new Ext.menu.Menu({

                    items:[{

                        text:"<b>粗体</b>",

                        handler:handlerMenu

                    },{

                        text:"<i>斜体<i>",

                        handler:handlerMenu

                    },{

                        text:"<u>下划线</u>",

                        handler:handlerMenu

                    },{

                        text:"<font color=red>红色字体</font>",

                        handler:handlerMenu

                    }]

                });

               

                /**

                 * 带子菜单的菜单

                 */

                var menu3=new Ext.menu.Menu({

                    items:[{

                        text:"菜单项1",         //菜单项的文本,

                                    //子菜单

                        menu:{items:[{text:"子菜单1",handler:handlerMenu},{text:"子菜单2",handler:handlerMenu},{text:"子菜单3",handler:handlerMenu}]}

                    },{

                        text:"菜单项2",

                        menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]}

                    },{

                        text:"菜单项3",

                        menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]}

                    }]

                });

                /**

                 * 日期菜单和颜色菜单

                 */

                var menu4=new Ext.menu.Menu({

                    items:[{

                        text:"请选择日期",

                        hideDelay:2000,     //延迟隐藏2000毫秒

                        menu:new Ext.menu.DateMenu({    //日期菜单

                            handler:function(db,date){

                                Ext.Msg.alert("Date","您选的日期是"+date.format("Ymd"));

                        }})

                    },{

                        text:"请选择颜色",

                        menu:new Ext.menu.ColorMenu({   //颜色菜单

                            handler:function(cm,color){

                                Ext.Msg.alert("Color","您选择的颜色是: "+color);

                            }

                        })

                    }]

                });

                var panel=new Ext.Panel({ //new 一个Panel 用以显示菜单

                    width:800,          //宽度

                    border:false,       //没有边框

                    renderTo:"div1",    //显示的位置,在body里的一个div

                    tbar:[{text:"导航菜单",menu:menu1},      //把菜单放在Panel的顶部工具栏

                        {text:"普通菜单",menu:menu2},

                        {text:"带子菜单的菜单",menu:menu3},

                        {text:"日期和颜色",menu:menu4}

                    ]

                });

                /**

                 * 用以处理菜单项点击事件

                 * @param {Object} item

                 */

                function handlerMenu(item){

                    Ext.Msg.alert("提示","您点击了"+item.text+"");                

                }

            });        

        </script>

    </head>

    <body>

        <br><br>

        <div align="center" id="div1"></div>

    </body>

</html>

 

posted on 2009-05-05 15:00 小菜毛毛 阅读(8296) 评论(3)  编辑  收藏 所属分类: EXTJS

Feedback

# re: ExtJs制作菜单导航 2010-08-04 13:49 acer
http://item.taobao.com/auction/item_detail.htm?item_num_id=6926065370

无限级菜单,采用json数据传递,ajax访问后台数据,tab展示内容页,可定制门户页。日历及天气信息  回复  更多评论
  

# re: ExtJs制作菜单导航 2010-11-01 11:37 士大夫
帅哥,有没有异步加载的菜单案例啊  回复  更多评论
  

# re: ExtJs制作菜单导航 2010-12-23 15:44 大法师
这些都是最基本的东西,一般项目中用不到,有没有动态的,异步加载的啊,  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: