如何用layui实现弹出框Tab选项卡功能？

本文共计381个文字，预计阅读时间需要2分钟。

最近完成的一个项目，使用LAYUI框架，在界面中弹出一个页面A，A页面上有TAB选项卡，分为B、C两个部分；B页面有一个表格，双击表格行时，要将数据回写至页面Z；A页面上有提交按钮，选择B页面后，弹出提交成功提示。

最近做一个项目，使用LAYUI，在界面上Z弹出一个界面A，A上有TAB选项卡，分别为界面B、C；B界面上有一个列表，双击败列表行时，要把数据回写到界面Z; 界面A上有提交按钮，选中B界面上列表某一条数据，界面A上点提交时，同样回写数据到Z；

实现：双击：B上实现双击方法，调用A上界面方法，再调用Z界面上方法；

B界面上方法：

function dbclick_select(row,index){ debugger; if(row == null){ var nodes=$("#TableSelectList").bootstrapTable('getSelections'); row = nodes[0]; if(row == undefined){ row = null; } } if(row != null && row != ""){ window.parent.onBackDwxx(row); }else{ layer.alert("请选择一项数据"); } }

A界面上方法：

function onBackDwxx(row) { debugger; window.parent.onBackDwxx(row); var iframeName = window.name; var index = parent.layer.getFrameIndex(iframeName); window.parent.layer.close(index); }

Z界面上方法：

function onBackDwxx(row) { $("#query\\.dw_id").val(row.id); $("#dw_mc").val(row.zsdwmc); }

A界面上提交按钮实现：Z界面上提交方法调用A界面上方法，A界面上方法回调Z界面方法

Z界面方法调用A界面方法：$(layero).find("iframe")[0].contentWindow.onSelectTableDwxx();

A界面方法：

function onBackDwxx(row) { debugger; window.parent.onBackDwxx(row); var iframeName = window.name; var index = parent.layer.getFrameIndex(iframeName); window.parent.layer.close(index); } function onSelectTableDwxx(){ var winx = $("#iframe1").find("iframe")[0].contentWindow; var nodes = winx.$("#TableSelectList").bootstrapTable('getSelections'); onBackDwxx(nodes[0]); }

Z界面上方法：

function onBackDwxx(row) { $("#query\\.dw_id").val(row.id); $("#dw_mc").val(row.zsdwmc); }

以上这篇layui弹出框Tab选项卡的示例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。