javafx怎么给tabpane添加样式

试试 public final void setGraphic(Node value)

方法

Tab tab = ...

tab.setGraphic(new ImageView(...))

or

Tab tab = TabBuilder.create().graphic(new ImageView(...)).build()

在工具箱输入【navigationPane】，然后拖拽到界面

②navigationPane面板的简要说明

③修改标签名称和设置显示标签图标

点击【Pages】打开面板进行如下 *** 作：

2.1.2、代码添加标签和窗体内容

①新建一个需添加到标签的窗体，如下所示：

②编写代码添加标签和标签对应的窗体

//初始化

private void InitNavigationPane()

{

//指定默认选中第一个标签

navigationPane1.SelectedPage = navigationPage1

//添加一个新标签

NavigationPage NewNavigationPage = new NavigationPage()

NewNavigationPage.Name = "newNavigationPage"

NewNavigationPage.Caption = "添加的标签"

navigationPane1.Pages.Add(NewNavigationPage)

//给该新标签添加界面

NewTagForm newTagForm = new NewTagForm()

//一定要设置（否则会报错：无法将顶级控件添加控件）

newTagForm.TopLevel = false

NewNavigationPage.Controls.Add(newTagForm)

newTagForm.Show()

}

登录后复制

③实现效果

2.2、NavBarControl实现步骤

2.2.1、界面布局

①在工具箱输入navBarControl，然后拖拽到界面

②NavBarControl面板的简要说明

③添加导航栏的标签组、及其组包含的标签

点击设计器【Run Designer】进行如下 *** 作：

2.2.2、代码添加标签组、标签组包含的标签和标签事件

①代码实现给标签添加事件（且点击的标签名称是【01】时创建一个新的组、及其给新组添加一个标签）

//初始化

private void InitNavBarControl()

{

navBarItem1.LinkClicked += Item_Click

navBarItem2.LinkClicked += Item_Click

navBarItem3.LinkClicked += Item_Click

navBarItem4.LinkClicked += Item_Click

navBarItem5.LinkClicked += Item_Click

navBarItem6.LinkClicked += Item_Click

navBarItem7.LinkClicked += Item_Click

navBarItem8.LinkClicked += Item_Click

navBarItem9.LinkClicked += Item_Click

navBarItem10.LinkClicked += Item_Click

}

/// <summary>

/// 导航栏子项目的点击事件

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private void Item_Click(object sender, DevExpress.XtraNavBar.NavBarLinkEventArgs e)

{

MessageBox.Show("当前点击的标签是："+e.Link.Caption)

if (e.Link.Caption=="01")

{

ActiveChangeNavigate()

}

}

//动态更改导航栏

private void ActiveChangeNavigate()

{

//新建一个组

NavBarGroup navBarGroup = new NavBarGroup()

navBarGroup.Name = "NewBarGruop"

navBarGroup.Caption = "动态添加的分组"

navBarGroup.ImageOptions.SmallImageIndex = -1

navBarGroup.ImageOptions.LargeImageIndex = -1

//将该组添加到导航中

navBarControl1.Groups.Add(navBarGroup)

//新建一个标签

NavBarItem navBarItem = new NavBarItem()

navBarItem.Name = "NewBarItem"

navBarItem.Caption = "动态添加的标签"

navBarItem.ImageOptions.SmallImageIndex = -1

navBarItem.ImageOptions.LargeImageIndex = -1

navBarItem.LinkClicked += Item_Click

//添加标签到组中

navBarControl1.Items.Add(navBarItem)

//添加标签到一个分组中

navBarGroup.ItemLinks.AddRange(new NavBarItemLink[] {

new NavBarItemLink(navBarItem)

})

}

登录后复制

②实现效果

三、参考资料

Navigation Pane | WinForms Controls | DevExpress Documentation

https://docs.devexpress.com/WindowsForms/114555/Controls-and-Libraries/Navigation-Controls/Navigation-Pane

Navigation Pane | WinForms Controls | DevExpress Documentation

https://docs.devexpress.com/WindowsForms/115232/controls-and-libraries/pdf-viewer/navigation/navigation-pane?v=18.1&f=BaseControlPainter Navigation Bar | WinForms Controls | DevExpress Documentation

https://docs.devexpress.com/WindowsForms/4870/controls-and-libraries/navigation-controls/navigation-bar

NavBarControl.LinkClicked Event | WinForms Controls | DevExpress Documentation

https://docs.devexpress.com/WindowsForms/DevExpress.XtraNavBar.NavBarControl.LinkClicked

导航栏

NavigationPane

NavBarControl

京东家电年货节来袭，以旧换新,立减10%

京东

广告

DevExpress ExpressPageControl v2.37 for Delphi/BCB (含完整源代码)

15下载·1评论

2008年7月24日

