TabContainer

最新推荐文章于 2021-02-22 03:48:14 发布
最新推荐文章于 2021-02-22 03:48:14 发布
阅读量387 收藏 1
点赞数
分类专栏： Ajax ControlToolkit 文章标签： server asp html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stromboy007/article/details/3899198
版权

 <html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>TabContainer</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <cc1:TabContainer ID="TabContainer1" runat="server">
        <cc1:TabPanel runat="server" ID="TabPanel1" HeaderText="标签一">
        <ContentTemplate>
        这是第一大段的内容。。。。。。<br />
         这是第一大段的内容。。。。。。<br />
          这是第一大段的内容。。。。。。<br />
           这是第一大段的内容。。。。。。<br />
        </ContentTemplate>
        </cc1:TabPanel>
        <cc1:TabPanel runat="server" ID="TabPanel2" HeaderText="标签二">
        <HeaderTemplate><span style=" font-size:12px; color:Red; font-weight:bold;">标签二</span></HeaderTemplate>
        <ContentTemplate><div style="text-align:center">
              这是第二大段的内容。。。。。。<br />
         这是第二大段的内容。。。。。。<br />
          这是第二大段的内容。。。。。。<br />
           这是第二大段的内容。。。。。。<br /></div>
           </ContentTemplate>
        </cc1:TabPanel>
        <cc1:TabPanel runat="server" ID="TabPanel3" HeaderText="标签三">
        <ContentTemplate><div style="text-align:right">
              这是第三大段的内容。。。。。。<br />
         这是第三大段的内容。。。。。。<br />
          这是第三大段的内容。。。。。。<br />
           这是第三大段的内容。。。。。。<br /></div>
           </ContentTemplate>
        </cc1:TabPanel>
        </cc1:TabContainer>
    </div>
    </form>
</body>
</html>

