当前位置：Gxlcms > asp.net > asp.net Coolite TablePanel使用

asp.net Coolite TablePanel使用

时间：2021-07-01 10:21:17 帮助过：14人阅读

其中用得最多的就是他的Tabs属性，用于定义子标签选项，可参考下图所示：

其中content.html的代码如下代码片段，下图为运行效果截图：
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
body{font-size:12px;}
</style>
</head>
<body>
TabPanel控件学习
</body>
</html>

TabPanel最灵活的是动态的创建子标签选项，想了解这个创建过程的实现原理请查阅我之前写的两篇文章(本文前面有文章连接),需要注意的是不能通过同步的事件驱动去创建，一但页面PostBack新创建的所有标签选项将被全部清除。如果一定要通过服务端后台代码去动态创建，可使用Coolite Toolkit所提供的AjaxEvent机制。
代码如下:

<font face="Verdana"><br>protected void CreataTab_Click(object sender, AjaxEventArgs e) <br>{ <br>var tab = new Tab("通过AjaxEvent新增Tab"); <br>tab.TabIndex = short.Parse("11"); <br>tab.ID = "tabID"; <br>tab.AutoLoad.Url = "//www.gxlcms.com"; <br>tab.AutoLoad.NoCache = true; <br>tab.AutoLoad.Mode = LoadMode.IFrame; <br>this.tabPanel.Tabs.Add(tab); <br>this.tabPanel.ActiveTab = tab; <br>} <br><ext:Button ID="btnCreateTab" runat="server" Text="动态添加子标签选项"> <br><AjaxEvents> <br><Click OnEvent="CreataTab_Click"> <br><EventMask ShowMask="true" Msg="正在加载"/> <br></Click> <br></AjaxEvents> <br></ext:Button> <br> <br>个人觉得通过同步方式创建页面总是会晃动一下，闪着让人很不爽。推荐通过客户端动态添加子标签选项的方式创建，TabPanel提供了相应的客户端API来完成这些操作。 <br><span><u></u></span> 代码如下:</font><pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><font face="Verdana"><br><ext:Button ID="btnClient" runat="server" Text="添加Tab(Client)"> <br><Listeners> <br><Click Handler="addTab(#{tabPanel}, 'tabCnblogs', '//www.gxlcms.com');" /> <br></Listeners> <br></ext:Button> <br> <br>通过JavaScript方法addTab()方法动态创建，三个参数分别为：TabPanel控件ID，新创建的Tab的ID,西创建的Tab所呈现的内容路径。 <br><span><u></u></span> 代码如下:</font><pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><font face="Verdana"><br><script type="text/javascript"> <br>function addTab(tabPanel, id, url) { <br>var tab = tabPanel.getComponent(id); <br>if (!tab) { <br>tab = tabPanel.add({ <br>id: id, <br>title: url, <br>closable: true, <br>autoLoad: { <br>showMask: true, <br>url: url, <br>mode:'iframe', <br>maskMsg: '正在加载 ' <br>} <br>}); <br>} <br>tabPanel.setActiveTab(tab); <br>} <br></script> <br> <br>客户端创建的方式是纯Ext的操作方式，TabPanel提供了API可直接获取指定id的子Tab是否存在，使用这一功能就可以完美的处理互斥，以创建出唯一的Tab子标签选项。<br><img height="311" alt="" src="https://img.gxlcms.com//Uploads-s/new/2019-09-19-201919/20100311172337358.jpg" width="446" border="0"><br>TabPanel使用得多的就是用来处理多标签选项卡，另外多数时候是用作容器，其容器功能和Panel、Window等基本相同。就拿上一篇文章中创建的树做示例吧，现在需要将树显示在TabPanel的一个子标签选项里，可以直接调用TabPanel的客户端API方法addTab将一个存在的容器类型控件添加到TabPanel，使其成为TabPanel的子Tab。<br><img height="307" alt="" src="https://img.gxlcms.com//Uploads-s/new/2019-09-19-201919/20100311172337657.jpg" width="449" border="0"></font></li><li>            </li><li>                                </li></ol></pre></li></ol></pre>

asp.net Coolite TablePanel使用

人气教程排行