DevExpress中实现动态创建菜单栏和导航栏

1492阅读·0评论·0点赞

2021年6月23日

[DevExpress使用随笔]之NavBarControl控件（一）

6820阅读·0评论·0点赞

2017年11月23日

js基础1图片切换01

85阅读·2评论·0点赞

2020年9月23日

UI控件DevExpress WinForms v21.2 - HTML &CSS模板、支持Windows 11

470阅读·0评论·0点赞

2021年11月11日

Dev控件使用之导航控件NavBarControl

435阅读·0评论·3点赞

2022年9月2日

京东家电年货节来袭，以旧换新，立减10%，超值！

京东

广告

DevExpress 新专案导航画面实现窗体导航

351阅读·0评论·0点赞

2021年7月9日

DevExpress中实现代码动态添加导航栏Tabpage到XtraTabControl

855阅读·1评论·0点赞

2021年6月22日

DevExpress.XtraNavBar:制作软件导航栏

5570阅读·0评论·0点赞

2012年11月6日

配置Windows(Win7)导航面板(Navigation Pane)隐藏/显示收藏夹、库、网络等

1.3W阅读·0评论·1点赞

2014年12月27日

Toolbar popupmenu 样式设置

4016阅读·1评论·1点赞

2017年1月24日

WinForm应用界面开发入门指南 - Office启发式用户界面

269阅读·0评论·0点赞

2021年5月13日

devexpress皮肤设置

174阅读·0评论·0点赞

2015年10月17日

DevExpress(一):主界面设计

7586阅读·0评论·4点赞

2019年2月24日

NavBarControl控件 2015-07-23 16:56 2人阅读 评论(0) 收藏...

4阅读·0评论·0点赞

2015年7月23日

DevExpress中导航栏添加及导航栏事件添加

4162阅读·3评论·0点赞

2018年3月9日

Winform DevExpress控件库（三） 使用NavBarControl控件定制导航栏

5.1W阅读·2评论·4点赞

2017年1月10日

ExpressNavigationPack导航和布局管理控件

244阅读·0评论·0点赞

2022年2月16日

界面控件DevExpress WinForms MVVM入门指南——主视图导航

542阅读·0评论·0点赞

2022年3月24日

干货！DevExpress Winform界面效果实现总结（Part 3）

1172阅读·0评论·0点赞

先给出示例html代码

<div>

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist" id="contentnavid">

<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">tab1</a></li>

<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">tab2</a></li>

<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">tab3</a></li>

<li role="presentation" id="closetabli"><a href="#closetab" aria-controls="closetab" role="tab" data-toggle="tab"><span>closetab</span>

<button type="button" class="close" aria-label="Close" id="closetabbtn"><span aria-hidden="true" style="color:red">×</span></button>

</a></li>

</ul>

<!-- Tab panes -->

<div class="tab-content">

<div role="tabpanel" class="tab-pane active" id="tab1">this is tab1</div>

<div role="tabpanel" class="tab-pane active" id="tab2">this is tab2</div>

<div role="tabpanel" class="tab-pane active" id="tab3">this is tab3</div>

<div role="tabpanel" class="tab-pane active" id="closetab">this is closetab</div>

</div>

</div>

上面的html代码中，显示的导航组件有4个tab页，其中最后一个tab页的标签的右边有一个 x 的关闭按钮。

下面我们要实现就是当点击x关闭按钮时，可以把这个带关闭按钮的tab隐藏掉，并显示最近一次显示的tab页。

具体示例代码如下：

<script>

var activeTab = "tab1"//当前的tab页。默认为第一个tab页。

var previousTab //上一个打开的tab页。默认为空。

$(function(){

//实现事件响应函数，当tab页被显示时会触发

$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) {

//获取当前被显示的tab页标签的aria-controls属性值

activeTab = $(e.target).attr("aria-controls")

//获取前一个被显示的tab页标签的aria-controls属性值

previousTab = $(e.relatedTarget).attr("aria-controls")

})

//点击带关闭按钮tab页标签上的x后的响应事件

$("#closetabbtn").click(function(e){

$(this).parent().parent().css("display","none")//隐藏tab头，调用remove方法就是删除了

$("#closetab").css("display","none")//隐藏tab正文信息，调用remove方法就是删除了

if(activeTab=="closetab"){ //判断当前tab页是否是带关闭按钮的tab页，如果是，则显示上次打开的tab页

$(‘#contentnavid a[href="#‘+previousTab+‘"]‘).tab(‘show‘)//显示tab页

}

return false//一定要return false，阻止事件往上冒泡

})

})

</script>

上面给出了js代码。

本文给出了最核心的处理逻辑，其中关键的地方有：

1）增加关闭按钮，并处理click事件

2）处理tab的show事件

在此基础上，可以实现各种场景下的应用。

---