利用bootstrap的modal和tab制作的联动自定义UI

最新推荐文章于 2022-06-16 07:33:32 发布
最新推荐文章于 2022-06-16 07:33:32 发布
阅读量2k 收藏
点赞数
分类专栏： 前端 bootstrap 文章标签： bootstrap自定义UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25324335/article/details/74086245
版权

直接上代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框（Modal）插件</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var productTypeData = [{
            "codeId": 10043,
            "meaning": "服务",
            "parentCodeValueId": null,
        }, {
            "codeId": 10043,
            "meaning": "销售",
            "parentCodeValueMeaning": null
        }];
        var productCatalog1Data = [{
            "parentCategotyId": "-1",
            "categotyName": "Callidus",
            "categotyId": "101"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "MS",
            "categotyId": "102"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "Offshore",
            "categotyId": "103"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "Oracle",
            "categotyId": "104"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "SAP",
            "categotyId": "105"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "Siemens",
            "categotyId": "106"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "测试产品",
            "categotyId": "107"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "穆迪",
            "categotyId": "108"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "夏尔",
            "categotyId": "110"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "运维",
            "categotyId": "111"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "test",
            "categotyId": "10023"
        }];
        var productCatalog2Data = [{
            "parentCategotyId": "101",
            "categotyName": "Callidus",
            "categotyId": "112"
        }, {
            "parentCategotyId": "102",
            "categotyName": "Dynamics AX",
            "categotyId": "113"
        }, {
            "parentCategotyId": "102",
            "categotyName": "Dynamics CRM",
            "categotyId": "114"
        }, {
            "parentCategotyId": "102",
            "categotyName": "Sharepoint",
            "categotyId": "115"
        }, {
            "parentCategotyId": "103",
            "categotyName": "JAVA开发",
            "categotyId": "116"
        }, {
            "parentCategotyId": "103",
            "categotyName": "Oracle开发",
            "categotyId": "117"
        }, {
            "parentCategotyId": "103",
            "categotyName": "SAP开发",
            "categotyId": "118"
        }, {
            "parentCategotyId": "104",
            "categotyName": "Agile",
            "categotyId": "119"
        }, {
            "parentCategotyId": "104",
            "categotyName": "BI",
            "categotyId": "120"
        }, {
            "parentCategotyId": "104",
            "categotyName": "EBS ERP",
            "categotyId": "121"
        }, {
            "parentCategotyId": "104",
            "categotyName": "EBS HR",
            "categotyId": "122"
        }, {
            "parentCategotyId": "104",
            "categotyName": "Hyperion",
            "categotyId": "123"
        }, {
            "parentCategotyId": "104",
            "categotyName": "Middleware",
            "categotyId": "124"
        }, {
            "parentCategotyId": "104",
            "categotyName": "PeopleSoft",
            "categotyId": "125"
        }, {
            "parentCategotyId": "104",
            "categotyName": "SIEBLE",
            "categotyId": "126"
        }, {
            "parentCategotyId": "104",
            "categotyName": "其他",
            "categotyId": "127"
        }, {
            "parentCategotyId": "105",
            "categotyName": "BO",
            "categotyId": "128"
        }, {
            "parentCategotyId": "105",
            "categotyName": "HANA",
            "categotyId": "129"
        }, {
            "parentCategotyId": "105",
            "categotyName": "SAP ERP",
            "categotyId": "130"
        }, {
            "parentCategotyId": "105",
            "categotyName": "SAP HR",
            "categotyId": "131"
        }, {
            "parentCategotyId": "105",
            "categotyName": "SAP CRM",
            "categotyId": "132"
        }, {
            "parentCategotyId": "106",
            "categotyName": "NX",
            "categotyId": "133"
        }, {
            "parentCategotyId": "106",
            "categotyName": "SolidEdge",
            "categotyId": "134"
        }, {
            "parentCategotyId": "106",
            "categotyName": "TeamCenter",
            "categotyId": "135"
        }, {
            "parentCategotyId": "106",
            "categotyName": "Techomatix",
            "categotyId": "136"
        }, {
            "parentCategotyId": "107",
            "categotyName": "HCM",
            "categotyId": "137"
        }, {
            "parentCategotyId": "107",
            "categotyName": "HEC费控系统",
            "categotyId": "138"
        }, {
            "parentCategotyId": "107",
            "categotyName": "HLS融资租赁系统",
            "categotyId": "139"
        }, {
            "parentCategotyId": "107",
            "categotyName": "IT规划",
            "categotyId": "140"
        }, {
            "parentCategotyId": "107",
            "categotyName": "MAS ERP",
            "categotyId": "141"
        }, {
            "parentCategotyId": "107",
            "categotyName": "SRM供应商关系管理系统",
            "categotyId": "142"
        },{
            "parentCategotyId": "108",
            "categotyName": "穆迪",
            "categotyId": "144"
        }, {
            "parentCategotyId": "109",
            "categotyName": "移动应用",
            "categotyId": "145"
        }, {
            "parentCategotyId": "109",
            "categotyName": "开发",
            "categotyId": "146"
        }, {
            "parentCategotyId": "110",
            "categotyName": "BPO",
            "categotyId": "147"
        }, {
            "parentCategotyId": "110",
            "categotyName": "ICast",
            "categotyId": "148"
        }, {
            "parentCategotyId": "110",
            "categotyName": "Ifile",
            "categotyId": "149"
        }, {
            "parentCategotyId": "111",
            "categotyName": "MAS",
            "categotyId": "150"
        }, {
            "parentCategotyId": "111",
            "categotyName": "ITO",
            "categotyId": "151"
        }, {
            "parentCategotyId": "111",
            "categotyName": "Oralce客服中心",
            "categotyId": "152"
        }, {
            "parentCategotyId": "111",
            "categotyName": "SAP CCC",
            "categotyId": "153"
        }, {
            "parentCategotyId": "104",
            "categotyName": "DSTEST",
            "categotyId": "10009"
        }
        ];

        $(function () {
            //根据数据源创建各个button按钮
            //产品类型
            var $tr=$("<tr></tr>");
            for(let i=0;i<Math.ceil(productTypeData.length);i++){
                var $td=$("<td></td>");
                var $btn=$("<button class=\"btn btn-default\"></button>").text(productTypeData[i].meaning);
                $btn.appendTo($td);
                $td.appendTo($tr)
                $tr.appendTo($("#productTypeTable"))
            }
            //一级产品
            for(var j=0;j<Math.ceil(productCatalog1Data.length/4);j++){
                var $tr1=$("<tr></tr>");
                for(let i=j*4;i<j*4+4&&i<productCatalog1Data.length;i++){
                    var $td1=$("<td></td>");
                    var $btn1=$("<button class=\"btn btn-default\"></button>").text(productCatalog1Data[i].categotyName);
                    $btn1.attr("id",productCatalog1Data[i].categotyId);
                    $btn1.appendTo($td1);
                    $td1.appendTo($tr1);
                    $tr1.appendTo($("#firstTable"));
                }
            }
            var item={};
            var itemList=[];
            $("#showModel").click(function () {//弹出modal框并且初始化
                item={};
                $("#myModal").modal();
                $("#error").text("");
                $('#myTab a:first').tab('show');
                $("#home button").removeClass('btn-primary');
                $("#firstTable button").removeClass('btn-primary');
                $("#secondTable button").removeClass('btn-primary');

            })
            $("#home button").click(function () {//给产品类型上的button添加点击事件
                item.n1=$(this).text();
                $("#home button").removeClass('btn-primary');
                $(this).addClass("btn btn-primary");
                $('#myTab li:eq(1) a').tab('show');//跳转到第二个标签页
            });
            $("#firstTable button").click(function () {//给一级产品上的button添加点击事件
                item.n2=$(this).text();
                $("#firstTable button").removeClass('btn-primary');
                $(this).addClass("btn btn-primary");
                var $fatherId=$(this).attr("id");
                //二级产品
                var filterData=productCatalog2Data.filter(function (i, index, arr) {
                    return i.parentCategotyId==$fatherId;
                });
                $("#secondTable").html("");
                for(var k=0;k<Math.ceil(filterData.length/4);k++){
                    var $tr2=$("<tr></tr>");
                    for(let q=k*4;q<k*4+4&&q<filterData.length;q++){
                        var $td2=$("<td style=\"border: 0px solid transparent\"></td>");
                        var $btn2=$("<button class=\"btn btn-default\"></button>").text(filterData[q].categotyName);
                        $btn2.appendTo($td2);
                        $td2.appendTo($tr2);
                        $tr2.appendTo($("#secondTable"));
                    }
                }
                $('#myTab li:eq(2) a').tab('show');//跳转到第二个标签页
                $("#secondTable button").click(function () {//给二级产品上的button添加点击事件
                    item.n3=$(this).text();
                    $("#secondTable button").removeClass('btn-primary');
                    $(this).addClass("btn btn-primary");
                });
            });
            $("#submit").click(function () {//确定按钮
                if(!item.n1){
                    $("#error").text('请选择产品类型');
                }else if(!item.n2){
                    $("#error").text('请选择一级产品');
                }else if(!item.n3){
                    $("#error").text('请选择二级产品');
                }else{
                    $("#myModal").modal('hide')
                    itemList.push(item);
                }
                var newList=$.map(itemList,function (obj) {
                   return  (obj.n1+"."+obj.n2+"."+obj.n3);
                })
               $("#choose").text(newList.join(";").toString());
            });
        });
    </script>
