AJAX之Tabs

原创 2007年10月16日 00:24:00
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    
<title>Untitled Page</title>
</head>
<body>
    
<form id="form1" runat="server">
        
<asp:ScriptManager ID="ScriptManager1" runat="server" />
        
<div>
            
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="700" Height="300">
                
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="我的账户">
                    
<ContentTemplate> 
                         
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            
<ContentTemplate>
                                
<asp:Label ID="Label1" runat="server" Text="账户查询"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label2" runat="server" Text="E家亲账户"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label3" runat="server" Text="其它账户服务"></asp:Label>
                            
</ContentTemplate>
                         
</asp:UpdatePanel>
                    
</ContentTemplate>
                
</cc1:TabPanel>
            
            
                
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="转账汇款">
                     
<ContentTemplate> 
                         
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
                            
<ContentTemplate>
                                
<asp:Label ID="Label4" runat="server" Text="活期转账汇款"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label5" runat="server" Text="定活互转"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label6" runat="server" Text="向企业转账"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label25" runat="server" Text="跨行转账"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label26" runat="server" Text="预约转账"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label27" runat="server" Text="结果查询"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label28" runat="server" Text="收款人名册"></asp:Label>
                            
</ContentTemplate>
                         
</asp:UpdatePanel>
                    
</ContentTemplate>
                
</cc1:TabPanel>
                
                
                
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="缴费支付">
                     
<ContentTemplate> 
                         
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
                            
<ContentTemplate>
                                
<asp:Label ID="Label7" runat="server" Text="缴费支付"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label8" runat="server" Text="缴费支付记录查询"></asp:Label>
                            
</ContentTemplate>
                         
</asp:UpdatePanel>
                    
</ContentTemplate>
                
</cc1:TabPanel>
                
                
<cc1:TabPanel ID="TabPanel4" runat="server" HeaderText="信用卡">
                     
<ContentTemplate> 
                         
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
                            
<ContentTemplate>
                                
<asp:Label ID="Label10" runat="server" Text="信用卡开卡"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label11" runat="server" Text="信用卡查询"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label12" runat="server" Text=" 信用卡还款"></asp:Label>
                                 
&nbsp;
                                
<asp:Label ID="Label9" runat="server" Text="购汇还款"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label29" runat="server" Text="信用卡管理"></asp:Label>
                            
</ContentTemplate>
                         
</asp:UpdatePanel>
                    
</ContentTemplate>
                
</cc1:TabPanel>
                
                
<cc1:TabPanel ID="TabPanel5" runat="server" HeaderText="个人贷款">
                     
<ContentTemplate> 
                         
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
                            
<ContentTemplate>
                                
<asp:Label ID="Label13" runat="server" Text="贷款及额度查询"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label14" runat="server" Text="账户及信息维护"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label15" runat="server" Text="自助还贷"></asp:Label>
                                 
&nbsp;
                                
<asp:Label ID="Label30" runat="server" Text="理财账户管理"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label31" runat="server" Text="贷款试算"></asp:Label>
                            
</ContentTemplate>
                         
</asp:UpdatePanel>
                    
</ContentTemplate>
                
</cc1:TabPanel>
                
                
<cc1:TabPanel ID="TabPanel6" runat="server" HeaderText="投资理财">
                     
<ContentTemplate> 
                         
<asp:UpdatePanel ID="UpdatePanel6" runat="server">
                            
<ContentTemplate>
                                
<asp:Label ID="Label16" runat="server" Text="外汇买卖"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label17" runat="server" Text="银证业务"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label18" runat="server" Text="债券业务"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label32" runat="server" Text="基金业务"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label33" runat="server" Text="证券卡管理"></asp:Label>
                            
</ContentTemplate>
                         
</asp:UpdatePanel>
                    
</ContentTemplate>
                
</cc1:TabPanel>
                
                
<cc1:TabPanel ID="TabPanel8" runat="server" HeaderText="安全服务">
                     
<ContentTemplate> 
                         
<asp:UpdatePanel ID="UpdatePanel8" runat="server">
                            
<ContentTemplate>
                                
<asp:Label ID="Label22" runat="server" Text="修改密码"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label23" runat="server" Text="动态口令"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label24" runat="server" Text="账号保护"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label19" runat="server" Text="短信服务"></asp:Label>
                                
