Ajax tabContainer标题滚动条不起作用。 [英] Ajax tabContainer Header scrollbar not working.

问题描述

下面是Ajax tabContainer Header滚动条的代码

看起来滚动条的后面板

是可见的，但实际滚动条没有显示
滚动条的
代码在脚本标签中

 <   html     xmlns   =  http://www.w3.org/1999/xhtml  >  
 <   head     runat   =  server >  
 <   title  >  <   / title  >  
 
 < span class =code-keyword><   script     src   =  http://code.jquery.com/jquery-1.9.1 .js >  <   /脚本 >  
 <   script  >  
 $（function（）{
 
 $（。ajax__tab_header）。html（ <   div     style   ='  height：35px;溢出：滚动;溢出-γ：隐藏;宽度：350像素; '   > + $（。ajax__tab_header）。html（）+ <   / div  > ） ; 
 
}）
 <   / script  >  
 
 <   style  >  
 .ajax__tab_body 
 {
 width：323px; 
 position：absolute; 
 top ：45px; 
 
} 
 
 <   / style  >  
 <   / head  >  
 <   body  >  
 <  表格    id   =  form1    runat   =  server >  
 <   div  >  
 <   asp：ToolkitScriptManager     ID   =  ToolkitScriptManager1    runat   = 服务器 >  <   / asp：ToolkitScriptManager  >  
 <   asp：TabContainer     runat   =  server  
   
                   OnClientActiveTabChanged   =  ClientFunction  
   
                  高度  =  500px    ActiveTabIndex   =   7   宽度 < span class =code-keyword> =  323px    ID   =  tab    BorderStyle   = 无  
   
  < span class =code-attribute>                     ScrollBars   = 自动    UseVerticalStripPlacement   =  false   启用主题  =  True  
  < span class =code-attribute> 
                      >  
 <   asp：TabPanel     runat   =   server  
   
              < span class =code-attribute>     HeaderText   = 签名和生物    ID   =  test    ScrollBars   = 两者 >  <   / asp：TabPanel  >  
 <   ContentTemplate  < span class =code-keyword>>  
 ... 
 <   / ContentTemplate  >  
 / > <   asp：TabPanel    < span class =code-attribute> ID   =  TabPanel1    runat   =  server    HeaderText   =  TabPanel1 >  
 <   / asp：TabPanel  >  
 <   asp：TabPanel     ID   =  TabPanel2    runat   =  server    HeaderText   =  TabPanel2 >  
 <   / asp：TabPanel  >  
 <   asp：TabPanel    < span class =code-attribute> ID   =  TabPanel3    runat   =  server    HeaderText   =  TabPanel3 >  
 <   / asp：TabPanel   >  
 <   asp：TabPanel     ID   =  TabPanel4     runat   = < span class =code-keyword> server    HeaderText   =  TabPanel4 >  
 <   / asp：TabPanel  >  
 <   asp：TabPanel     ID   =  TabPanel5    runat   =  server    HeaderText   =  TabPanel5 >  
 <   / asp：TabPanel  >  
 <   asp：TabPanel     ID   =   TabPanel6    runat   =  server    HeaderText   =  TabPanel6 >  
 <   / asp：TabPanel  >  
 <   asp：TabPanel     ID   =  TabPanel7    runat   =  server    HeaderText   =  TabPanel7 >  
 <   / asp： TabPanel  >  
 <   / asp：TabContainer  >  <   br     /  >  <   br     /  >  <   br     /  >  <   br     /  >  
 
 
 <   / div  >  
 < span class =code-keyword><   / form  >  
 <   / body  >  
 <   / html  >  

解决方案

（function（）{

（。ajax__tab_header）。html （< div 样式 =' 身高：35px;溢出：滚动;溢出-γ：隐藏;宽度：350像素; ' > +

（ .ajax__tab_header）。html（）+< / div > ）;

}）
< / script >

< 样式 >
.ajax__tab_body
{
width：323px;
位置：绝对;
顶部：45px;

}

< / style >
< / head >
< body >
< 表格 id = form1 runat = server < span class =code-keyword>>
< div >
< asp：ToolkitScriptManager ID = ToolkitScriptManager1 runat = server > < / asp：ToolkitScriptManager >
< asp：TabContainer runat = 服务器

OnClientActiveTabChanged = ClientFunction

高度 = 500px ActiveTabIndex = 7 宽度 = 323px ID = tab BorderStyle = 无

ScrollBars = 自动 UseVerticalStripPlacement = false EnableTheming = True