</head>
<body>

<!-- 按钮触发模态框 -->
<button class="btn btn-success btn-lg" id="showModel">
    开始演示模态框
</button>
<div id="choose"></div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header" style="border: none;height: 15px">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5  style="color: red" class="modal-title" id="error"></h5>
                </div>
            <div class="modal-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab">产品类型
                        </a>
                    </li>
                    <li><a href="#ios" data-toggle="tab">一级产品</a></li>
                    <li><a href="#jmeter" data-toggle="tab">二级产品</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <table class="table" id="productTypeTable">
                        </table>
                    </div>
                    <div class="tab-pane fade" id="ios">
                        <table class="table" id="firstTable">
                        </table>
                    </div>
                    <div class="tab-pane fade" id="jmeter">
                        <table class="table" style="border: 0px solid transparent" id="secondTable">
                        </table>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" id="submit">
                                确定
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>


效果图：


选中后如图：

注意事项：

1. 模态框里面的各个按钮是button标签，在应用到项目中的时候，点击的话可能会出现页面刷新的情况。这时候要将动态生成的button标签改成type=button的input标签；

2.由于项目需要，这里的产品类型和一级产品之间并没有级联关系；

3.这里的例子带有校验功能，即产品类型、一级产品和二级产品都是必选项，有任意一个没有选择的话弹出框左上角会有错误提示；