&nbsp;
                                
<asp:Label ID="Label20" runat="server" Text="安全设置"></asp:Label>
                            
</ContentTemplate>
                         
</asp:UpdatePanel>
                    
</ContentTemplate>
                
</cc1:TabPanel>
                
            
</cc1:TabContainer>
           
        
</div>
    
</form>
</body>
</html>

 

 <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="700" Height="300">
                <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="我的账户">
                    <ContentTemplate>
                         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                            <ContentTemplate>
                                                        

                           </ContentTemplate>
                         </asp:UpdatePanel>
                    </ContentTemplate>
                </cc1:TabPanel>
           
           
                <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="转账汇款">
                     <ContentTemplate>
                         <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                            <ContentTemplate>
                                                         </ContentTemplate>
                         </asp:UpdatePanel>
                    </ContentTemplate>
                </cc1:TabPanel>
                
                                
            </cc1:TabContainer>
          

使用Bootstrap Tabs选项卡Ajax加载数据的实现以及遇到的问题;

HTML代码(仅展示了部分关键性代码)   主页 (current)
  • SimpleMale
  • SimpleMale
  • 2015年09月02日 02:19
  • 10347

JQuery学习总结一 —— JQ-tabs的实现

最近面试的时候被问到有没有看过JQuery的源码,本人确实看过,然而什么都没有记住,所以看过并没有什么X用,重要的,还是要动手写代码。JQuery-tabs实现 网站地址后#?的区别 我们经常可以看...
  • Elson_tju
  • Elson_tju
  • 2016年04月30日 22:31
  • 1042

jQuery EasyUI实现关闭全部tabs

有时候当我们打开很多tabs选项卡时,要关闭它只能一个一个的进行关闭显然太麻烦,这时可以在选项卡的最右边添加一个按钮 实现关闭全部。代码如下: //获取最后一个tabs 在新加的选项卡后面添加"关闭全...
  • itmyhome
  • itmyhome
  • 2014年06月19日 21:57
  • 16468

ionic 解决android 中tabs 在上面的问题。

**//ionic 解决android 中tabs 在上面的问题。** 替换App.js为以下代码。// Ionic Starter App// angular.module is a globa...
  • M_killer
  • M_killer
  • 2015年11月07日 21:37
  • 4410

Tabs Outliner(标签系统)

用户们使用浏览器的时候,经常都会打开很多标签,当数量超过十个以后,标签就会杂乱而无序,你根本看不清标题。Tabs Outliner它会在浏览器旁边新建一个窗口,把所有的标签页按照域名归类放好,如果你想...
  • c1007726825
  • c1007726825
  • 2016年03月14日 16:20
  • 804

基于Jquery easyui 选中特定的tab并更新

获取选中的 Tab 1 2 3 // 获取选中的 tab panel 和它的 tab 对象  var pp = $('#tt').tabs('getSelected'); ...
  • fu415037685
  • fu415037685
  • 2016年08月24日 11:12
  • 1883

jQuery实现tabs(标签页/选项卡)Demo

1. 需要下载的文件 jquery.min.js 2. 效果截图   通过滑动鼠标可以切换不同的tabs,并且显示不同的内容。下面是实现的效果图 3. 代码   html 选项卡 ...
  • lypf19900912
  • lypf19900912
  • 2015年04月30日 21:25
  • 4058

easyui为tabs添加右键菜单

 在使用easyui-tabs时,当我们打开许多个tab后,我们希望也能像浏览器窗口一样有一个右键菜单,包含关闭全部、关闭当前、关闭右侧等操作,该文就讲述如何实现此功能。 挂上...
  • sunny_lv
  • sunny_lv
  • 2016年01月12日 15:03
  • 1152

JqueryUI学习笔记-选项卡tabs

Insert title here $(function() { $("#tabs").tabs({ //配置当前打开的选项卡的索引,可以使用bool值或者int值,默认为1 ...
  • dc15822445347
  • dc15822445347
  • 2014年03月27日 18:26
  • 8742

Ionic2之tabs相关内容和其他一些坑

ionic tab的属性和一些使用方法, 和ionic其他的一些注意事项
  • bangrenzhuce
  • bangrenzhuce
  • 2017年04月05日 23:24
  • 1375
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AJAX之Tabs
举报原因:
原因补充:

(最多只允许输入30个字)