>
< asp：TabPanel runat = server

HeaderText = 签名和生物 ID = test ScrollBars = 两者 > < / asp：TabPanel >
< ContentTemplate >
...
< / ContentTemplate > ;
/> < asp：TabPanel ID = TabPanel1 runat = server HeaderText = TabPanel1 >
< / asp：TabPanel >
< asp：T abPanel ID = TabPanel2 runat = server HeaderText = TabPanel2 >
< / asp：TabPanel >
< asp：TabPanel ID = TabPanel3 runat = server HeaderText = TabPanel3 >
< / asp：TabPanel >
< asp：TabPanel ID = < span class =code-keyword> TabPanel4 runat = server HeaderText = TabPanel4 >
< / asp：TabPanel >
< asp：TabPanel ID = TabPanel5 runat = server HeaderText = TabPanel5 >
< / asp：TabPanel >
< asp：TabPanel ID = TabPanel6 runat = server HeaderText = TabPanel6 >
< / asp ：TabPanel >
< asp：TabPanel ID = TabPanel7 runat = server HeaderText = TabPanel7 >
< / asp：TabPanel >
< / asp：TabContainer > < br / > < br / > < br / > < br / >


< / div >
< / form >
< / body >
< / html >

Below is the code for Ajax tabContainer Header scrollbar
it appears that back panel of scroll bar
is visible but the actual scrollbar is not showing up
code for scroll bar is in script tag

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $(function () {

            $(".ajax__tab_header").html("<div style='height:35px; overflow:scroll; overflow-y:hidden;  width:350px;         ' >" + $(".ajax__tab_header").html() + "</div>");

        })
    </script>

  <style>
        .ajax__tab_body
        {
           width:323px;
         position:absolute;
          top: 45px  ;

        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
     <asp:TabContainer runat="server"

        OnClientActiveTabChanged="ClientFunction"

        Height="500px" ActiveTabIndex="7" Width="323px" ID="tab" BorderStyle="None"

          ScrollBars="Auto" UseVerticalStripPlacement="false" EnableTheming="True"

          >
    <asp:TabPanel runat="server"

        HeaderText="Signature and Bio" ID="test" ScrollBars="Both"></asp:TabPanel>
        <ContentTemplate>
            ...
        </ContentTemplate>
    /><asp:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
         </asp:TabPanel>
         <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
         </asp:TabPanel>
         <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
         </asp:TabPanel>
         <asp:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4">
         </asp:TabPanel>
         <asp:TabPanel ID="TabPanel5" runat="server" HeaderText="TabPanel5">
         </asp:TabPanel>
         <asp:TabPanel ID="TabPanel6" runat="server" HeaderText="TabPanel6">
         </asp:TabPanel>
         <asp:TabPanel ID="TabPanel7" runat="server" HeaderText="TabPanel7">
         </asp:TabPanel>
</asp:TabContainer><br /><br /><br /><br />


        </div>
    </form>
</body>
</html>

解决方案

(function () {

(".ajax__tab_header").html("<div style='height:35px; overflow:scroll; overflow-y:hidden; width:350px; ' >" +

(".ajax__tab_header").html() + "</div>"); }) </script> <style> .ajax__tab_body { width:323px; position:absolute; top: 45px ; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager> <asp:TabContainer runat="server" OnClientActiveTabChanged="ClientFunction" Height="500px" ActiveTabIndex="7" Width="323px" ID="tab" BorderStyle="None" ScrollBars="Auto" UseVerticalStripPlacement="false" EnableTheming="True" > <asp:TabPanel runat="server" HeaderText="Signature and Bio" ID="test" ScrollBars="Both"></asp:TabPanel> <ContentTemplate> ... </ContentTemplate> /><asp:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"> </asp:TabPanel> <asp:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2"> </asp:TabPanel> <asp:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3"> </asp:TabPanel> <asp:TabPanel ID="TabPanel4" runat="server" HeaderText="TabPanel4"> </asp:TabPanel> <asp:TabPanel ID="TabPanel5" runat="server" HeaderText="TabPanel5"> </asp:TabPanel> <asp:TabPanel ID="TabPanel6" runat="server" HeaderText="TabPanel6"> </asp:TabPanel> <asp:TabPanel ID="TabPanel7" runat="server" HeaderText="TabPanel7"> </asp:TabPanel> </asp:TabContainer><br /><br /><br /><br /> </div> </form> </body> </html>

这篇关于Ajax tabContainer标题滚动条不起作用。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！