4.这里的级联操作没有使用远程数据做演示，性质是一样的，只不过我在级联的时候用的是js中的filter函数作为过滤，而ajax的方式是用过滤的参数作为请求下一级数据的参数；

5.其实项目中选中的效果是这样的：。有时间的话会在下一章继续完善成这样的样式。

6.如果发现bug或待改进的地方，希望多多指正，谢谢！


袁杰Jerry
关注
专栏目录
BootStrap实现左侧或右侧竖式tab选项卡
w1366352655的博客
12-27 1764
BootStrap实现左侧或右侧竖式tab选项卡 BootStrap实现左侧或右侧竖式tab选项卡 代码如下： &amp;lt;div style="height: 100px;"&amp;gt; &amp;lt;div class="col-xs-2"&amp;gt; &amp;lt;ul class="nav nav-...
Bootstrap-table实现下拉框三级联动查询，分页，参数设置表格，以及分页显示。
wlf_wzx的博客
10-15 2181
1.Bootstrap-table的效果图如下： 2.添加boostrap的样式。可通过bootstrap官网下载。bootstrap-table页面布局样式: <link rel="stylesheet" href="../static/assets/css/bootstrap.min.css"> <link rel="stylesheet" href="https://un...
Bootstrap系列之模态框（Modal）
老__L的博客
06-16 1万+
模态框（Modal）
JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
weixin_33729196的博客
09-29 677
前言：之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有） ，收到很多园友的反馈，当然也包括很多诟病，因为上篇只是将功能实现了，很多细节都没有处理，这篇博主将带领大家一起来优化这里的效果，使之成为一个可以在项目里面使用的成品。 说点题外话，本来，在互联网模式下，Tab页+iframe的组合是不能被大多数平台接受的，从这些年推出的一些好的产品可...
Bootstrap 标签页（Tab）插件
Sensation_cyq的博客
07-07 821
遇到的问题  同用一套tab  没法控制tab选择和content同步展示 用法 您可以通过以下两种方式启用标签页： 通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。 添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pil
如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
01-19
本篇文章介绍自己在项目中基于bootstrap的modal组件，自定义alert，confirm和modal对话框的经验，相对比较简单实用，希望能对你有所参考价值。 1. 实例展示 详细的代码可通过前面给出的下载链接下载源码去了解，...
基于Bootstrap实现城市三级联动
08-28
总之，基于Bootstrap实现的城市三级联动是一种常见的前端交互功能，它利用Ajax技术和jQuery事件监听来实现动态数据加载。通过这种方式，我们可以创建一个响应迅速且用户友好的界面，允许用户方便地在多个级别的地理...
Bootstrap Modal对话框如何在关闭时触发事件
09-01
Bootstrap Modal对话框是网页设计中常用的交互元素，用于展示弹出式内容，如警告、确认信息或表单等。...通过不断实践和学习，你将能够更加熟练地利用Bootstrap Modal对话框来构建更加互动和响应式的网页应用。
Bootstrap modal只加载一次数据的解决办法(推荐)
08-28
Modal 可以通过按钮或链接来调用，并且可以自定义模态框的内容和样式。 Bootstrap Modal 只加载一次数据的问题 当我们使用 Bootstrap Modal 时，可能会遇到一个问题，那就是 Modal 只加载一次数据。如果我们想让 ...
Bootstrap导航栏和标签页tab 联动问题
qq_34188012的博客
04-16 1750
Bootstrap导航栏和标签页tab 联动问题 分三步： 1.头部移动设备 data-target目标值 #demo-navbar 和 导航栏id值相同 2。标签页设置id=" tab-list" 3.脚本 // 标签页和导航栏联动 $(document).ready(function(){ $("#demo-navbar .dropdown-...
vue + iview 页面Modal中内嵌Tabs，重新显示Modal时默认选中Tabs的第一项
票票的博客
07-19 751
<Modal v-model="modal.visible" width="80%" transfer :title="modal.title" footer-hide> <Tabs ref="tabs" :animated="false"> <TabPane name="name1" ></TabPane> <TabPane name="name2" ></TabPane> <TabPane name="name3
Bootstrap布局 菜单栏+选项卡
PSW_CSDN的博客
12-06 2185
Bootstrap布局: 菜单+选项卡组合
基于Bootstrap的标签页组件bootstrap-tab
极客神殿
08-17 7976
bootstrap-tab组件是对原生的bootstrap-tab组件的封装，方便开发者更方便地使用，主要包含以下功能： tab页初始化 关闭tab页 新增tab 显示tab页 获取tab页ID 使用 Step1 ：引入样式 1 2 3 4 Step2：引入脚本 1 2 3 Step3：使用 (&amp;amp;amp;quot;#tabContai...
bootstrap的tabs标签页：实现a页面指定的tab，点击more，跳去b页面指定的tab
电鳗的博客
05-16 1万+
如图。 实现目标： a页面的tab1标签页中点击more 跳去b页面的tab1 这里为什么是more跳过去的呢，因为tab nav上面的tab1，tab2，tab3，是用来对应自己在同个页面的标签页的。 使用框架： bootstrap的v3版本的tabs标签页
Bootstrap简单Tabs选项卡切换插件
ICode联盟
02-21 472
下载地址 Bootstrap简单Tabs选项卡切换插件是一款在原生Bootstrap Tabs选项卡的基础上，通过css3来对它进行了一些美化效果。 dd:
Bootstrap-导航条-栅格系统-Carousel(轮播效果)-标签页
好玩的事情要记录下来~
01-21 3642
Bootstrap对于不会设计的童鞋很有用。 Twitter设计师的前台框架 中文官网:http://v3.bootcss.com/ 导入包等信息: <%--源语句 --%> /js/html5shiv.min.js"> /js/respond.min.
初次 使用RuoYi 若依框架总结（前端）
热门推荐
贝小木
12-03 6万+
本人是做java开发的小白，偶然间看到了一篇关于若依框架的文章，顿时吸引过来，经过自己的摸索，从无知到认知，到现在能简单的使用，在此把自己用到的前端页面用到的东西做了一个小小总结，给大家做个分享（本人小白，有错误地方希望提出，本人能及时改正，相互成长！！叩谢） 1. th:if <span th:if="${cusSecond.marriage} eq 1">已婚</span&g...
bootstrap 模态框生成标签页
内沐的博客
06-05 2515
1，先补充bootstrap标签页的设置方式 参考文章：点击打开链接 模态框增加 <div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="passwordModalLabel" aria-hidden="true"> 我的设置
Bootstrap Modal组件自定义Alert、Confirm和Modal对话框实现指南
"使用Bootstrap的modal组件自定义alert、confirm和modal对话框" 在本文中，我们将探讨如何使用Bootstrap的modal组件来自定义alert、confirm和modal对话框。通过本文，我们将学习如何使用Bootstrap的modal组件来创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值