精华内容
下载资源
问答
  • 日期下拉菜单select

    2013-01-31 08:57:55
    年月日三级联动下拉菜单设置默认值
  • EXCEL如何设置多级下拉菜单
  • iViewtable表格中使用select选框和下拉菜单的方法

    千次阅读 多人点赞 2018-08-06 10:25:18
    首先是iview的表格中使用select选框 { title: '适用区域',//纵列表头(类似于th) width:140, //列表每一格的宽度 align: 'center', //ivew里面的写法,...

     首先是iview的表格中使用select选框

    
                        {
                            title: '适用区域',//纵列表头(类似于th)
                            width:140, //列表每一格的宽度
                            align: 'center', //ivew里面的写法,不用理会
                            key: 'region', //ivew里面的写法,不用理会
                            render: (h, params) => {
                                return h('Select', {
                                        on: {
                                            'onChange':(event) => {
                                                this.data[params.index].volumeTypes = event;
                                            }
                                        },
                                    },
                                    this.volumeTypes.map(function(type){//这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
                                        return h('Option', {
                                            props:{
                                                value:type.value
                                            }
                                        }, type);
                                    })
                                )
                            },
                        },

    接着是在iview中的table表格中使用 下拉菜单的方法,其实大同小异

    {
                            title: '品种',
                            width:100,
                            align: 'center',
                            key: 'varieties',
                            render: (h, params) => {
                                return h('Dropdown',{
                                    props:{
                                        trigger:"click"
                                    },
                                    on:{
                                       'on-click':(value)=>{
                                           console.log(value);//value和下面选项的name对应
                                       }
                                    } //iview组件内部的属性定义在其标签的对象里
                                }, [//盒子内部其他标签元素放入数组中
                                    h('a',[//创建一个a标签,a标签里面又有元素,继续放入后面数组
                                        h('span','下拉'),//span中的内容
                                        h('Icon',{
                                            props: {
                                                type: 'md-arrow-dropdown',
                                                size:'18'
                                            }
                                        })
                                    ]),
                                    h('DropdownMenu',{//创建一个和a标签同级的标签
                                         slot:"list"//iview组件内部的属性定义在其标签的对象里
                                    },
                                    this.dropdownItems.map(function(type){//把map看作循环,type看作循环的每一项
                                        return h('DropdownItem',{
                                            props:{
                                                name:type.val
                                            }
                                        },type.val)
                                    })
                                    )
                                ]);
                            }
                        },

    再来一个日期选择的rander函数

                            render: (h, params) => {
                                return h('div',[
                                    h('DatePicker',{
                                        on:{
                                            'on-change':function(date){
                                                console.log(date);
                                            }
                                        }
                                    })
                                ]);
                            }

    rander函数改变内容:

    render: function (createElement) {
        return createElement('span',this.row.checkStatus==0?"待审核":"审核通过")
    },

     

    最后一个,使用&&符号来做条件渲染

                            (params.row.state==="未审核") && h('Icon', {
                                        props: {
                                            type: 'md-checkmark-circle-outline',
                                            size:'18'
                                        },
                                        attrs:{
                                            title:'审核'
                                        },
                                        style: {
                                            cursor:'pointer',
                                            color:'#009688',
                                            fontSize:'22px'
                                        },
                                        on: {
                                            click: () => {
                                                this.readPhenophase = true;
                                                this.listData[params.index].state = "已审核"
                                            }
                                        }
                                    }),

     

    render函数接受一个函数并返回一个h函数,这个函数有两个参数,h和params;

    我们可以简简单单的把h看作一个创建元素的方法,创建好这个元素之后,需要添加样式或者做其他(事件)操作,后面跟一个对象(里面是创建的元素的属性和方法)或者一个数组(该元素的子元素,非必须);而params就是具体的参数了!

    下面举个简单的例子:

     render: (h, params) => {
                        return h('div',{//1.创建一个div
                            style: {//2.给这个div添加样式
                                'text-overflow': 'ellipsis',
                                width: '100%',
                                height:'100%',
                                overflow: 'hidden',
                                cursor: 'pointer'
                            },
                            on:{//3.给这个div添加事件
                                'click':()=>{
                                    this.columns8.splice(this.columns8.length-1,1);
                                    this.columns8.push(
                                        {
                                            'title': '农场总面积',
                                            'key': 'area',
                                            'minWidth': 120,
                                            'align': 'center'
                                        }
                                    )
                                }
                            }
                        },[ h('span','展示更多')])//4.在div里面创建一个子元素,用来显示文字
                    }

    如果有用请花你2秒钟点个赞,谢谢~

    展开全文
  • boostrap插件学习用到的资源文件,包括boostrap的表格日期下拉列表,中文包,同时好用的消息提示插件
  • 注:① 第六点附上部分代码,请自行添加css和js以及模块... ③ 由于本人不太熟练JS,因此只能用笨方法写script渲染,下拉菜单只要判断正确时,标签添加 selected 即是默认选中状态还不会更改下拉菜单的顺序,...

    注:① 第六点附上部分代码,请自行添加css和js以及模块加载脚本,自行动手会理解的更好,同时为自己做个使用记录!

           ② 特殊字段没有写<script>,因为和普通字段是一样的,就当是练习题咯。

           ③ 由于本人不太熟练JS,因此只能用笨方法写script渲染,下拉菜单只要在判断正确时,标签中添加  selected 即是默认选中状态还不会更改下拉菜单的顺序,(你可以试试不添加,对比下结果)

    这是效果图:

     

    1、先定义表格, lay-filter——过滤器,能够准确定位是哪个页面标签触发事件,在表格渲染 JS中会使用

     <table class="layui-hide" id="door-status" lay-filter="demoEvent"></table>

    2、嵌套时间 id="dateTpl" 对应表格cols中的 field: 's_time', title: '状态起始时间', width: 230, templet: "#dateTpl",

    ,目的是为了告诉表格,此字段用户使用自定义模板渲染数据

    <script type="text/html" id="dateTpl">
        {{#  if(d.s_time !=''){ }}
        <input type="text" class="layui-input layui-input-date" value="{{d.s_time}}">
        {{#  } else { }}
        <input type="text" class="layui-input layui-input-date" placeholder="HH:mm">
        {{#  } }}
    </script>

    3、嵌套下拉菜单

    <script type="text/html" id="selectTpl">
        <!--<div class="layui-input-block">-->
        <select name="interest" id="s_status">
            {{# if(d.status == 1){ }}
            <option value=0>无效</option>
            <option value={{d.status}} selected>无状态
            </option>
            <option value=2>打开</option>
            <option value=3>加密</option>
            <option value=4>关闭</option>
            {{# } else if(d.status == 2) { }}
            <option value=0>无效</option>
            <option value=1>无状态</option>
            <option value={{d.status}} selected>打开</option>
            <option value=3>加密</option>
            <option value=4>关闭</option>
            {{# } else if(d.status == 3) { }}
            <option value=0>无效</option>
            <option value=1>无状态</option>
            <option value=2>打开</option>
            <option value={{d.status}} selected>加密</option>
            <option value=4>关闭</option>
            {{# } else if(d.status == 4) { }}
            <option value=0>无效</option>
            <option value=1>无状态</option>
            <option value=2>打开</option>
            <option value=3>加密</option>
            <option value={{d.status}} selected>关闭</option>
            {{# } else { }}
            <option value={{d.status}} selected>无效</option>
            <option value=1>无状态</option>
            <option value=2>打开</option>
            <option value=3>加密</option>
            <option value=4>关闭</option>
            {{# } }}
        </select>
    </script>

    4、嵌套徽章(1、解释下为什么看起来代码很冗余,因为本人并不熟练js,只能根据data做判断;

                                   2、若字段值=0则不变色,字段值=1则是选中状态,同时更改class)

    <script type="text/html" id="weekend">
        {{#  if(d.nomal_w6 == 0){ }}
        <span class="layui-badge sel-dategrp layui-bg-gray"
              lay-event="set_select" value={{d.nomal_w6}}>日</span>
        {{#  } else { }}
        <span class="layui-badge sel-dategrp layui-bg-blue"
              lay-event="set_select" value={{d.nomal_w6}}>日</span>
        {{#  } }}
    
        {{#  if(d.nomal_w0 == 0){ }}
        <span class="layui-badge sel-dategrp layui-bg-gray"
              lay-event="set_select" lay-href="data" value={{d.nomal_w0}}>一</span>
        {{#  } else { }}
        <span class="layui-badge sel-dategrp layui-bg-blue"
              lay-event="set_select" lay-href="data" value={{d.nomal_w0}}>一</span>
        {{#  } }}
    
        {{#  if(d.nomal_w1 == 0){ }}
        <span class="layui-badge  sel-dategrp layui-bg-gray"
              lay-event="set_select" value={{d.nomal_w1}}>二</span>
        {{#  } else { }}
        <span class="layui-badge  sel-dategrp layui-bg-blue"
              lay-event="set_select" value={{d.nomal_w1}}>二</span>
        {{#  } }}
    
        {{#  if(d.nomal_w2 == 0){ }}
        <span class="layui-badge sel-dategrp layui-bg-gray"
              lay-event="set_select" value={{d.nomal_w2}}>三</span>
        {{#  } else { }}
        <span class="layui-badge sel-dategrp layui-bg-blue"
              lay-event="set_select" value={{d.nomal_w2}}>三</span>
        {{#  } }}
    
        {{#  if(d.nomal_w3 == 0){ }}
        <span class="layui-badge sel-dategrp layui-bg-gray"
              lay-event="set_select" value={{d.nomal_w3}}>四</span>
        {{#  } else { }}
        <span class="layui-badge sel-dategrp layui-bg-blue"
              lay-event="set_select" value={{d.nomal_w3}}>四</span>
        {{#  } }}
        {{#  if(d.nomal_w4 == 0){ }}
        <span class="layui-badge sel-dategrp layui-bg-gray"
              lay-event="set_select" value={{d.nomal_w4}}>五</span>
        {{#  } else { }}
        <span class="layui-badge sel-dategrp layui-bg-blue"
              lay-event="set_select" value={{d.nomal_w4}}>五</span>
        {{#  } }}
        {{#  if(d.nomal_w5 == 0){ }}
        <span class="layui-badge sel-dategrp layui-bg-gray"
              lay-event="set_select" value={{d.nomal_w5}}>六</span>
        {{#  } else { }}
        <span class="layui-badge sel-dategrp layui-bg-blue"
              lay-event="set_select" value={{d.nomal_w5}}>六</span>
        {{#  } }}
    </script>

    5、渲染表格

     table.render({
                elem: '#door-status'
                ,data: [
                    {
                        "s_time": "17:00"
                        , "status": "3"
                        , "special_s1": "1"
                        , "special_s2": "0"
                        , "special_s3": "1"
                        , "special_s4": "0"
                        , "special_s5": "1"
                        , "special_s6": "0"
                        , "special_s7": "0"
                        , "nomal_w6": "0"
                        , "nomal_w0": "1"
                        , "nomal_w1": "0"
                        , "nomal_w2": "1"
                        , "nomal_w3": "0"
                        , "nomal_w4": "1"
                        , "nomal_w5": "0"
                    }, {
                        "s_time": "17:05"
                        , "status": "0"
                        , "special_s1": "1"
                        , "special_s2": "1"
                        , "special_s3": "0"
                        , "special_s4": "1"
                        , "special_s5": "0"
                        , "special_s6": "0"
                        , "special_s7": "1"
                        , "nomal_w6": "0"
                        , "nomal_w0": "1"
                        , "nomal_w1": "0"
                        , "nomal_w2": "1"
                        , "nomal_w3": "0"
                        , "nomal_w4": "0"
                        , "nomal_w5": "1"
                    },
                    {
                        "s_time": "17:00"
                        , "status": "1"
                        , "special_s1": "0"
                        , "special_s2": "0"
                        , "special_s3": "0"
                        , "special_s4": "1"
                        , "special_s5": "0"
                        , "special_s6": "0"
                        , "special_s7": "1"
                        , "nomal_w6": "0"
                        , "nomal_w0": "01"
                        , "nomal_w1": "0"
                        , "nomal_w2": "1"
                        , "nomal_w3": "0"
                        , "nomal_w4": "0"
                        , "nomal_w5": "1"
                    },
                    {
                        "s_time": "17:00"
                        , "status": "2"
                        , "special_s1": "0"
                        , "special_s2": "1"
                        , "special_s3": "0"
                        , "special_s4": "1"
                        , "special_s5": "1"
                        , "special_s6": "0"
                        , "special_s7": "0"
                        , "nomal_w6": "1"
                        , "nomal_w0": "1"
                        , "nomal_w1": "0"
                        , "nomal_w2": "0"
                        , "nomal_w3": "0"
                        , "nomal_w4": "0"
                        , "nomal_w5": "1"
                    }
                ],
                , size: 'lg'
                , limit: 4
                , limits: [4]
                // 字段渲染已通过以上的script自动解析,该处只是为了展现表格标题和表格框架,为以上的script留出空位
                , cols: [[
                    {type: 'numbers', title: 'ID'},
                    {field: 's_time', title: '时间', width: 230, templet: "#dateTpl", unresize: true}
                    , {field: 'status', title: '状态', width: 230, templet: '#selectTpl', unresize: true}
                    , {field: 'special', title: '特殊', templet: '#dabge', unresize: true}
                    , {field: 'normal', title: '普通', templet: '#weekend', unresize: true}
                ]]
               ,done: function (res, curr, count) {
                    //日期控件
                    $(".layui-input-date").each(function (i) {
                        laydate.render({
                            elem: this,
                            type: 'time',
                            format: "HH:mm",
                            btns: ['clear', 'confirm'],
                            ready: formatminutes
    
                        });
    
                        function formatminutes(date) {
                            var aa = $(".laydate-time-list li ol")[1];
                            var showtime = $($(".laydate-time-list li ol")[1]).find("li");
                            $($(".laydate-time-list li ol")[2]).find("li").remove();  //清空秒
                        }
                    });
                    //    下拉菜单
                    $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
                    //自定义徽章点击变色
                    table.on('tool(demoEvent)', function (obj) {
                        layEvent = obj.event;
                        if (layEvent == 'set_select') {
                                //$(this).attr('class').split(' ')[2]  获取当前的class并通过空格切割出规定的字段值
                            if ($(this).attr('class').split(' ')[2] == 'layui-bg-gray') {
                                console.log($(this).attr('value'));
                                $(this).removeClass('layui-bg-gray');
                                $(this).addClass('layui-bg-blue')
                            } else {
                                $(this).removeClass('layui-bg-blue');
                                $(this).addClass('layui-bg-gray')
                            }
                        }
                    });
                }
            });

    6、部分代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <!-- 注意:如果你直接复制所有代码到本地,css路径需要添加你本地的 -->
    </head>
    <style type="text/css">
        /*设置树形结构和右侧框的页面占据位置比例*/
        @media screen and (min-width: 992px) {
            .layui-col-md3 {
                width: 20%;
            }
        }
    
        @media screen and (min-width: 992px) {
            .layui-col-md9 {
                width: 85%;
            }
        }
    
        /*门参数中表单和整体的边距加大*/
        .layui-card-body {
            padding: 15px;
        }
    
        /*去除秒这一列*/
        .layui-laydate-content > .layui-laydate-list {
            padding-bottom: 0;
            overflow: hidden;
        }
    
        .layui-laydate-content > .layui-laydate-list > li {
            width: 50%
        }
    
        .merge-box .scrollbox .merge-list {
            padding-bottom: 5px;
        }
    
        /*去除时间框的边线    */
        .layui-input-date {
            border: none;
        }
    
        /*去除下拉框边线    */
        .layui-unselect {
            border: none;
        }
    
        .layui-bg-gray > .layui-this {
            color: #088;
            /*background: #088;*/
        }
    
        /* 设置门状态单选框的下边距*/
        .set-door-status {
            margin: 0 0 15px;
        }
    
        .layui-form-item {
            margin-bottom: 0;
        }
    
        .layui-form {
            margin-bottom: 0;
        }
    
        /*门状态单选框下边距设为0*/
        .set-door-status {
            margin-bottom: 0;
        }
    
        /*控制器面板的位置不够,将外边距调小*/
        .layui-fluid {
            padding: 15px 0 0 0;
        }
    
        /*输入框左侧文字宽度调小10px*/
        .layui-form-label {
            width: 90px;
        }
    
        .layui-form-item .layui-inline {
            margin-bottom: 0;
            margin-right: 0;
        }
    
        .layui-card:last-child {
            margin-bottom: 15px;
        }
    
        /*把门状态单选按钮放置在中间位置*/
        .set-door-status {
            margin-left: 2pc;
        }
    
        /*设置当屏幕小于500px时,第二节之后的菜单隐藏*/
        @media screen and (max-width: 500px) {
            #parent_id {
                display: none;
            }
        }
    </style>
    <body style="background-color: #fff">
    <div class="layui-layout layui-layout-admin" style="margin:5px 15px">
        <div class="layui-col-xs12 layui-col-md12">
            <div class="layui-fluid">
                <div class="layui-row layui-col-space15">
                    <!--表格-->
                    <div class="layui-col-xs12 layui-col-md12">
                        <div class="layui-row layui-col-space15">
                            <div class="layui-card">
                                <div class="layui-card-header">状态计划</div>
                                <div class="layui-card-body" style="overflow: auto;">
                                    <div carousel-item>
                                        <fieldset class="layui-elem-field layui-field-title" style="border-width:1px;color:
                              #000000;border-color: white;font-size: 15px;">
                                            <table class="layui-hide" id="door-status"
                                                   lay-filter="demoEvent"></table>
    
    
                                        </fieldset>
                                    </div>
    
                                </div>
                                <button type="button" class="layui-btn layui-btn-normal"
                                        style="float: right">
                                    保存
                                </button>
                                <div style="clear: both"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 注意:如果你直接复制所有代码到本地,JS路径需要添加你本地的 -->
    <script>
        table.render({
            elem: '#door-status'
            ,data: [
                    {
                        "s_time": "17:00"
                        , "status": "3"
                        , "special_s1": "1"
                        , "special_s2": "0"
                        , "special_s3": "1"
                        , "special_s4": "0"
                        , "special_s5": "1"
                        , "special_s6": "0"
                        , "special_s7": "0"
                        , "nomal_w6": "0"
                        , "nomal_w0": "1"
                        , "nomal_w1": "0"
                        , "nomal_w2": "1"
                        , "nomal_w3": "0"
                        , "nomal_w4": "1"
                        , "nomal_w5": "0"
                    }, {
                        "s_time": "17:05"
                        , "status": "0"
                        , "special_s1": "1"
                        , "special_s2": "1"
                        , "special_s3": "0"
                        , "special_s4": "1"
                        , "special_s5": "0"
                        , "special_s6": "0"
                        , "special_s7": "1"
                        , "nomal_w6": "0"
                        , "nomal_w0": "1"
                        , "nomal_w1": "0"
                        , "nomal_w2": "1"
                        , "nomal_w3": "0"
                        , "nomal_w4": "0"
                        , "nomal_w5": "1"
                    },
                    {
                        "s_time": "17:00"
                        , "status": "1"
                        , "special_s1": "0"
                        , "special_s2": "0"
                        , "special_s3": "0"
                        , "special_s4": "1"
                        , "special_s5": "0"
                        , "special_s6": "0"
                        , "special_s7": "1"
                        , "nomal_w6": "0"
                        , "nomal_w0": "01"
                        , "nomal_w1": "0"
                        , "nomal_w2": "1"
                        , "nomal_w3": "0"
                        , "nomal_w4": "0"
                        , "nomal_w5": "1"
                    },
                    {
                        "s_time": "17:00"
                        , "status": "2"
                        , "special_s1": "0"
                        , "special_s2": "1"
                        , "special_s3": "0"
                        , "special_s4": "1"
                        , "special_s5": "1"
                        , "special_s6": "0"
                        , "special_s7": "0"
                        , "nomal_w6": "1"
                        , "nomal_w0": "1"
                        , "nomal_w1": "0"
                        , "nomal_w2": "0"
                        , "nomal_w3": "0"
                        , "nomal_w4": "0"
                        , "nomal_w5": "1"
                    }
                ]
            , size: 'lg'
            , limit: 4
            , limits: [4]
            , cols: [[
                {type: 'numbers', title: 'ID'},
                {field: 's_time', title: '时间', width: 230, templet: "#dateTpl", unresize: true}
                , {field: 'status', title: '状态', width: 230, templet: '#selectTpl', unresize: true}
                , {field: 'special', title: '特殊', templet: '#dabge', unresize: true}
                , {field: 'normal', title: '普通', templet: '#weekend', unresize: true}
            ]],
            done: function (res, curr, count) {
                //日期控件
                $(".layui-input-date").each(function (i) {
                    laydate.render({
                        elem: this,
                        type: 'time',
                        format: "HH:mm",
                        btns: ['clear', 'confirm'],
                        ready: formatminutes
                    });
    
                    function formatminutes(date) {
                        var aa = $(".laydate-time-list li ol")[1];
                        var showtime = $($(".laydate-time-list li ol")[1]).find("li");
                        $($(".laydate-time-list li ol")[2]).find("li").remove();  //清空秒
                    }
                });
                //    下拉菜单
                $(".layui-table-body, .layui-table-box, .layui-table-cell").css('overflow', 'visible');
                //自定义徽章点击变色
                table.on('tool(demoEvent)', function (obj) {
                    layEvent = obj.event;
                    if (layEvent == 'set_select') {
                        if ($(this).attr('class').split(' ')[2] == 'layui-bg-gray') {
                            console.log($(this).attr('value'));
                            $(this).removeClass('layui-bg-gray');
                            $(this).addClass('layui-bg-blue')
                        } else {
                            $(this).removeClass('layui-bg-blue');
                            $(this).addClass('layui-bg-gray')
                        }
                    }
                });
            }
        });
        //监听锁定操作
        form.on('checkbox(lockDemo)', function (obj) {
            layer.tips(this.value + ' ' + this.name + ':' + obj.elem.checked, obj.othis);
        });
        form.render();
    
    </script>
    
    </body>
    </html>

     

    展开全文
  • -excel设置下拉菜单 作者:乔山办公网日期:2019-09-24 21:13:23 返回目录:excel表格制作 用Excel表录入数据时,有时需要限制某个字段(也叫列)的值(也叫内容),比如,只允许其几个值是选择一下,这时...

     

    https://www.qiaoshan022.cn/excel/excel14169.html

     

     

    如何将Excel的单元格设置成下拉选项?-excel设置下拉菜单

    作者:乔山办公网日期:2019-09-24 21:13:23

    返回目录:excel表格制作

    在用Excel表录入数据时,有时需要限制某个字段(也叫列)的值(也叫内容),比如,只允许其在几个值是选择一下,这时如果仅仅依据制定详细的说明,依靠人的自觉性来录入,还是不够的,需要通过技术手段来进行限制,一旦输入不符合某范围的值则会报错。

    下面,我们来看一看,如何将某个字段设置成下拉选项,让其只能选择,以减少出错。最终效果如下:

     

    具体操作步骤是:

    一、输入字段名(列名)

    首先要将字段名,即列名写好,以免在设置下拉成功后,因不符合规则,无法写入字段名了。如上图中的“科目”就是字段名。

    二、选中整个目标字段列

    本例子中,用鼠标左键单击B字母,选中整个B列:

    如何将Excel的单元格设置成下拉选项?

    三、调出数据验证选项

    点击“数据”菜单——找到“数据验证”选项——选中下拉选项中的“数据验证”:

    如何将Excel的单元格设置成下拉选项?

    四、输入下拉选项

    在“数据验证”弹出的对象框中,选中“设置”——在允许中选择“序列”,并将右侧“忽略空值”、“提供下拉箭头”勾选中。

    如何将Excel的单元格设置成下拉选项?

    在“来源”下方框中输入下拉的选项,如“语文,数学,英语,音乐”,注意,每一个选项中间要用英文的逗号隔开,注意,是“,”,而不是","。

     

    点确定,即可。此列值就只能下拉选择了,或者输入与下拉选项中相同的值:

     

    当输入无效值时,则会报错:

     

    本文标签:excel设置下拉菜单(8)Excel(3

     

     

     

     

    展开全文
  • 下拉菜单主要有两种类型:1.用于导航的下拉菜单;2.用于表单的下拉菜单本文,我们将对以下...请注意,这些例子,我只包括表格中使用的下拉菜单,而不包括导航使用的下拉菜单。标准下拉菜单标准下拉菜单...

    下拉菜单主要有两种类型:

    1.用于导航的下拉菜单;

    2.用于表单的下拉菜单。

    在本文中,我们将对以下内容进行介绍:

    1、 结构剖析

    下拉菜单的解剖结构与文本输入字段的解剖结构非常相似。

    9e1f5e03-221e-eb11-8da9-e4434bdf6706.png

    2、下拉菜单类型和变体

    虽然标准的下拉菜单被广泛理解,但有一些不同的类型和变体,你可能需要在下一步的工作中考虑。请注意,在这些例子中,我只包括表格中使用的下拉菜单,而不包括导航中使用的下拉菜单。

    标准下拉菜单

    标准下拉菜单是我们听到 "下拉菜单 "这个词的时候会想到的。在活动状态下,它看起来应该和文本输入字段非常相似,直到你点击它,它就会打开一个菜单。

    a21f5e03-221e-eb11-8da9-e4434bdf6706.png

    带自动推荐的下拉菜单

    我第一次知道自动推荐是在Google的搜索领域;然而,我不知道它是在哪里开始实施的。(如果你知道,请告诉我。)当你有长长的列表,用户已经知道答案的时候,它就特别有用(例如,你来自哪个国家)。

    a41f5e03-221e-eb11-8da9-e4434bdf6706.png

    具有自动完成和自动推荐功能的下拉菜单

    自动建议不要与自动完成混淆。自动建议是当输入字段显示供用户选择的选项时。自动完成是指输入提出一种完成单词或短语的方法。

    a71f5e03-221e-eb11-8da9-e4434bdf6706.png

    自动填写字段有时会伪装成文字输入,直到你开始打字为止。

    带多选的下拉菜单

    虽然大多数下拉菜单是单选按钮的延伸(因为你只能选择一个项目),但这个下拉菜单是复选框的延伸:用户可以在一个输入字段中选择多个项目。

    aa1f5e03-221e-eb11-8da9-e4434bdf6706.png

    如果可能的话,尽量避开这种类型。我不得不使用它,因为一个超长的分类列表,我晚上醒来后仍然为这个决定出了一身冷汗。理想情况下,人们会希望有一个自动推荐&自动完成的组合。

    带分组的下拉菜单

    虽然长的下拉菜单并不理想,但你可以将一些项目归类到不同的类别下,这样可以更容易找到你想要的东西。

    ac1f5e03-221e-eb11-8da9-e4434bdf6706.png

    多重选择菜单

    虽然严格来说不是下拉菜单,但多选菜单是一个可以考虑的替代方案。与下拉菜单不同的是,它们从一开始就打开,基本上是一个小小的滚动窗口。

    b01f5e03-221e-eb11-8da9-e4434bdf6706.png

    虽然它们在桌面上很好,但对于移动端来说就有点糟糕了,因为它们是一个 "卷轴中的滚动”。

    日期选择器

    日期选择器应该只用于安排会议、活动等。有一个星期的日期日历可以帮助你决定何时安排早午餐,但如果你想输入护照的到期日期,就会非常烦人。我喜欢那些既可以输入,也可以从下拉菜单中选择的日历--只要确保输入的内容足够聪明,可以在月、日、年之间加上"/",否则就会有点混乱。

    b21f5e03-221e-eb11-8da9-e4434bdf6706.png

    3、下拉样式

    与下拉类型不同的是,"下拉样式 "指的是下拉的实际外观,而不是它的工作方式。下面我列出了一些常见的样式。

    标准样式

    我称这种风格为 "标准",因为这是我们最常看到的。

    b51f5e03-221e-eb11-8da9-e4434bdf6706.png

    标准样式(分离式)

    我越来越多的看到了分离式菜单的风格。这是很有意义的,因为它允许将菜单放在字段的上方或下方,这取决于浏览器的视口。

    b81f5e03-221e-eb11-8da9-e4434bdf6706.png

    圆角边框

    圆形的边框与具有更多游戏性的UI配合起来效果很好。

    bb1f5e03-221e-eb11-8da9-e4434bdf6706.png

    带图标

    在输入的开头添加一个简单的图标可以让它看起来更有 "设计感"。每当有人抱怨一个表单看起来太无聊时,我就会添加图标。这是一个简单的解决方法。

    c21f5e03-221e-eb11-8da9-e4434bdf6706.png

    小贴士:如果有人抱怨长表格看起来很无聊,只需添加图标即可。

    带图像

    作为一项规则,我避免在下拉菜单中添加图片----只是因为必须更新背后的维护很麻烦,尤其是当它是一个经常变化的列表时。然而,当你想显示事物之间的区别时(狗的品种、蛋糕、办公家具等),它是非常有用的。

    c81f5e03-221e-eb11-8da9-e4434bdf6706.png

    然而,我认为,由于下拉式的尺寸有限,很难看清图片是什么(见上图),所以除非你把图片做得非常大,否则通常不值得努力。

    Material Design的填充下拉菜单

    我是Material Design的忠实粉丝,包括他们的下拉菜单。

    在Material Design指南中,"仅限行 "字段已经不再使用,但你仍然会在网上看到它。

    ca1f5e03-221e-eb11-8da9-e4434bdf6706.png

    仅限行 "字段被替换成了 "已填写的下拉菜单",在用户测试中似乎做得更好。虽然没有那么酷,但更方便用户使用--这就是它的意义所在,伙计们。

    ce1f5e03-221e-eb11-8da9-e4434bdf6706.png

    Material Design的简要下拉菜单

    就像他们的概要文本字段一样,Material Design的简要下拉菜单超级酷。他们的菜单与实际的下拉式容器分离,这可以帮助解决一些可用性问题。

    我敢肯定,大家都会看到这个性感的小动画,它的焦点在输入的顶部变小。我还想指出一些经常被(我)忽略的内容:如果查看实际的下拉列表,您会注意到第一项是空白的。这样一来,如果用户想稍后再返回该问题或将其留空,则可以“重置”下拉列表。

    d21f5e03-221e-eb11-8da9-e4434bdf6706.png

    4、下拉状态

    当用户与任何类型的输入交互时,输入应该切换状态或外观来给用户反馈。这里我们将研究一下下拉菜单的不同状态。

    活动状态

    活动状态是用户在与下拉菜单交互之前的样子。

    d91f5e03-221e-eb11-8da9-e4434bdf6706.png

    禁用状态

    如果你禁用了一个输入字段,用户将无法与之交互,但他们可以看到它。如果你的业务规则需要,你可以使用这个功能,但可能不会经常使用。

    e01f5e03-221e-eb11-8da9-e4434bdf6706.png

    悬停

    如果用户将鼠标悬停在下拉菜单上,它应该表示可以点击。

    e51f5e03-221e-eb11-8da9-e4434bdf6706.png

    N00b提示:你不能在触摸设备上悬停,所以如果你是为移动或平板电脑应用设计,就不要设计这些状态。

    高亮状态

    高亮的状态是指用户在使用分页地图时(这是指用户使用 "tab "导航界面和 "回车 "输入信息时),在选择前突出显示下拉菜单。我们通常看到的是可点击项目上的 "蓝色光环”。

    然而,有些网站将高亮和焦点状态结合在一起,这样即使用户不点击 "输入",下拉菜单也会直接打开。我对什么是最好的系统很纠结。从逻辑上讲,将这两种状态结合起来是有意义的;但是,当下拉菜单在没有我明确告诉他们的情况下打开时,我感到非常困惑。还有人有过这样的经验吗?请在评论中告诉我。

    ec1f5e03-221e-eb11-8da9-e4434bdf6706.png

    焦点状态

    焦点状态是指项目可交互的时候。一旦你点击了下拉菜单,它就会打开一个菜单并显示其选项。

    虽然我所交互的很多下拉菜单在活动状态和聚焦状态下都会保持箭头指向同一个方向,但我更喜欢切换箭头的方向。我认为它们就像手风琴一样。而且如果你超级酷的话,你可以用动画的方式来改变箭头的方向。

    f51f5e03-221e-eb11-8da9-e4434bdf6706.png

    当用户将鼠标悬停在菜单中的项目上时,它应该显示被悬停在哪个选项上。

    f81f5e03-221e-eb11-8da9-e4434bdf6706.png

    已完成的输入

    一旦用户选择了一个选项,输入端就会自动恢复到活动状态,只是它将显示所选项目。

    fb1f5e03-221e-eb11-8da9-e4434bdf6706.png

    失败反馈

    在自由文本输入的情况下,用户有可能会出现错别字等。但是,由于下拉菜单中的选项是预先设定好的,所以应该只有一种类型的失败反馈:"不完整 "类型,用户只有在填写完表格之前点击 "提交 "按钮,才会收到这种反馈。

    ff1f5e03-221e-eb11-8da9-e4434bdf6706.png

    5、占位符应该说什么

    一般情况下,我会保持与自由文本字段类似的占位符/提示文字。还是不确定?这里有几个选项供您选择。

    保持占位符空白

    如果其他文本字段没有占位符的话,留空占位符通常是最简单的选择。

    04205e03-221e-eb11-8da9-e4434bdf6706.png

    在占位符里有一个通用提示

    '-选择-'、'选择'等都是下拉菜单中的经典提示。

    09205e03-221e-eb11-8da9-e4434bdf6706.png

    在占位符里有一个推广词

    使用通用的'Select'/'Choose',然后你想让他们选择的东西,这是一种很酷的方式,可以让你的下拉菜单保持一致性,同时也可以给用户一个提示,让他们知道该怎么做。

    0d205e03-221e-eb11-8da9-e4434bdf6706.png

    在占位符中设置一个选项

    虽然你可以在下拉菜单中选择一个预选项目,但你必须小心翼翼地确保用户已经看到并阅读了它,否则他们可能会同意一些他们不愿意看到的东西。#classicDarkPatternMove

    11205e03-221e-eb11-8da9-e4434bdf6706.png

    那么,你应该选择什么方案呢?当有疑问时,选择一致性。如果你的文本字段都有占位符,那就使用占位符。

    6、何时不使用下拉菜单(以及何时使用)

    这是献给所有让我用下拉菜单输入出生年份的网站:f*****你。我不需要再通过滚动浏览一整个月的列表来提醒我的年龄迅速增长,直到我最终找到我出生的年份。

    如果你只有不到5个选项

    如果你的选项少于5个,可能更容易使用单选按钮,而不是使用额外的点击来获得所有的列表选项。任何超过五个以上的选项都会开始占用很多空间。

    13205e03-221e-eb11-8da9-e4434bdf6706.png

    注:有人说,规则是应该少于6个,而不是少于5个,还是让你来判断吧。

    如果说打字比选字更方便的话

    如果你的用户打字的时间比从下拉菜单中选择东西要少,你真的要问哪个更好吗?例如,对于一个出生日期,输入日期比使用三个单独的下拉菜单更容易。

    17205e03-221e-eb11-8da9-e4434bdf6706.png

    有时候,开发者可能会反对这样做,因为做一个下拉菜单比设置所有关于用户可以和不能在自由文本字段中输入什么的规则更容易。唉,已经输掉了这场战斗很多次,但我还是继续打好这场战斗。

    如果你有两个选项,而且它们是 "开 "和 "关"(或 "是 "和 "否”)。

    有一个有两个选项的下拉菜单有点烦人。特别是在 "是/否 "问题上。Toggles可以很好地解决这类问题。

    1b205e03-221e-eb11-8da9-e4434bdf6706.png

    如果选项是数字式的

    如果你的选项是数字,你有几个选择。

    第一种是,再次让他们打出它。步进器也是有帮助的,但我只有在行为预期到最大5的时候才会建议这样做。否则,你可怜的用户会坐在那里点击到100。

    1f205e03-221e-eb11-8da9-e4434bdf6706.png

    第二种是使用滑块选择值。滑块对于较大的数字或近似值特别有帮助。

    22205e03-221e-eb11-8da9-e4434bdf6706.png

    25205e03-221e-eb11-8da9-e4434bdf6706.png

    如果有很多选择

    如果一个下拉菜单有很多选项(如果可能的话,你应该避免这种情况),让用户 "搜索 "他们的选项。最常看到这种类型的行为的时候是国家下拉菜单,因为它们很庞大,但也很容易回答。正如前面提到的,这最好是与自动填写配对。

    27205e03-221e-eb11-8da9-e4434bdf6706.png

    那么,什么时候应该使用下拉式菜单呢?

    一个输入需要满足两个要求才能考虑使用下拉菜单。

    1.有六个以上的选项。

    2.当选项不是用户直接就能知道的时候。例如,假设你的用户正在上传一个视频,而主机需要知道要在视频中附加什么样的许可证。一般的用户不会知道平台上所有的选项,所以下拉菜单是必要的。

    7、原生下拉菜单

    当时间和预算紧张时,或者当我们在做MVP时,我们倾向于使用原生或默认选项。拥有自定义的输入是蛋糕上的糖霜,但有时我们没有选项来做那个甜蜜的糖霜。在这种情况下,知道你有什么东西可以用就好了。

    当涉及到不同设备之间的可用性时,原生下拉菜单也是比较安全的。

    我们的大规模结账可用性测试和基准测试显示,虽然82%的电子商务网站在结账流程中使用自定义设计的下拉菜单,但31%的自定义设计的下拉菜单有明显的可用性问题。

    默认值

    下面是一些原生下拉式的例子。

    29205e03-221e-eb11-8da9-e4434bdf6706.png

    2b205e03-221e-eb11-8da9-e4434bdf6706.png

    从这些例子中可以看到,它们都因平台和浏览器的不同而略有不同。它们并不漂亮,但都很好用。

    使用shell

    以前我一直把它叫做 "半定制",但最近我发现一篇文章把这个图案叫做外壳,听起来更正式。所以我发誓从今以后要把它称为 "壳",我还发誓要在会议上使用它,并在人们问我它是什么意思的时候,我就会陶醉在它的力量中,这样我就可以炫耀我有多聪明。

    2d205e03-221e-eb11-8da9-e4434bdf6706.png

    但是什么是shell?你会问。shell是指当一个字段看起来是自定义的,但当你点击它时,它使用了原生的下拉菜单样式。这是一个简单的方法,可以让页面的风格与你的品牌保持一致,并降低开发成本。它还可以帮助解决自定义字段带来的所有用户体验问题。

    8、无障碍检查表

    1.下拉菜单的活动状态(包含标签)是否大于44px(我们把标签包含在其中,因为如果点击标签,下拉菜单应该还能打开)。

    2.下拉菜单中的每一行的高度是否大于44px,中间有8px?

    3.颜色是否符合标准?

    4.你的下拉菜单是否有高亮的状态?

    5.确保下拉菜单能在标签地图上工作。

    6.如果你确实使用了自定义的下拉菜单,请确保它可以在浏览器视口太低的情况下向上或向下打开。

    33205e03-221e-eb11-8da9-e4434bdf6706.gif

    展开全文
  • 造冰箱的大熊猫,本文适用于LibreOffice Calc 5.1.6.2 + Ubuntu 16.04@cnblogs 2019/1/2 LibreOffice是一个类似Microsoft Office的办公自动化软件套装,包括了...Calc,单元格可设置为“下拉菜单”模式。...
  • 做了一个表单,其中有一个表格控件,想在表格的任意地方用下拉菜单日期控件修改内容,可以吗? 好像很难吧? 下拉菜单日期控件怎样设置呢?
  • Vue.js组件库Element的Dropdown 下拉菜单,Steps 步骤条,Dialog 对话框和Tooltip 文字提示。
  • handCommand (k) { //下拉菜单部分逻辑 this.dataValue = '' this.type = k }, setCurSearchKey (key) { //切换screen菜单,created需要调用一次,获得默认的curSearchKey let value = key; if (!value || ...
  • 数据有效预警管理高级技巧 ...在设置中选择"序列"选项 在"来源"输入可选择的类别,以逗号(英文状态下的)间隔 在"出错警示"输入若输入错误尔警示的信息,确定 完成后即可在单元格通过下...
  • React-AppBar示例
  • 为此,请输入您的Google表格设置(文件>电子表格设置),单击“计算”标签,然后从“重新计算”下拉菜单中选择更新频率。 使用TODAY函数查找日期 (Finding the Date Using the TODAY Function) If you want to ...
  • Excel下拉菜单怎么做 Excel排序高手技巧视频教程 本人张光欢,20...
  • 原文件出处:  ...   网页顶部导航菜单,鼠标滑过弹出下拉菜单丨 var eMenu,eItem,eExit,eDesk; function doMenu(){ eMenu.style.backgroundColor=e
  • 1、按列设置表格为可编辑,支持下面几种编辑样式:单行文本、多行文本、数值型、下拉选择和日期选择。 2、可将任意的表格单元格(TD)设置为可编辑的,单击相应单元格即可进入编辑状态。支持下面几种编辑样式:单行...
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ... 导航下拉弹出菜单下拉标题  *{padding:0;margin:0} html{min-height:101%} body{font-family:verdana,arial,
  • 1.给dropdown设置transfer=true,即可 { align: 'center', width: 90, ...
  • 1回答2021-03-05浏览:146分类:办公入门回答:方法/步骤首先选中最后标准差要出现的单元格点击【开始】-【自动求和】旁边的三角,出现下拉菜单,点击【其他函数】出现【插入函数】的窗口,点击【选择类别】,选择...
  • 免费日期选择控件DatePicker DatePicker它是一个下拉列表框, 提供了日期选择的功能.但是这个组件有日期对应星期几显示错误的bug。 官方主页: ...
  • 怎样让EXCEL表出现升序、降序选中日期列、或日期的任一单元格,选择:排序和筛选--升序(这里以升序为例,也可以用降序或自定义排序); 点击后,日期列即按从小到大排序,同表的其它列也跟着自动调整。Excel...
  • 直接有效性输入序列内容创建下拉菜单 使用单元格引用创建下拉菜单 引用其他工作表的单元格内容作为源来创建下拉列表 定义名称 使用INDIRECT函数 创建动态下拉菜单 创建二级下拉菜单 使用条件格式突出...
  • 电脑Excel表格中数据透视图怎么制作腾讯视频/爱奇艺/优酷/外卖 充值4折起我们使用excel表格办公的时候,有时候会需要使用到数据透视表。今天小编就告诉大家电脑Excel表格中数据透视图怎么制作。具体如下:1. 小编...
  • 本文实例讲述了JS简单设置下拉选择框默认值的方法。分享给大家供大家参考,具体如下: //根据下拉对象默认选中后台对应的记录 function setSelectOption(objSelect, targetValue){ if(objSelect){ var options = ...
  • 以下是Excel2016通过安装控件,实现表格下拉选择日期的一些步骤: 知识准备工作:先了解下如何安装控件,这一部分很重要,excel选择可用宏https://jingyan.baidu.com/article/6181c3e0ad4144152ef1533f.html 如果...
  • 电子表格多轴图表When you’re creating graphs or charts in Google Sheets, you don’t need to stick with the default layout. Google Sheets will try to pick your X- and Y-axes automatically, which you ...
  • ExtJS中表格的特性简介 表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义 表格的数据存储器由Ext.data.Store定义,根据解析数据的不同,数据存储器可...
  • 开发遇到一个需求是表格中的数据要以复选框树状的形式来展示,并且表格的某一列表头嵌套下拉框,下拉框可以任意选数据,点击多选框进行多选保存 如图每一行数据可以进行对版本的一个下拉选择,并且进行勾选...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,339
精华内容 4,535
关键字:

如何在表格中设置日期下拉菜单