Layui（三）：导航菜单、选项卡、进度条和面板
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Layui（三）：导航菜单、选项卡、进度条和面板相关的知识，希望对你有一定的参考价值。
参考技术A （ 用什么标签不重要，只要样式用对了，都能出效果，用ul里面嵌套li与div嵌套div是一样的，注意里面子项里面要加一个<a></a>不然点击没效果 ）
（ 如果不加载element模块，也没有效果 ）
（在页面中有很多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为element组件）
相关样式：
1、方向
（1）水平：默认的
（2）垂直：layui-nav-tree
2、其他样式
（1） layui-nav ：代表这是一个导航菜单
（2） layui-nav-item ：放在（1）的子标签中，代表这个导航菜单的一个子项
（3） lay-this ：和（2）同级，代表当前选中的菜单项
（4） layui-nav-child ：子项的子项
（5） layui-nav-img ：会以导航合适的大小处理图片
导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。
1、风格说明
默认风格：只需要加layui-tab
简洁风格：再追加上layui-tab-brief
卡片风格：再追加上layui-tab-card
2、相关样式
layui-tab：代表这是一个选项卡
（1）layui-tab-title：选项卡的头
【1】layui-tab-this：选中该选项卡
（2）layui-tab-content：选项卡的内容
【1】layui-tab-item：一个选项卡头对应的具体内容
【2】layui-tab-show：表示初始显示，一般哪个头上加了layui-tab-this，它对应的content就加上layui-tab-show
3、相关属性
lay-allowclose="true"：是否开启关闭按钮
lay-filter="demo"：用来在方法中唯一确定一个layui组件
lay-id="1"：用来配合lay-filter属性唯一确定一个子组件
4、相关方法
element.tabAdd(filter, options)：用于新增一个Tab选项
option示例：
title: \'选项卡的标题\'
,content: \'选项卡的内容\' //支持传入html
,id: \'选项卡标题的lay-id属性值\'
element.tabDelete(filter, layid)：用于删除指定的Tab选项
element.tabChange(filter, layid)：用于外部切换到指定的Tab项上
进度条进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。
相关样式：
layui-progress：表示这是一个进度条
layui-progress-bar：表示进度条中的进度，依靠其lay-percent属性的值来控制进度大小，值取值范围0-100%
layui-bg-red/green/...：表示进度条的颜色
layui-progress-big：表示大尺寸进度条
相关属性：
lay-percent="80%"：代表具体的进度
lay-showpercent="true"：是否显示百分比数字
进度条的宽度是 100% 适配于它的父级元素
一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等（同样依赖element）
1、卡片面板
相关样式：
layui-row：代表一行
layui-col-space15：space0-space30，代表卡片之间的间距
layui-colmd5：md1-12，代表当前卡片占整行的列数
layui-card：代表一个卡片
layui-card-header：代表卡片头信息
layui-card-body：代表卡片内容样式
2、普通折叠面板
相关样式：
layui-collapse：代表一个折叠面板
layui-colla-item：代表一个折叠项
layui-colla-title：代表一个折叠项的标题
layui-colla-content：代表一个折叠项展开s的内容
layui-show：是否展开
相关事件：
3、手风琴面板
在普通折叠面板的基础上加上lay-accordion=""
JAVA Swing - 另一个卡片面板上的卡片面板上的选项卡式面板 setSelectedIndex()
【中文标题】JAVA Swing - 另一个卡片面板上的卡片面板上的选项卡式面板 setSelectedIndex()【英文标题】：JAVA Swing - tabbed panel setSelectedIndex() on a card panel from another card panel 【发布时间】：2013-11-13 19:01:54 【问题描述】：我有一个如下所示的 GUI。默认情况下，卡片布局card 1 面板中的选项卡式窗格显示第一个选项卡。当我导航到card 2 时，我想知道如何使那里的按钮导航到card 1 选项卡3。我知道如何使用getParent() 从该按钮到达card 1，但我不知道不知道如何从那里显示我想要的特定选项卡。 （注：card 1和card 2是两个不同的JPanel类，父类是一个JFrame类）
图片：左侧为卡片 1，带有标签面板，右侧为卡片 2
以下是我的代码：
主 JFrame：
import java.awt.CardLayout;
public class NewJFrame extends javax.swing.JFrame
public NewJFrame()
initComponents();
/**
* This method is called from within the constructor to initialize the form.
* WARNING: Do NOT modify this code. The content of this method is always
* regenerated by the Form Editor.
*/
@SuppressWarnings("unchecked")
// <editor-fold defaultstate="collapsed" desc="Generated Code">
private void initComponents()
jbtCard1 = new javax.swing.JButton();
jbtCard2 = new javax.swing.JButton();
cardPane = new javax.swing.JPanel();
jPanelCard11 = new CardLayoutTest.JPanelCard1();
jPanelCard21 = new CardLayoutTest.JPanelCard2();
setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
jbtCard1.setText("Card 1");
jbtCard1.addActionListener(new java.awt.event.ActionListener()
public void actionPerformed(java.awt.event.ActionEvent evt)
jbtCard1ActionPerformed(evt);
);
jbtCard2.setText("Card 2");
jbtCard2.addActionListener(new java.awt.event.ActionListener()
public void actionPerformed(java.awt.event.ActionEvent evt)
jbtCard2ActionPerformed(evt);
);
cardPane.setName(""); // NOI18N
cardPane.setLayout(new java.awt.CardLayout());
cardPane.add(jPanelCard11, "card1");
cardPane.add(jPanelCard21, "card2");
javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
getContentPane().setLayout(layout);
layout.setHorizontalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGroup()
.addGap(87, 87, 87)
.addComponent(jbtCard1)
.addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
.addComponent(jbtCard2)
.addGap(80, 80, 80))
.addComponent(cardPane, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)
);
layout.setVerticalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGroup()
.addComponent(cardPane, javax.swing.GroupLayout.DEFAULT_SIZE, 260, Short.MAX_VALUE)
.addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
.addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
.addComponent(jbtCard2)
.addComponent(jbtCard1))
.addContainerGap())
);
pack();
// </editor-fold>
private void jbtCard1ActionPerformed(java.awt.event.ActionEvent evt)
CardLayout card = (CardLayout) cardPane.getLayout();
card.show(cardPane, "card1");
private void jbtCard2ActionPerformed(java.awt.event.ActionEvent evt)
CardLayout card = (CardLayout) cardPane.getLayout();
card.show(cardPane, "card2");
public static void main(String args[])
/* Set the Nimbus look and feel */
//<editor-fold defaultstate="collapsed" desc=" Look and feel setting code (optional) ">
/* If Nimbus (introduced in Java SE 6) is not available, stay with the default look and feel.
* For details see http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html
*/
try
for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels())
if ("Nimbus".equals(info.getName()))
javax.swing.UIManager.setLookAndFeel(info.getClassName());
break;
catch (ClassNotFoundException ex)
java.util.logging.Logger.getLogger(NewJFrame.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
catch (InstantiationException ex)
java.util.logging.Logger.getLogger(NewJFrame.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
catch (IllegalAccessException ex)
java.util.logging.Logger.getLogger(NewJFrame.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
catch (javax.swing.UnsupportedLookAndFeelException ex)
java.util.logging.Logger.getLogger(NewJFrame.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
//</editor-fold>
/* Create and display the form */
java.awt.EventQueue.invokeLater(new Runnable()
public void run()
new NewJFrame().setVisible(true);
);
// Variables declaration - do not modify
private javax.swing.JPanel cardPane;
private CardLayoutTest.JPanelCard1 jPanelCard11;
private CardLayoutTest.JPanelCard2 jPanelCard21;
private javax.swing.JButton jbtCard1;
private javax.swing.JButton jbtCard2;
// End of variables declaration
卡片 1 面板：
public class JPanelCard1 extends javax.swing.JPanel
public JPanelCard1()
initComponents();
// <editor-fold defaultstate="collapsed" desc="Generated Code">
private void initComponents()
jTabbedPane1 = new javax.swing.JTabbedPane();
jPanel1 = new javax.swing.JPanel();
jLabel2 = new javax.swing.JLabel();
jPanel2 = new javax.swing.JPanel();
jLabel1 = new javax.swing.JLabel();
jPanel3 = new javax.swing.JPanel();
jLabel3 = new javax.swing.JLabel();
jLabel2.setText("card 1 tab 1 ");
javax.swing.GroupLayout jPanel1Layout = new javax.swing.GroupLayout(jPanel1);
jPanel1.setLayout(jPanel1Layout);
jPanel1Layout.setHorizontalGroup(
jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(jPanel1Layout.createSequentialGroup()
.addGap(101, 101, 101)
.addComponent(jLabel2)
.addContainerGap(233, Short.MAX_VALUE))
);
jPanel1Layout.setVerticalGroup(
jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(jPanel1Layout.createSequentialGroup()
.addGap(62, 62, 62)
.addComponent(jLabel2)
.addContainerGap(138, Short.MAX_VALUE))
);
jTabbedPane1.addTab("tab1", jPanel1);
jLabel1.setText("card 1 tab 2");
javax.swing.GroupLayout jPanel2Layout = new javax.swing.GroupLayout(jPanel2);
jPanel2.setLayout(jPanel2Layout);
jPanel2Layout.setHorizontalGroup(
jPanel2Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(jPanel2Layout.createSequentialGroup()
.addGap(73, 73, 73)
.addComponent(jLabel1)
.addContainerGap(264, Short.MAX_VALUE))
);
jPanel2Layout.setVerticalGroup(
jPanel2Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(jPanel2Layout.createSequentialGroup()
.addGap(92, 92, 92)
.addComponent(jLabel1)
.addContainerGap(108, Short.MAX_VALUE))
);
jTabbedPane1.addTab("tab2", jPanel2);
jLabel3.setText("card 1 tab 3");
javax.swing.GroupLayout jPanel3Layout = new javax.swing.GroupLayout(jPanel3);
jPanel3.setLayout(jPanel3Layout);
jPanel3Layout.setHorizontalGroup(
jPanel3Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(jPanel3Layout.createSequentialGroup()
.addGap(140, 140, 140)
.addComponent(jLabel3)
.addContainerGap(197, Short.MAX_VALUE))
);
jPanel3Layout.setVerticalGroup(
jPanel3Layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(jPanel3Layout.createSequentialGroup()
.addGap(71, 71, 71)
.addComponent(jLabel3)
.addContainerGap(129, Short.MAX_VALUE))
);
jTabbedPane1.addTab("tab3", jPanel3);
javax.swing.GroupLayout layout = new javax.swing.GroupLayout(this);
this.setLayout(layout);
layout.setHorizontalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addComponent(jTabbedPane1)
);
layout.setVerticalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(layout.createSequentialGroup()
.addComponent(jTabbedPane1, javax.swing.GroupLayout.PREFERRED_SIZE, 242, javax.swing.GroupLayout.PREFERRED_SIZE)
.addGap(0, 58, Short.MAX_VALUE))
);
// </editor-fold>
// Variables declaration - do not modify
private javax.swing.JLabel jLabel1;
private javax.swing.JLabel jLabel2;
private javax.swing.JLabel jLabel3;
private javax.swing.JPanel jPanel1;
private javax.swing.JPanel jPanel2;
private javax.swing.JPanel jPanel3;
private javax.swing.JTabbedPane jTabbedPane1;
// End of variables declaration
卡片 2 面板：
import java.awt.CardLayout;
import javax.swing.JPanel;
public class JPanelCard2 extends javax.swing.JPanel
public JPanelCard2()
initComponents();
/**
* This method is called from within the constructor to initialize the form.
* WARNING: Do NOT modify this code. The content of this method is always
* regenerated by the Form Editor.
*/
@SuppressWarnings("unchecked")
// <editor-fold defaultstate="collapsed" desc="Generated Code">
private void initComponents()
jButton1 = new javax.swing.JButton();
jLabel1 = new javax.swing.JLabel();
jButton1.setText("go to Card 1 tab 3");
jButton1.addActionListener(new java.awt.event.ActionListener()
public void actionPerformed(java.awt.event.ActionEvent evt)
jButton1ActionPerformed(evt);
);
jLabel1.setText("Card 2");
javax.swing.GroupLayout layout = new javax.swing.GroupLayout(this);
this.setLayout(layout);
layout.setHorizontalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(layout.createSequentialGroup()
.addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(layout.createSequentialGroup()
.addGap(261, 261, 261)
.addComponent(jButton1))
.addGroup(layout.createSequentialGroup()
.addGap(52, 52, 52)
.addComponent(jLabel1)))
.addContainerGap(18, Short.MAX_VALUE))
);
layout.setVerticalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(layout.createSequentialGroup()
.addGap(48, 48, 48)
.addComponent(jLabel1)
.addGap(75, 75, 75)
.addComponent(jButton1)
.addContainerGap(140, Short.MAX_VALUE))
);
// </editor-fold>
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt)
//show card 1 from here
CardLayout card = (CardLayout) this.getParent().getLayout();
card.show((JPanel) this.getParent(), "card1");
//card1 shown, but how to show specific tab in the tab pane from here?
// Variables declaration - do not modify
private javax.swing.JButton jButton1;
private javax.swing.JLabel jLabel1;
// End of variables declaration
【问题讨论】：
【参考方案1】：我想你正在寻找JTabbedPane.html.setSelectedIndex(int)。
以下不是最优雅的解决方案，但它应该可以在不需要大量重构的情况下工作。
在NewJFrame中添加一个方法：
public CardLayoutTest.JPanelCard1 getJPanelCard11()
return jPanelCard11;
在 JPanelCard1 中添加一个方法：
public void setTab(int index)
jTabbedPane1.setSelectedIndex(index);
在 JPanelCard2 中调用这些：
private void jButton1ActionPerformed(java.awt.event.ActionEvent evt)
//show card 1 from here
CardLayout card = (CardLayout) this.getParent().getLayout();
card.show((JPanel) this.getParent(), "card1");
//card1 shown, show specific tab in the tab pane from here:
NewJFrame parent = (NewJFrame) this.getParent();
((JPanelCard1) parent.getJPanelCard11()).setTab(1);
【讨论】：
它有效。但为什么它不是优雅的方式？是不是因为这种方式是紧耦合的？ 好问题；这么晚才回复很抱歉。诚然，这里有一些相当紧密的耦合。您可能希望更明确地对操作/命令建模，甚至可能在选项卡、卡片和应用程序级别范围内。如果你有很多卡片、标签等，你也可以抽象出一些结构和解决方案。这些考虑超出了这个问题的范围。以上是关于Layui（三）：导航菜单、选项卡、进度条和面板的主要内容，如果未能解决你的问题，请参考以下文章
引导、导航选项卡、下拉菜单；如何根据 URI 设置活动选项卡
使用 Sprite 的 CSS 导航菜单：如何突出显示当前页面的选项卡/按钮？
如何在 ExtJs 中单击 TabPanel 中的 Tab 菜单时初始化各个选项卡数据？
如何使用底部导航菜单处理屏幕旋转，其中每个菜单都引用一个带有有限选项卡的新查看器（3-4）？我正在使用 ViewModel