首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Bootstrap快速上手(一)----右键菜单

Bootstrap快速上手(一)----右键菜单

作者头像
令仔很忙
发布2018-09-14 16:31:13
1.9K0
发布2018-09-14 16:31:13
举报
文章被收录于专栏:令仔很忙令仔很忙

前言


一款软件,除了稳定,功能强大,用户体验也很重要。界面风格和布局的一致性让人在视觉上感觉到这是一个统一的系统,协调的系统,至于采用什么风格及颜色系统,美工和设计人员起决定作用。对大部分开发人员来说,要设计出良好的系统界面不是件容易的事,特别是在色彩上。

对没有美工基础的人来说,的确有点困难。我的整体感觉是不要太花哨,颜色也不要太多,东方人可能喜欢偏冷色,西方人喜欢偏暖色。那我们应该怎么去做呢?我想起一句话:

有选择的拿,为我所用的拿,不卑不亢的拿 —鲁迅《拿来主义》

其实也可以定义为站在巨人的肩膀上学习,先去借鉴、模仿,为我所用;当然不能只是一味的去模仿,能够用自己的话表达出你的意思,别人能够听懂,这就是进步。

最近在做UI系统,需要研究DataTable的右键菜单,前端开发框架用的是Bootstrap,简洁、直观、强悍。下面就给大家说说右键菜单的制作。

在网上查了一堆资料,最终找到一款非常不错的插件:bootstrap-menu,想用的朋友可以下下来自己研究研究,下载地址链接中也有,Demo也有,很容易实现。

具体使用过程


引用

想要使用bootstrap-menu的话,需要引用一些css和js文件,首先是bootstrap一些基础的css和js文件,若是想要实现右键菜单还需要引用的文件:

<!-- 右键菜单图标css bootstrap自带的一些图标的兼容性不太好,在浏览器中显示有问题,然后就用的这个-->
<link href="${pageContext.request.contextPath}/Script/bootstrap-3.3.0-dist/dist/css/font-awesome.css" rel="stylesheet" type="text/css"/>

<!-- 右键菜单必备js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/Script/bootstrap-3.3.0-dist/dist/js/BootstrapMenu.min.js"></script>

初始化

Bootstrap DataTable的实现过程中,如果你的数据是动态加载的,那就给它加上初始化的属性,因为你动态加载的数据自动给tr添加了class,单行的是odd,双行的是even,为了统一管理,咱们把默认的删掉,自定义一个class,名字随便:

//当表格完成加载绘制完成后执行此方法。
initComplete: function () {
    $("#table_local tbody tr").removeClass("odd");
    $("#table_local tbody tr").removeClass("even");
    $("#table_local tbody tr").addClass("DynamicAdd");
}

右键菜单js文件

上面的过程都做完了,咱们就可以开始写js来实现右键菜单了,直接上代码:

$(document).ready(function(){
        var menu=new BootstrapMenu('.DynamicAdd',{       //.DynamicAdd是tbody下的tr的class名称
            fetchElementData:function($rowElem){     //fetchElementData获取元数据
                var data = table.row($rowElem).data();   //获取表格数据
                return data;    //return的目的是给下面的onClick传递参数
            },

            actionsGroups: [  //给右键菜单的选项加一个分组,分割线
                /* ['setEditable', 'setUneditable' ],*/
                ['editDescription'],
                ['deleteRow']

            ],
            /* you can declare 'actions' as an object instead of an array,
            * and its keys will be used as action ids. */
            //自定义右键菜单的功能
            actions: {
                addDescription: {
                    name: '<font size=3>添加</font>',
                    iconClass: 'fa-plus',
                    onClick: function(row) {    //添加右击事件
                        $("#myAddModal").modal("show");
                        //定义你自己的添加事件
                    },
                    isEnabled: function(row) {
                       return row.isEditable;
                    }
                },
                editDescription: {
                      name: '<font size=3>修改</font>',
                      iconClass: 'fa-edit',
                      onClick: function(row) {   //修改右击事件
                           alert(row.id);
                           //定义你自己的修改事件
                      },
                      isEnabled: function(row) {  
                          return row.isEditable;
                      }
               },

               deleteRow: {
                   name: '<font size=3>删除</font>',
                   iconClass: 'fa-trash',
                   onClick: function(row) {  //删除右击事件
                       alert(row.id);
                       //定义你自己的删除事件
                   },
                   isEnabled: function(row) {
                        return row.isEditable && row.isRemovable;
                   }
               }
            }
        });

.DynamicAdd就是初始化的时候咱们统一给加的class,自己按照上面的代码试试,我觉得注释挺详细的,就不再过多的解释了!需要你动手的时间到了!

这里写图片描述
这里写图片描述

【转载请注明出处:令仔很忙{ Bootstrap快速上手(一)—-右键菜单 }】

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年02月03日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 具体使用过程
    • 引用
      • 初始化
        • 右键菜单js文件
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档