stromboy007
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TabContainer样式
03-27
AjaxControlTookit中应用TabContainer,选项卡的样式有的时候需要修改,其实很简单,看如下代码
js写的tabcontainer选项卡
12-16
Dojo Toolkit是一个强大的JavaScript库，提供了丰富的UI组件，其中包括TabContainer，它的功能强大且自适应各种设备。 在JavaScript中实现选项卡功能，通常会涉及到以下几个核心知识点： 1. DOM操作：JavaScript...
dojo tabcontainer
Rage your dream
12-02 104
TabContainer giving one of the ContentPanes the argument selected: true (if programmatically created) or the attribute selected=”true” (if declaratively created). var cp3 = new ContentPane({ title: “T...
tabcontainer控件太长_AjaxControlToolKit--TabContainer控件的介绍
weixin_39623244的博客
12-22 122
1.Introduction:Tab本身就应该是个以页签形式显示组织网页内容的一个控件。在AJAX Control Tool Kit的控件中有TabContainer控件,它是一些TabPanel控件的载体,而每个TabPanel可以像标准的Panel控件一样,成为其它一些ASP.NET控件的容器。TabPanel通过它的三部分结构HeaderText, HeaderTemplate...
tabcontainer控件太长_asp.net AjaxControlToolKit--TabContainer控件的介绍
weixin_39681161的博客
12-22 171
ModalTopup控件允许用户以对话框模式显示ASP页面的一部分，同时限制用户与页面其他部分的交互。让成都搜索引擎优化技术频道的编辑带你通过ASP.NET的AJAXCONTROLTOLKIT-TABCANTAL控件的介绍。ajaxcontroltoolkit-tab container控件介绍集合< br>1。简介:选项卡本身应该是一个以选项卡形式显示组织网页内容的控件在AJAX控件...
tabcontainer控件太长_TabContainer动态添加后样式问题
weixin_42476987的博客
12-31 132
我的TabContainer是动态添加的。在我电脑IE7下样式正常显示，但至客户那里IE6上样式就变行了！不知道为何！代码如下：看一下效果图：(别看里面的图片哦。我指的是TAB那几个选项的样式)IE7下效果：IE6下效果：前台CodeText="未添加产品，请管理员至后台添加">后台：CodeprotectedvoidPage_Load(objectsender, EventArgs e){...
tabcontainer控件太长_AjaxControlToolKit--TabContainer控件的介绍收藏[摘录]
weixin_39746282的博客
12-22 128
AjaxControlToolKit--TabContainer控件的介绍收藏1. Introduction:Tab本身就应该是个以页签形式显示组织网页内容的一个控件。在AJAX Control Tool Kit的控件中有TabContainer控件,它是一些TabPanel控件的载体,而每个TabPanel可以像标准的Panel控件一样,成为其它一些ASP.NET控件的容器。TabPanel通过...
4_TabContainer
weixin_33691817的博客
03-03 93
2019独角兽企业重金招聘Python工程师标准>>> ...
tabcontainer控件太长_Ajax 控件tabcontainer样式设置
weixin_39666782的博客
12-22 71
AJAXTabContainer样式设置属性页(TabContainer)TabContainer可以实现多选项卡的属性页界面。它里面包含TabPanel元素，每一对TabPanel元素代表一个选项卡。语法：TabContainerID="t1"runat="server"CssClass="tabstrip">TabPanelrunat=server>－－属性页<Head...
tabcontainer控件太长,在我的网页中使用像tabcontainer这样的ajax控件时遇到了问题...
weixin_29310605的博客
02-22 68
Hai Everyone..I got a problem in developing my web application....my problem is,in my project i have two web pages...the page one contains the buttons display, create and the page two contains tab con...
dijit_Dijit的TabContainer布局：简易选项卡式内容
culuo8053的博客
07-30 275
dijitOne of Dojo's major advantages over other JavaScript toolkits is its Dijit library. Dijit is a UI framework comprised of JavaScript widget classes, CSS files, and HTML templates. One very usefu...
TabContainer用法
徐悦 Tech Blog
07-18 9045
在使用TabContainer之前，注意一定要加上ScriptManager，否则会报错，因为是该控件是基于AJAX技术实现的。完整代码如下<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoE
第十个范例——布局之TabContainer
03-06
【标题】"第十个范例——布局之TabContainer"揭示了一个关于前端开发中的布局技术，特别是使用TabContainer组件的知识点。TabContainer是许多前端框架或库中常见的一个元素，它用于展示分页或标签式的内容，允许用户...
asp.net AjaxControlToolKit–TabContainer控件的介绍
01-21
AjaxControlToolKit–TabContainer控件的介绍收藏 1. Introduction: Tab本身就应该是个以页签形式显示组织网页内容的一个控件。在AJAX Control Tool Kit的控件中有TabContainer控件,它是一些TabPanel控件的载体,而每...
ModalPopupExtender
stromboy007的专栏
02-17 1259
 http://www.w3.org/1999/xhtml" >    ModalPopupExtender        .modalBackground    {     background-color:Gray;     filter:alpha(opacity=70);     opacity:0.7;     }     .modalPopuo     {              b
CascadingDropDown
stromboy007的专栏
02-18 1154
 EnableEventValidation="false" %>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >    无标题页                                                               
Accordion与AccordionPane的用法
stromboy007的专栏
02-17 1139
http://www.w3.org/1999/xhtml" >    Accordion与AccordionPane的用法        .Header    {    font-size:12px;    color:#ffffff;    background:#666666;    font-weight:bold;    }    .Content    {     font-size:1
NumericUpDownExtender
stromboy007的专栏
02-17 1061
http://www.w3.org/1999/xhtml" >    NumericUpDownExtender                          Enter a numeric value and use                   the up and down buttons to increment/decrement         
<div class="taskDetail-body home"><div class="taskDetail-body-header"<basicInformation adataSynDescRes="dataSynDescRes" </div><div class="tabContainer"x <a-tabs v-model="activekey" @change="changeActivekey"><a-tab-pane key="taskInformation" tab="基本信息”name="taskInformation"》<taskInformation v-if="activeKey === 'taskInformation'. :tableReadSynCommonDto="tableReadSynComonDto" :tablewriteSynCommonDto="tablewriteSynCommonDto </a-tab-pane><a-tab-pane key="fieldapping” tab="字的映射信息" name="fieldMapping" force-render :id="taskId"<fieldMapping v-if="activeKey'fieldMapping"/> </a-tab-pane><a-tab-pane key="task(onfiguration” tab="任务配需信息 name="taskonfiguration" force-render)<taskConfiguration v-if="activekey=='taskConfiguration". :synConfiguration="synConfiguration"” /> </a-tab-pane><a-tab-pane key="operationHistory" tab="这行历史"name="operationHistory" force-render)"operationHistory"" :id="id" :key="id” /><operationHistory v-if="activekey</a-tab-pane> </a-tabs> </div> div>在这个页面中当页面滚动距离大于taskDetail-body-header时，antd的Tabs组件的选项卡头将固定在顶部，切换标签页时保持选项卡头在顶部的状态，即当选项卡头固定在顶部时，切换标签页后选项卡头仍然固定在顶部，当选项卡头不固定在顶部时，切换标签页后页面回跳到顶部
最新发布
07-15
要实现当页面滚动距离大于taskDetail-body-header时，antd的Tabs组件的选项卡头固定在顶部，并且在切换标签页后保持固定状态，可以使用CSS的`position: sticky`属性和JavaScript来实现。 首先，在你的HTML文件中，给Tabs组件的选项卡头添加一个id，例如： ```html <a-tabs v-model="activekey" @change="changeActivekey" id="tabsContainer"> <!-- 选项卡内容 --> </a-tabs> ``` 然后，在你的CSS文件中添加以下样式： ```css #tabsContainer { position: sticky; top: 0; z-index: 1; } ``` 这将使选项卡头在页面滚动时固定在顶部。 接下来，在你的JavaScript文件中，添加以下代码： ```javascript // 监听标签页切换事件 document.addEventListener('DOMContentLoaded', function() { const tabs = document.querySelectorAll('#tabsContainer a-tab-pane'); tabs.forEach(tab => { tab.addEventListener('click', function() { // 判断选项卡头是否固定在顶部 const tabsContainer = document.getElementById('tabsContainer'); const isSticky = tabsContainer.getBoundingClientRect().top === 0; // 如果固定在顶部，则让页面回跳到顶部 if (isSticky) { window.scrollTo({ top: 0, behavior: 'smooth' }); } }); }); }); ``` 这段代码会在标签页切换时检查选项卡头是否固定在顶部，如果是，则通过`window.scrollTo`方法让页面回跳到顶部。 这样，当页面滚动距离大于taskDetail-body-header时，antd的Tabs组件的选项卡头将固定在顶部，并且在切换标签页后仍然保持固定状态。当选项卡头不固定在顶部时，切换标签页后页面会回跳到顶部。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值