利用bootstrap的modal和tab制作的联动自定义UI
来源：互联网 发布：葫芦侠是什么软件 编辑：程序博客网 时间：2024/06/03 18:51
直接上代码。
效果图：<!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或待改进的地方，希望多多指正，谢谢！
阅读全文
0 0
- 利用bootstrap的modal和tab制作的联动自定义UI
- 利用bootstrap的modal组件自定义alert，confirm和modal对话框
- 如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框
- 关于bootstrap的modal
- angular-ui-bootstrap-modal必须要说的几个点
- bootstrap中自定义modal大小并始终居中的modal综合布局demo
- Bootstrap的Modal源码学习
- Bootstrap模态框modal的高度和宽度设置
- 设置bootstrap modal模态框的宽度和宽度
- 利用Bootstrap制作一个流行的网页
- bootstrap的模态框modal的hidden.bs.modal属性
- jquery-ui实现bootstrap的modal拖拽功能，弹窗头部拖拽
- 改造BOOTSTRAP的TAB
- BootStrap的modal模态框的使用
- Bootstrap的一些笔记——modal
- 基于Bootstrap的Modal二次封装
- Bootstrap的js插件之模态框(modal)
- 在BootStrap的modal中使用Select2
- 《Python数据分析与挖掘实战》实战篇第一章拓展思考——偷漏税用户识别
- 基于optitrack的四旋翼飞行器室内定点悬停simulink程序
- 2017年下半学年PHP学习总结
- C++之单例模式
- 前端工程师面试题汇总
- 利用bootstrap的modal和tab制作的联动自定义UI
- html超链接
- Kotlin-26.集合(Collection)
- java性能调优权威指南读书笔记七(延迟调优)
- （11）分苹果问题：将m个相同的苹果放到n个相同的盘子中，多少钟分法？
- python异常处理与网络链接
- 这是一个关于我的故事
- SDUT 1239 水仙花数
- ThreadLcoal
