精华内容
下载资源
问答
  • Menu

    千次阅读 2016-03-13 00:37:12
    菜单的基本使用官方APImenu-resource在Android中,菜单被分为如下三种,选项菜单(OptionsMenu)、上下文菜单(ContextMenu)和子菜单(SubMenu)OptionsMenu效果图说明 重写两个方法 public boolean ...

    菜单的基本使用

    官方API

    menu-resource

    在Android中,菜单被分为如下三种,选项菜单(OptionsMenu)、上下文菜单(ContextMenu)和子菜单(SubMenu)

    OptionsMenu

    效果图

    这里写图片描述

    说明

    • 重写两个方法 public boolean onCreateOptionsMenu(Menu menu):调用OptionMenu,在这里完成菜单初始化,只会在第一次初始化菜单时调用
    • public boolean onOptionsItemSelected(MenuItem item):菜单项被选中时触发,这里完成事件处理

    当然除了上面这两个方法我们可以重写外我们还可以重写这三个方法:

    • public void onOptionsMenuClosed(Menu menu):菜单关闭会调用该方法
    • public boolean onPrepareOptionsMenu(Menu menu):选项菜单显示前会调用该方法, 可在这里进行菜单的调整(动态加载菜单列表)
    • public boolean onMenuOpened(int featureId, Menu menu):选项菜单打开以后会调用这个方法

    加载菜单的方式有两种,
    一种是直接通过编写菜单XML文件,然后调用: getMenuInflater().inflate(R.menu.XXXX, menu);加载菜单
    或者通过代码动态添加,onCreateOptionsMenu的参数menu,调用add方法添加 菜单,add(菜单项的组号,ID,排序号,标题),另外如果排序号是按添加顺序排序的话都填0即可!

    Code

    package com.turing.base.activity.menu;
    
    import android.graphics.Color;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.TextView;
    
    import com.turing.base.R;
    
    /**
     * 最常用的就是选项菜单(optionsMenu),
     * 该菜单在点击 menu 按键 后会在对应的Activity底部显示出来。(4.4以前)
     * Activity菜单机制 ,Activity有一套机制来实现对菜单的管理 就是下面重写的几个方法
     */
    public class OPtionMenuDemoAct extends AppCompatActivity {
    
        private TextView textView;
    
    
    
        //1.定义不同颜色的菜单项的标识:
        final private int RED = 110;
        final private int GREEN = 111;
        final private int BLUE = 112;
        final private int YELLOW = 113;
        final private int GRAY= 114;
        final private int CYAN= 115;
        final private int BLACK= 116;
    
    
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_option_menu_demo);
    
            textView = (TextView) findViewById(R.id.id_tv_optionMenuText);
        }
    
    
        /**
         * 两种方式  1.通过menu的xml加载,2 通过代码动态创建
         *
         * @param menu
         * @return
         */
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            /**
             * 此方法用于初始化菜单,其中menu参数就是即将要显示的Menu实例。 返回true则显示该menu,false 则不显示;
             * (只会在第一次初始化菜单时调用)
             * Inflate the menu; this adds items to the action bar  if it is present.
             */
    
    
            /**
             * 通过xml加载菜单
             *  getMenuInflater().inflate(R.menu.options_menu, menu);
             调用Activity的getMenuInflater()得到一个MenuInflater,
             使用inflate方法来把布局文件中的定义的菜单 加载给 第二个参数所对应的menu对象
    
             如果需要设置图片,可以在xml中设置 android:icon="@drawable/setting"
             高版本的SDK,即使设置了 Icon,也不会显示的。低版本的会显示
             */
    
            //getMenuInflater().inflate(R.menu.menu_main,menu);
    
    
            /**
             *
             * 第二种方式: 通过代码动态创建
             *
             *  menu.add((int groupId, int itemId, int order, charsequence title) .setIcon(drawable ID)
    
             add()方法的四个参数,依次是:
    
             1、组别,如果不分组的话就写Menu.NONE,
    
             2、Id,这个很重要,Android根据这个Id来确定不同的菜单
    
             3、顺序,哪个菜单项在前面由这个参数的大小决定
    
             4、文本,菜单项的显示文本
    
             add()方法返回的是MenuItem对象,调用其setIcon()方法,为相应MenuItem设置Icon
             高版本的SDK,即使设置了 Icon,也不会显示的。2.3低版本的会显示
             */
    
            // 高版本的SDK,即使设置了 Icon,也不会显示的。低版本的会显示
            menu.add(1,RED,4,"红色").setIcon(R.drawable.flag_mark_red);
            menu.add(1,GREEN,2,"绿色").setIcon(R.drawable.flag_mark_green);
            menu.add(1,BLUE,3,"蓝色").setIcon(R.drawable.flag_mark_blue);
            menu.add(1,YELLOW,1,"黄色").setIcon(R.drawable.flag_mark_yellow);
            menu.add(1,GRAY,5,"灰色").setIcon(R.drawable.flag_mark_gray);
            menu.add(1,CYAN,6,"蓝绿色").setIcon(R.drawable.gur_project_10);
            menu.add(1,BLACK,7,"黑色").setIcon(R.drawable.gur_project_5);
    
    
    
            // 返回true则显示该menu,false 则不显示;
            return true;
        }
    
        @Override
        public boolean onPrepareOptionsMenu(Menu menu) {
            /**
             * 在onCreateOptionsMenu执行后,菜单被显示前调用;
             * 如果菜单已经被创建,则在菜单显示前被调用。
             * 同样的,返回true则显示该menu,false 则不显示;
             * (可以通过此方法动态的改变菜单的状态,比如加载不同的菜单等)
             */
            return super.onPrepareOptionsMenu(menu);
        }
    
    
        @Override
        public void onOptionsMenuClosed(Menu menu) {
            /**
             * 每次菜单被关闭时调用.
             * (菜单被关闭有三种情形,menu按钮被再次点击、back按钮被点击或者用户选择了某一个菜单项)
             */
            super.onOptionsMenuClosed(menu);
        }
    
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            /**
             * 菜单项被点击时调用,也就是菜单项的监听方法。
             * 通过这几个方法,可以得知,对于Activity,同一时间只能显示和监听一个Menu 对象。
             */
    
            switch ( item.getItemId()){
                case RED:  //对应的ID就是在add方法中所设定的Id
                    textView.setTextColor(Color.RED);
                    break;
                case GREEN:
                    textView.setTextColor(Color.GREEN);
                    break;
                case BLUE:
                    textView.setTextColor(Color.BLUE);
                    break;
                case YELLOW:
                    textView.setTextColor(Color.YELLOW);
                    break;
                case GRAY:
                    textView.setTextColor(Color.GRAY);
                    break;
                case CYAN:
                    textView.setTextColor(Color.CYAN);
                    break;
                case BLACK:
                    textView.setTextColor(Color.BLACK);
                    break;
            }
    
            /**
             * 如果是通过xml加载的菜单选项,那么Id就是布局文件中定义的Id,在用R.id.XXX的方法获取出来
             */
    
    
            return super.onOptionsItemSelected(item);
        }
    }
    

    在Android 3.0或者更高的版本,则是通过3.0引入的ActionBar中的setting菜单:

    在5.0以上的版本则是在ToolBar中的,点击后出一个溢出式的菜单样式


    ContextMenu

    效果图

    这里写图片描述

    说明

    长按某个View后出现的菜单,我们需要为这个View注册上下文菜单!

    操作步骤

    • Step 1:重写onCreateContextMenu()方法
    • Step 2:为view组件注册上下文菜单,使用 - registerForContextMenu()方法,参数是View
    • Step 3:重写onContextItemSelected()方法为菜单项指定事件监听器

    在这里我们通过xml来加载,当然了也可以用代码创建~

    Code

    res\menu\menu_context.xml

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 定义一组单选按钮 -->
        <!-- checkableBehavior的可选值由三个:
            single设置为单选,
            all为多选,none为普通选项 -->
        <group android:checkableBehavior="none">
            <item
                android:id="@+id/op1"
                android:title="选项一" />
            <item
                android:id="@+id/op2"
                android:title="选项二" />
            <item
                android:id="@+id/op3"
                android:title="选项三" />
        </group>
    
    </menu>
    

    ContextMenuDemoAct.java

    package com.turing.base.activity.menu;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.ContextMenu;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.Toast;
    
    import com.turing.base.R;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * 长按某个View后出现的菜单,我们需要为这个View注册上下文菜单!
     * <p/>
     * 使用的流程如下:
     * Step 1:重写onCreateContextMenu()方法
     * Step 2:为view组件注册上下文菜单,使用registerForContextMenu()方法,参数是View
     * Step 3:重写onContextItemSelected()方法为菜单项指定事件监听器
     *
     *
     *
     * 上下文菜单无法显示图标!
     */
    public class ContextMenuDemoAct extends AppCompatActivity {
    
        private ListView listView;
        private List dataList = new ArrayList();
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_context_menu_demo);
    
    
            listView = (ListView) findViewById(R.id.id_listView);
    
            for (int i = 0; i < 20; i++) {
                dataList.add(i);
            }
            ArrayAdapter adapter = new ArrayAdapter(ContextMenuDemoAct.this,
                    android.R.layout.simple_list_item_1, dataList);
            listView.setAdapter(adapter);
    
    
            registerForContextMenu(listView);
    
    
            listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    Toast.makeText(ContextMenuDemoAct.this, "onItemClick", Toast.LENGTH_SHORT).show();
                }
            });
    
    
        }
    
    
        //重写上下文菜单的创建方法
        @Override
        public void onCreateContextMenu(ContextMenu menu, View v, ContextMenu.ContextMenuInfo menuInfo) {
    
            getMenuInflater().inflate(R.menu.menu_context,menu);
    
            super.onCreateContextMenu(menu, v, menuInfo);
        }
    
    
    
    
        //上下文菜单被点击是触发该方法
        @Override
        public boolean onContextItemSelected(MenuItem item) {
    
            switch (item.getItemId()){
    
                case R.id.op1:
                    Toast.makeText(this,"op1",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.op2:
                    Toast.makeText(this,"op2",Toast.LENGTH_SHORT).show();
                    break;
                case R.id.op3:
                    Toast.makeText(this,"op3",Toast.LENGTH_SHORT).show();
                    break;
            }
    
            return true;
        }
    }
    

    SubMenu

    效果图

    这里写图片描述

    说明

    所谓的子菜单只是在<item>中又嵌套了一层<menu>,仅此而已。

    Code

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:id="@+id/submenu"
            android:title="子菜单使用演示~">
            <menu>
                <group android:checkableBehavior="none">
                    <item
                        android:id="@+id/one"
                        android:title="子菜单一" />
                    <item
                        android:id="@+id/two"
                        android:title="子菜单二" />
                    <item
                        android:id="@+id/three"
                        android:title="子菜单三" />
                </group>
            </menu>
        </item>
    </menu>
    package com.turing.base.activity.menu;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.ContextMenu;
    import android.view.MenuInflater;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import com.turing.base.R;
    
    /**
     * 所谓的子菜单只是在<**item**>中又嵌套了一层<**menu**>而已
     * <p/>
     * 在Java代码中添加子菜单的话,可以调用addSubMenu()
     * 比如:SubMenu file = menu.addSubMenu("文件");file还需要addItem添加菜单项!
     */
    public class SubMenuDemoAct extends AppCompatActivity {
    
        private TextView textView ;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_sub_menu_demo);
    
            textView = (TextView) findViewById(R.id.id_tv_info);
    
            registerForContextMenu(textView);
        }
    
    
        public void onCreateContextMenu(ContextMenu menu, View v,
                                        ContextMenu.ContextMenuInfo menuInfo) {
            //子菜单部分:
            MenuInflater inflator = new MenuInflater(this);
            inflator.inflate(R.menu.menu_sub, menu);
            super.onCreateContextMenu(menu, v, menuInfo);
        }
    
        @Override
        public boolean onContextItemSelected(MenuItem item) {
            switch (item.getItemId()) {
                case R.id.one:
                    Toast.makeText(SubMenuDemoAct.this, "你点击了子菜单一", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.two:
                    item.setCheckable(true);
                    Toast.makeText(SubMenuDemoAct.this, "你点击了子菜单二", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.three:
                    Toast.makeText(SubMenuDemoAct.this, "你点击了子菜单三", Toast.LENGTH_SHORT).show();
                    item.setCheckable(true);
                    break;
            }
            return true;
        }
    
    
    }
    

    PopupMenu

    效果图

    这里写图片描述

    说明

    一个类似于PopupWindow的控件,他可以很方便的在指定View下显示一个弹出菜单,而且 他的菜单选项可以来自于Menu资源。

    Code

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:id="@+id/see" android:title="查看" />
        <item android:id="@+id/download" android:title="下载" />
    </menu>

    PopupMenuDemoAct.java

    package com.turing.base.activity.menu;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.PopupMenu;
    import android.view.Gravity;
    import android.view.MenuItem;
    import android.view.View;
    import android.widget.Toast;
    
    import com.turing.base.R;
    
    public class PopupMenuDemoAct extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_popup_menu_demo);
        }
    
    
    
    
        public void showPopupMenu(View view ){
            // 初始化PopupMenu控件
            PopupMenu popup = new PopupMenu(PopupMenuDemoAct.this,view);
            // 加载菜单选项
            popup.getMenuInflater().inflate(R.menu.menu_pop, popup.getMenu());
    
            // 设置显示位置
            popup.setGravity(Gravity.RIGHT);
    
            // 设置监听事件
            popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                @Override
                public boolean onMenuItemClick(MenuItem item) {
                    switch (item.getItemId()){
                        case R.id.see:
                            Toast.makeText(PopupMenuDemoAct.this, "查看",
                                    Toast.LENGTH_SHORT).show();
                            break;
                        case R.id.download:
                            Toast.makeText(PopupMenuDemoAct.this,"下载",
                                    Toast.LENGTH_SHORT).show();
                            break;
                    }
                    return true;
                }
            });
            // 显示PopupMenu控件
            popup.show();
        }
    }
    
    

    自定义布局菜单

    效果图

    这里写图片描述

    说明

    替换Android菜单实现自定义菜单风格
    这里menuView是自定的菜单风格,是一个View。

    最重要的是:onCreateOptionsMenu + onMenuOpened

    /** 
     * 创建MENU 
     */
    public boolean onCreateOptionsMenu(Menu menu) { 
       menu.add("menu");// 必须创建一项 
       return super.onCreateOptionsMenu(menu); 
    } 
    
    /** 
     * 拦截MENU事件,显示自己的菜单 
     */
    @Override 
    public boolean onMenuOpened(int featureId, Menu menu) { 
       if (menuDialog == null) { 
        menuDialog = new AlertDialog.Builder(this).setView(menuView).show(); 
       } else { 
        menuDialog.show(); 
       } 
       return false;// 返回为true 则显示系统menu 
    }

    Code

    CustomizeMenu.java

    package com.turing.base.activity.menu;
    
    import android.content.DialogInterface;
    import android.os.Bundle;
    import android.support.v7.app.AlertDialog;
    import android.support.v7.app.AppCompatActivity;
    import android.view.KeyEvent;
    import android.view.Menu;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.GridView;
    import android.widget.SimpleAdapter;
    
    import com.turing.base.R;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    
    public class CustomizeMenu extends AppCompatActivity {
    
        private boolean isMore = false;// menu菜单翻页控制
        AlertDialog menuDialog;// menu菜单Dialog
        GridView menuGrid;
        View menuView;
    
        private final int ITEM_SEARCH = 0;// 搜索
        private final int ITEM_FILE_MANAGER = 1;// 文件管理
        private final int ITEM_DOWN_MANAGER = 2;// 下载管理
        private final int ITEM_FULLSCREEN = 3;// 全屏
        private final int ITEM_MORE = 11;// 菜单
    
    
        /**
         * 菜单图片
         **/
        int[] menu_image_array = {
                R.drawable.menu_search,
                R.drawable.menu_filemanager, R.drawable.menu_downmanager,
                R.drawable.menu_fullscreen, R.drawable.menu_inputurl,
                R.drawable.menu_bookmark, R.drawable.menu_bookmark_sync_import,
                R.drawable.menu_sharepage, R.drawable.menu_quit,
                R.drawable.menu_nightmode, R.drawable.menu_refresh,
                R.drawable.menu_more};
        /**
         * 菜单文字
         **/
        String[] menu_name_array = {
                "搜索", "文件管理", "下载管理", "全屏", "网址", "书签",
                "加入书签", "分享页面", "退出", "夜间模式", "刷新", "更多"};
        /**
         * 菜单图片2
         **/
        int[] menu_image_array2 = {
                R.drawable.menu_auto_landscape,
                R.drawable.menu_penselectmodel, R.drawable.menu_page_attr,
                R.drawable.menu_novel_mode, R.drawable.menu_page_updown,
                R.drawable.menu_checkupdate, R.drawable.menu_checknet,
                R.drawable.menu_refreshtimer, R.drawable.menu_syssettings,
                R.drawable.menu_help, R.drawable.menu_about, R.drawable.menu_return};
        /**
         * 菜单文字2
         **/
        String[] menu_name_array2 = {
                "自动横屏", "笔选模式", "阅读模式", "浏览模式", "快捷翻页",
                "检查更新", "检查网络", "定时刷新", "设置", "帮助", "关于", "返回"};
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_customize_menu);
    
    
            menuView = View.inflate(this, R.layout.gridview_menu, null);
            // 创建AlertDialog
            menuDialog = new AlertDialog.Builder(this).create();
            menuDialog.setView(menuView);
            menuDialog.setOnKeyListener(new DialogInterface.OnKeyListener() {
                public boolean onKey(DialogInterface dialog, int keyCode,
                                     KeyEvent event) {
                    if (keyCode == KeyEvent.KEYCODE_MENU)// 监听按键
                        dialog.dismiss();
                    return false;
                }
            });
    
            menuGrid = (GridView) menuView.findViewById(R.id.gridview);
            menuGrid.setAdapter(getMenuAdapter(menu_name_array, menu_image_array));
            /** 监听menu选项 **/
            menuGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                                        long arg3) {
                    switch (arg2) {
                        case ITEM_SEARCH:// 搜索
    
                            break;
                        case ITEM_FILE_MANAGER:// 文件管理
    
                            break;
                        case ITEM_DOWN_MANAGER:// 下载管理
    
                            break;
                        case ITEM_FULLSCREEN:// 全屏
    
                            break;
                        case ITEM_MORE:// 翻页
                            if (isMore) {
                                menuGrid.setAdapter(getMenuAdapter(menu_name_array2,
                                        menu_image_array2));
                                isMore = false;
                            } else {// 首页
                                menuGrid.setAdapter(getMenuAdapter(menu_name_array,
                                        menu_image_array));
                                isMore = true;
                            }
                            menuGrid.invalidate();// 更新menu
                            menuGrid.setSelection(ITEM_MORE);
                            break;
                    }
                }
            });
        }
    
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // 必须创建一项,否则不显示...
            menu.add("menu");
            return super.onCreateOptionsMenu(menu);
        }
    
        private SimpleAdapter getMenuAdapter(String[] menuNameArray,
                                             int[] imageResourceArray) {
            ArrayList<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();
            for (int i = 0; i < menuNameArray.length; i++) {
                HashMap<String, Object> map = new HashMap<String, Object>();
                map.put("itemImage", imageResourceArray[i]);
                map.put("itemText", menuNameArray[i]);
                data.add(map);
            }
            SimpleAdapter simperAdapter = new SimpleAdapter(this, data,
                    R.layout.item_menu, new String[]{"itemImage", "itemText"},
                    new int[]{R.id.item_image, R.id.item_text});
            return simperAdapter;
        }
    
    
        /**
         * 自定义布局
         * @param featureId
         * @param menu
         * @return
         */
        @Override
        public boolean onMenuOpened(int featureId, Menu menu) {
            if (menuDialog == null) {
                menuDialog = new AlertDialog.Builder(this).setView(menuView).show();
            } else {
                menuDialog.show();
            }
            return false;// 返回为true 则显示系统menu
        }
    }
    

    gridview_menu.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
    <GridView
             android:id="@+id/gridview"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent"
             android:numColumns="4"
             android:verticalSpacing="10dip"
             android:horizontalSpacing="10dip"
             android:stretchMode="columnWidth"
             android:gravity="center"
             />
    
    </LinearLayout>
    
    

    item_menu.xml

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/RelativeLayout_Item"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="5dip">
    
        <ImageView
            android:id="@+id/item_image"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:src="@drawable/menu_about"/>
    
        <TextView
            android:id="@+id/item_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/item_image"
            android:layout_centerHorizontal="true"
            android:text="选项"></TextView>
    </RelativeLayout>
    

    展开全文
  • vue、Menu 导航菜单、Menu属性、vue Menu 全部导航菜单、vue Menu 全部属性设计规则何时使用代码演示顶部导航内嵌菜单缩起内嵌菜单只展开当前父级菜单垂直菜单主题切换菜单类型单文件递归菜单APIMenuMenu 事件Menu....

    设计规则

    为页面和功能提供导航的菜单列表。

    何时使用

    导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构。

    代码演示

    顶部导航

    在这里插入图片描述
    水平的顶部导航菜单。

    <template>
      <div>
        <a-menu v-model="current" mode="horizontal">
          <a-menu-item key="mail"> <a-icon type="mail" />Navigation One </a-menu-item>
          <a-menu-item key="app" disabled> <a-icon type="appstore" />Navigation Two </a-menu-item>
          <a-sub-menu>
            <span slot="title" class="submenu-title-wrapper"
              ><a-icon type="setting" />Navigation Three - Submenu</span
            >
            <a-menu-item-group title="Item 1">
              <a-menu-item key="setting:1">Option 1</a-menu-item>
              <a-menu-item key="setting:2">Option 2</a-menu-item>
            </a-menu-item-group>
            <a-menu-item-group title="Item 2">
              <a-menu-item key="setting:3">Option 3</a-menu-item>
              <a-menu-item key="setting:4">Option 4</a-menu-item>
            </a-menu-item-group>
          </a-sub-menu>
          <a-menu-item key="alipay">
            <a href="https://ant.design" target="_blank" rel="noopener noreferrer"
              >Navigation Four - Link</a
            >
          </a-menu-item>
        </a-menu>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            current: ['mail'],
          };
        },
      };
    </script>
    

    内嵌菜单

    在这里插入图片描述
    垂直菜单,子菜单内嵌在菜单区域。

    <template>
      <div>
        <a-menu
          @click="handleClick"
          style="width: 256px"
          :defaultSelectedKeys="['1']"
          :openKeys.sync="openKeys"
          mode="inline"
        >
          <a-sub-menu key="sub1" @titleClick="titleClick">
            <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
            <a-menu-item-group key="g1">
              <template slot="title"
                ><a-icon type="qq" /><span>Item 1</span></template
              >
              <a-menu-item key="1">Option 1</a-menu-item>
              <a-menu-item key="2">Option 2</a-menu-item>
            </a-menu-item-group>
            <a-menu-item-group key="g2" title="Item 2">
              <a-menu-item key="3">Option 3</a-menu-item>
              <a-menu-item key="4">Option 4</a-menu-item>
            </a-menu-item-group>
          </a-sub-menu>
          <a-sub-menu key="sub2" @titleClick="titleClick">
            <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
            <a-menu-item key="5">Option 5</a-menu-item>
            <a-menu-item key="6">Option 6</a-menu-item>
            <a-sub-menu key="sub3" title="Submenu">
              <a-menu-item key="7">Option 7</a-menu-item>
              <a-menu-item key="8">Option 8</a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
          <a-sub-menu key="sub4">
            <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
            <a-menu-item key="9">Option 9</a-menu-item>
            <a-menu-item key="10">Option 10</a-menu-item>
            <a-menu-item key="11">Option 11</a-menu-item>
            <a-menu-item key="12">Option 12</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            current: ['mail'],
            openKeys: ['sub1'],
          };
        },
        methods: {
          handleClick(e) {
            console.log('click', e);
          },
          titleClick(e) {
            console.log('titleClick', e);
          },
        },
        watch: {
          openKeys(val) {
            console.log('openKeys', val);
          },
        },
      };
    </script>
    

    缩起内嵌菜单

    在这里插入图片描述
    内嵌菜单可以被缩起/展开。

    <template>
      <div style="width: 256px">
        <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
          <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
        </a-button>
        <a-menu
          :defaultSelectedKeys="['1']"
          :defaultOpenKeys="['sub1']"
          mode="inline"
          theme="dark"
          :inlineCollapsed="collapsed"
        >
          <a-menu-item key="1">
            <a-icon type="pie-chart" />
            <span>Option 1</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="desktop" />
            <span>Option 2</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="inbox" />
            <span>Option 3</span>
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
            <a-menu-item key="5">Option 5</a-menu-item>
            <a-menu-item key="6">Option 6</a-menu-item>
            <a-menu-item key="7">Option 7</a-menu-item>
            <a-menu-item key="8">Option 8</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
            <a-menu-item key="9">Option 9</a-menu-item>
            <a-menu-item key="10">Option 10</a-menu-item>
            <a-sub-menu key="sub3" title="Submenu">
              <a-menu-item key="11">Option 11</a-menu-item>
              <a-menu-item key="12">Option 12</a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
        </a-menu>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            collapsed: false,
          };
        },
        methods: {
          toggleCollapsed() {
            this.collapsed = !this.collapsed;
          },
        },
      };
    </script>
    

    只展开当前父级菜单

    在这里插入图片描述
    点击菜单,收起其他展开的所有菜单,保持菜单聚焦简洁。

    <template>
      <div>
        <a-menu mode="inline" :openKeys="openKeys" @openChange="onOpenChange" style="width: 256px">
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>
            <a-menu-item key="1">Option 1</a-menu-item>
            <a-menu-item key="2">Option 2</a-menu-item>
            <a-menu-item key="3">Option 3</a-menu-item>
            <a-menu-item key="4">Option 4</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>
            <a-menu-item key="5">Option 5</a-menu-item>
            <a-menu-item key="6">Option 6</a-menu-item>
            <a-sub-menu key="sub3" title="Submenu">
              <a-menu-item key="7">Option 7</a-menu-item>
              <a-menu-item key="8">Option 8</a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
          <a-sub-menu key="sub4">
            <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>
            <a-menu-item key="9">Option 9</a-menu-item>
            <a-menu-item key="10">Option 10</a-menu-item>
            <a-menu-item key="11">Option 11</a-menu-item>
            <a-menu-item key="12">Option 12</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
            openKeys: ['sub1'],
          };
        },
        methods: {
          onOpenChange(openKeys) {
            const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
            if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
              this.openKeys = openKeys;
            } else {
              this.openKeys = latestOpenKey ? [latestOpenKey] : [];
            }
          },
        },
      };
    </script>
    

    垂直菜单

    在这里插入图片描述
    子菜单是弹出的形式。

    <template>
      <div>
        <a-menu style="width: 256px" mode="vertical" @click="handleClick">
          <a-menu-item key="1">
            <a-icon type="mail" />
            Navigation One
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="calendar" />
            Navigation Two
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>
            <a-menu-item key="3">Option 3</a-menu-item>
            <a-menu-item key="4">Option 4</a-menu-item>
            <a-sub-menu key="sub1-2" title="Submenu">
              <a-menu-item key="5">Option 5</a-menu-item>
              <a-menu-item key="6">Option 6</a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>
            <a-menu-item key="7">Option 7</a-menu-item>
            <a-menu-item key="8">Option 8</a-menu-item>
            <a-menu-item key="9">Option 9</a-menu-item>
            <a-menu-item key="10">Option 10</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
    </template>
    <script>
      export default {
        methods: {
          handleClick(e) {
            console.log('click ', e);
          },
        },
      };
    </script>
    

    主题

    在这里插入图片描述
    内建了两套主题 light|dark,默认 light

    <template>
      <div>
        <a-switch
          defaultChecked
          @change="changeTheme"
          checkedChildren="dark"
          unCheckedChildren="light"
        />
        <br />
        <br />
        <a-menu
          style="width: 256px"
          :defaultSelectedKeys="['1']"
          :defaultOpenKeys="['sub1']"
          mode="inline"
          :theme="theme"
          :selectedKeys="[current]"
          @click="handleClick"
        >
          <a-menu-item key="1">
            <a-icon type="mail" />
            Navigation One
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="calendar" />
            Navigation Two
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>
            <a-menu-item key="3">Option 3</a-menu-item>
            <a-menu-item key="4">Option 4</a-menu-item>
            <a-sub-menu key="sub1-2" title="Submenu">
              <a-menu-item key="5">Option 5</a-menu-item>
              <a-menu-item key="6">Option 6</a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>
            <a-menu-item key="7">Option 7</a-menu-item>
            <a-menu-item key="8">Option 8</a-menu-item>
            <a-menu-item key="9">Option 9</a-menu-item>
            <a-menu-item key="10">Option 10</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            current: '1',
            theme: 'dark',
          };
        },
        methods: {
          handleClick(e) {
            console.log('click ', e);
            this.current = e.key;
          },
          changeTheme(checked) {
            this.theme = checked ? 'dark' : 'light';
          },
        },
      };
    </script>
    

    切换菜单类型

    在这里插入图片描述
    展示动态切换模式。

    <template>
      <div>
        <a-switch :defaultChecked="false" @change="changeMode" /> Change Mode
        <span className="ant-divider" style="margin: 0 1em" />
        <a-switch :defaultChecked="false" @change="changeTheme" /> Change Theme
        <br />
        <br />
        <a-menu
          style="width: 256px"
          :defaultSelectedKeys="['1']"
          :defaultOpenKeys="['sub1']"
          :mode="mode"
          :theme="theme"
        >
          <a-menu-item key="1">
            <a-icon type="mail" />
            Navigation One
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="calendar" />
            Navigation Two
          </a-menu-item>
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>
            <a-menu-item key="3">Option 3</a-menu-item>
            <a-menu-item key="4">Option 4</a-menu-item>
            <a-sub-menu key="sub1-2" title="Submenu">
              <a-menu-item key="5">Option 5</a-menu-item>
              <a-menu-item key="6">Option 6</a-menu-item>
            </a-sub-menu>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>
            <a-menu-item key="7">Option 7</a-menu-item>
            <a-menu-item key="8">Option 8</a-menu-item>
            <a-menu-item key="9">Option 9</a-menu-item>
            <a-menu-item key="10">Option 10</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </div>
    </template>
    <script>
      export default {
        data() {
          return {
            mode: 'inline',
            theme: 'light',
          };
        },
        methods: {
          changeMode(checked) {
            this.mode = checked ? 'vertical' : 'inline';
          },
          changeTheme(checked) {
            this.theme = checked ? 'dark' : 'light';
          },
        },
      };
    </script>
    

    单文件递归菜单

    在这里插入图片描述
    使用单文件方式递归生成菜单。
    因组件内部会动态更改a-sub-menu的属性,如果拆分成单文件,无法将属性挂载到a-sub-menu上,你需要自行声明属性并挂载。为了方便,避免属性的声明,我们推荐使用函数式组件。

    <template>
      <div style="width: 256px">
        <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">
          <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
        </a-button>
        <a-menu
          :defaultSelectedKeys="['1']"
          :defaultOpenKeys="['2']"
          mode="inline"
          theme="dark"
          :inlineCollapsed="collapsed"
        >
          <template v-for="item in list">
            <a-menu-item v-if="!item.children" :key="item.key">
              <a-icon type="pie-chart" />
              <span>{{item.title}}</span>
            </a-menu-item>
            <sub-menu v-else :menu-info="item" :key="item.key" />
          </template>
        </a-menu>
      </div>
    </template>
    
    <script>
      /*
       * recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue
       * SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue
       * */
      import SubMenu from './SubMenu';
      export default {
        components: {
          'sub-menu': SubMenu,
        },
        data() {
          return {
            collapsed: false,
            list: [
              {
                key: '1',
                title: 'Option 1',
              },
              {
                key: '2',
                title: 'Navigation 2',
                children: [
                  {
                    key: '2.1',
                    title: 'Navigation 3',
                    children: [{ key: '2.1.1', title: 'Option 2.1.1' }],
                  },
                ],
              },
            ],
          };
        },
        methods: {
          toggleCollapsed() {
            this.collapsed = !this.collapsed;
          },
        },
      };
    </script>
    

    API

    <template>
      <a-menu>
        <a-menu-item>菜单项</a-menu-item>
        <a-sub-menu title="子菜单">
          <a-menu-item>子菜单项</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </template>
    

    Menu

    参数说明类型默认值
    defaultOpenKeys初始展开的 SubMenu 菜单项 key 数组
    defaultSelectedKeys初始选中的菜单项 key 数组string[]
    forceSubMenuRender在子菜单展示之前就渲染进 DOMbooleanfalse
    inlineCollapsedinline 时菜单是否收起状态boolean-
    inlineIndentinline 模式的菜单缩进宽度number24
    mode菜单类型,现在支持垂直、水平、和内嵌模式三种string: vertical vertical-right horizontal inlinefalse
    multiple是否允许多选booleanfalse
    openKeys(.sync)当前展开的 SubMenu 菜单项 key 数组string[]
    selectable是否允许选中booleantrue
    selectedKeys(v-model)当前选中的菜单项 key 数组string[]
    subMenuCloseDelay用户鼠标离开子菜单后关闭延时,单位:秒number0.1
    subMenuOpenDelay用户鼠标进入子菜单后开启延时,单位:秒number0
    theme主题颜色string: light darkfalse

    Menu 事件

    事件名称说明回调参数
    click点击 MenuItem 调用此函数function({ item, key, keyPath })
    deselect取消选中时调用,仅在 multiple 生效function({ item, key, selectedKeys })
    openChangeSubMenu 展开/关闭的回调function(openKeys: string[])
    select** 被选中时调用**function({ item, key, selectedKeys })

    Menu.Item

    参数说明类型默认值
    disabled是否禁用booleanfalse
    keyitem 的唯一标志string
    title设置收缩时展示的悬浮标题string

    Menu.SubMenu

    参数说明类型默认值
    disabled是否禁用booleanfalse
    key唯一标志string
    title子菜单项值string|slot

    Menu.SubMenu 的子元素必须是 MenuItem 或者 SubMenu.

    SubMenu 事件

    事件名称说明回调参数
    titleClick点击子菜单标题({ key, domEvent })

    Menu.ItemGroup

    参数说明类型默认值
    title分组标题string||function|slotfalse

    Menu.ItemGroup 的子元素必须是 MenuItem.

    Menu.Divider

    菜单项分割线,只用在弹出菜单内。

    展开全文
  • DropDownMenu

    千次阅读 2018-11-22 09:38:54
    DropDownMenu 项目地址:fg2q1q3q/DropDownMenu  简介:这是一个筛选菜单库,开发者只需要填充数据即可,在很多 App 上都能看到这个效果,如美团,爱奇艺,大众点评等 更多:作者 提 Bug  标签: 下拉筛选- ...

    DropDownMenu

    项目地址:fg2q1q3q/DropDownMenu 

    简介:这是一个筛选菜单库,开发者只需要填充数据即可,在很多 App 上都能看到这个效果,如美团,爱奇艺,大众点评等

    更多:作者   提 Bug   

    标签:

    下拉筛选-

    本例是在DropDownMenu基础上改进而来

    1.1.1 修改:

    • 增加选中后是否改变 tab 颜色属性
    • 增加初始化设置默认选项功能
    • 去除 tab 分割线颜色自定义属性
    • 暂不支持多选,如需请自定义 view 即可,后续添加,详情参考 demo
      app:ddneedSetSlectedColor="true"
      

      相比而言增加 de 特性:

    • 增加三种默认样式类型:TYPE_LIST_CITY,TYPE_LIST_SIMPLE,TYPE_GRID
    • 增加默认样式点击回调(只需关心传入数组和选择结果,不相关内容无须关心)
    • 修改传参,更易于理解和使用
    • 增加最大高度限制属性
    • 如果你使用默认样式,只需要传递字符串数组即可,如果使用自定义样式只需传递 customview 即可

    以下为原始特性

    • 支持多级菜单
    • 你可以完全自定义你的菜单样式,我这里只是封装了一些实用的方法,Tab 的切换效果,菜单显示隐藏效果等
    • 并非用 popupWindow 实现,无卡顿

    ScreenShot

    Gradle

    在 project 中 build.gradle 下增加(已有跳过)

        allprojects {
            repositories {
                ...
                maven { url "https://jitpack.io" }
            }
        }
    

    在 app module 中增加

        dependencies {
                compile 'com.github.fg2q1q3q:DropDownMenu:1.1.1'
        }
    

    使用相关核心源码及参数说明:

        //一共包含四种类型:三种默认类型和自定义
        public static final int TYPE_LIST_CITY = 1;
        public static final int TYPE_LIST_SIMPLE = 2;
        public static final int TYPE_GRID = 3;
        public static final int TYPE_CUSTOM = 4;
        /**
         * @param tabTexts tab 标签字符串集合
         * @param contentView 主页面 view
         * @param viewDatas 为数据源 hashmap
         * KEY 对应 TYPE(上文常量)
         * VALUE 对应数据源(非 TYPE_CUSTOM-->string[]或 TYPE_CUSTOM-->customView)
         */
    
        public void setDropDownMenu(@NonNull List<String> tabTexts, 
            @NonNull List<HashMap<String,Object>> viewDatas,@NonNull View contentView){
        }
    

    使用教程

    添加 DropDownMenu 到你的布局文件,如下

    <com.zxl.library.DropDownMenu
        android:id="@+id/dropDownMenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:ddmenuTextSize="13sp" //tab 字体大小
        app:ddtextUnselectedColor="@color/drop_down_unselected" //tab 未选中颜色
        app:ddtextSelectedColor="@color/drop_down_selected" //tab 选中颜色
        app:ddmenuSelectedIcon="@mipmap/drop_down_selected_icon" //tab 选中状态图标
        app:ddmenuUnselectedIcon="@mipmap/drop_down_unselected_icon"//tab 未选中状态图标
        app:ddmaskColor="@color/mask_color"     //遮罩颜色,一般是半透明
        app:ddmenuBackgroundColor="@color/white" //tab 背景颜色
        app:ddmenuMaxHeight="280dp"//筛选菜单最大高度,默认为 wrap
        app:ddneedSetSlectedColor="true"//设置选中 option 后 tab 是否改变颜色
        ...
     />
    

    java 代码中设置如下:

            View contentView = getLayoutInflater().inflate(R.layout.contentview, null);
    
            mDropDownMenu.setDropDownMenu(Arrays.asList(headers), initViewData(), contentView);
    
            //该监听回调只监听默认类型,如果是自定义 view 请自行设置监听,参照 demo
            mDropDownMenu.addMenuSelectListener(new DropDownMenu.OnDefultMenuSelectListener() {
                @Override
                public void onSelectDefaultMenu(int index, int pos,String clickstr) {
                    //index:点击的 tab 索引,pos:单项菜单中点击的位置索引,clickstr:点击位置的字符串
                    Toast.makeText(getBaseContext(),clickstr,Toast.LENGTH_SHORT).show();
                }
            });
    展开全文
  • Element el-menu(NavMenu)的正确用法

    万次阅读 多人点赞 2019-06-13 23:48:17
    如果根据官网的示例,每个el-menu-item的index都为’1-1’ '1-2’之类的。如果直接跳转路由,你会发现导航栏当前激活菜单的 index没有改变。点击跳转。但菜单栏依旧停留在分组这个栏目 只有两种方法可以解决这个问题...

    最近在使用Element开发时 一开始按照官网示例 产品前期没什么问题 到了后期 遇到这样一个情况:并不是只有点击导航栏才跳转页面

    需求:

    在这里插入图片描述
    如果根据官网的示例,每个el-menu-item的index都为’1-1’ '1-2’之类的。如果直接跳转路由,你会发现导航栏当前激活菜单的 index没有改变。点击跳转。但菜单栏依旧停留在分组这个栏目

    只有两种方法可以解决这个问题:

    1. 通过子组件的this.$emit方法触发父组件绑定的事件,改变default-active属性值
    2. 通过vuex储存el-menu的default-active属性值,在子组件的点击事件改变这个属性值

    但是我试了第一种方法,没有生效。可能需要watch这个变量才能响应。这两种方法可能比较麻烦,后来发现一个很有效的方法。废话不多说。代码如下

    正确用法:

    <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            router
            overflow-y:
            scroll
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>
                <span slot="title">账号管理</span>
              </template>
              <el-menu-item index="/demo/index">列表</el-menu-item>
              <el-menu-item index="/demo/group/index">分组</el-menu-item>
            </el-submenu>
    </el-menu>
    

    总结:

    将default-active设置为$route.path,el-menu-item的index设为要跳转的路由(并且点击菜单项,会直接push到点击的页面)。注意:一定要设置el-submenu的index属性(1,2,3…)。不然会出bug

    这样就无需关心default-active的属性值了。只要路由改变了,对应的菜单项也会激活

    展开全文
  • Android Menu

    万次阅读 2018-12-27 18:42:33
    自序 为什么,突然会写这么简单的一个控件的使用。而且我平常很少用到的技术(我的工作基本就是维护),但是我看了玉刚师哥的博客,我瞬间...我们都知道在手机界面中能和用户交互的信息是有限的,菜单Menu就使得我...
  • Angular Material Menu 组件

    千次阅读 2017-10-05 13:04:54
    menu
  • easyUI Menu

    千次阅读 2012-07-31 17:11:00
    @author YHC 覆盖默认值$.fn.menu.defaults 这个menu通常用来做上下文菜单,这个是用来构建其他菜单组件的基本组件,例如...通过标记创建menu,应该添加'easyui-menu' 样式给div标记,所有的菜单项都可以通过div标记创建
  • 看完就能知道这个menu的结构上怎么组织和使用 1. 我准备的示例: 先上代码,格式加了空行,方便看结构:(前期模板组件的导入和注册都略过了) <el-menu default-active="2" class="el-menu-vertical-demo...
  • vue elementui navmenu 多级导航菜单(水平、垂直)

    万次阅读 多人点赞 2018-08-20 18:04:57
    vue elementui navmenu 多级菜单 效果图 组件 &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div ...
  • 在Activity中重写onKeyDown方法,Menu键被屏蔽但HOME键未被屏蔽,其中还HOME屏蔽在我的另外一篇博客中已详细介绍,下面来解决Menu键被屏蔽,让其中MENU键有效。 屏蔽android的menu键: @Override public boolean ...
  • DropDownMenu下拉菜单

    万次阅读 2016-04-18 14:17:28
    一个使用起来方便快捷,更容易调用,使代码简洁优雅的DropDownMenu下拉菜单。
  • Android提高十八篇之自定义Menu(TabMenu)

    万次阅读 热门讨论 2011-01-28 23:57:00
    使用PopupWindow实现支持分页的Menu(TabMenu),使其可以容纳更多数据
  • Android 动态切换Menu效果

    热门讨论 2014-08-26 14:58:20
    使用ActionBar+Fragment+ViewPager+Menu实现的动态切换Menu的下过,每当用户切换到一个Fragment时,与之对应的Menu效果就随之切换,本例共有三个Fragment,每切换到一个Fragment上方的MenuItem的样式就会生成一个新...
  • print 'hello menu' menubar = Menu(root) filemenu = Menu(menubar,tearoff = 0) for item in ['Python','PHP','CPP','C','Java','JavaScript','VBScript']: filemenu.add_commad(label = item,command = hello) ...
  • qml用MenuStyle设置Menu的风格

    千次阅读 2018-04-17 18:59:43
    Menu{id: powerMenustyle:MenuStyle{ itemDelegate.background: Rectangle{ height: 60 width: 40 color: "grey" } }itemDelegate.label: Text{...
  • 如何通过menu id来得到menu item 控件

    千次阅读 2014-02-23 19:41:09
    我们不能将findViewById()用于menu ,因为他是menu,不是view. 我们可以更改menu的状态,只有它已经被创建或是被准备( created or prepared)好后才行。 解决办法: @Override public boolean ...
  • element-ui中NavMenu(el-menu)功能优化

    千次阅读 2020-09-11 15:39:36
    用过NavMenu组件的同学应该很熟悉,组件在horizontal模式下提供了两种触发方式:hover和click。然而在click模式下,有个弊端:如果页面中引入多个el-menu组件,由于每个el-menu相互独立,展开一个菜单后,再展开其他...
  • Android Menu 之 optionsMenu 详解

    万次阅读 2011-06-10 16:02:00
    optionsMenu就是用户在按下手机键盘上的Menu键时,Activity下方弹出的菜单。借个图展示一下:接下来,本文的主要内容有:1、 如何建立菜单2、 如何响应菜单上的点击动作3、 讲解Menu的各种属性及Group分组 首先...
  • Android的几种按钮控件: Options Menu / Context Menu / Panel Menu
  • el-menu菜单进行路由跳转

    万次阅读 2019-04-17 09:10:54
    el-menu菜单进行路由跳转 el-menu 添加 :default-active=“this.$router.path” 和 router (default-active前面要有 “:” ) <el-menu :default-active="this.$router.path" //路由跳转 router> ....
  • Android Menu用法全面讲解

    万次阅读 多人点赞 2017-11-23 01:35:26
    菜单(Menu)是Android应用中非常重要且常见的组成部分,主要可以分为三类:选项菜单、上下文菜单/上下文操作模式以及弹出菜单。本文只介绍Android3.0及以上的Menu知识点。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 528,276
精华内容 211,310
关键字:

menu