Bootstrap下拉菜单(Dropdown)插件实现隐藏操作按钮的简单实现

1) 需求

这周接到一个关于前端的任务,由于我是前端菜鸡,只能靠投机取巧来实现。需求描述:表格中最后一列的操作列中由于按钮太多,需要隐藏一部分。点击竖着排列的三个点(更多图标),弹出隐藏的按钮。完毕!

2) 实现思考

一般遇到这种不会的问题就是上网找类似。无果,主要因为太菜。然后就找到了一个bootstrap的插件,虽然背离了初衷的样式,但是差不多可以实现。使用插件的确比自己创作来的简单些。

3) 想象 VS 现实

这是要求的样式:
在这里插入图片描述
用bootstrap的dropdown实现:
在这里插入图片描述
如果按钮上面描述较多,会被屏幕限制,可以使用dropdown-menu-right控制显示到左侧即可。如果对样式细节有要求可以使用css微控。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的导航栏</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        .table tbody tr td{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <br>
    <div class="container">
        <table style="width: 360px;vertical-align: middle;" class="table table-striped table-hover table-bordered text-center">
            <thead>
                <tr>
                    <th class="text-center">表头1</th>
                    <th class="text-center">表头2</th>
                    <th class="text-center">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>表格11</td>
                    <td>表格12</td>
                    <td><i>
                            <ul class="nav navbar-nav">
                                <li class="dropdown">
                                    <i href="#" class="tool- more1 dropdown-toggle" data-toggle="dropdown" aria-expanded="true" style="min-width:30px">
                                    icon-box</i>
                                    <ul class="dropdown-menu dropdown-menu-right" style="display:block;text-align:center;border:none; min-width:110px">
                                        <li name="liModifyPlantBtn" id="liModifyPlantBtn" style="height:25px">
                                            <a class="tool-icon-box tool-edit-active pl-big" style="font-style: normal;width:100%" title="修改产品平台" name="modifyPlantBtn" id="modifyPlantBtn">
                                                查看详情
                                            </a>
                                        </li>
                                        <li name="liRemovePlantBtn" id="liRemovePlantBtn" style="height:25px">
                                            <a class="tool-icon-box tool-delete" style="font-style: normal;width:100%" title="删除产品平台" name="removePlantBtn" id="removePlantBtn">
                                                修改本行
                                            </a>
                                        </li>
                                        <li name="liMultiplexPlantBtn" id="liMultiplexPlantBtn" style="height:25px">
                                            <a class="tool-icon-box tool-reuse pl-big" style="font-style: normal;width:100%" title="复用技术平台" name="multiplexPlantBtn" id="multiplexPlantBtn">
                                                删除本行
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </i>
                    </td>
                </tr>
                <tr>
                    <td>表格21</td>
                    <td>表格22</td>
                    <td><div class="btn-group">
                            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">操作 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" style="display: block;">
                                <li><a href="#">详情</a>
                                </li>
                                <li><a href="#" class="font-bold">编辑</a>
                                </li>
                                <li><a href="#">删除</a>
                                </li>
                            </ul>
                        </div></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值