`
danwind
  • 浏览: 234116 次
  • 性别: Icon_minigender_1
  • 来自: 广东
社区版块
存档分类
最新评论

ajax实现tab控件

    博客分类：
  • Ajax
AjaxjQueryJavaScriptHTML 
阅读更多
使用jQuery完成的tab控件，兼使用JavaScript实现的滚动页面，需要用到jquery-tabs.js和jquery-1.1.3.1.js包，页面调用如下： 

<html>
    <head>
   <title>Tabs - jQuery</title>

<script src="jquery-1.1.3.1.js" type="text/javascript"></script>
<script src="jquery-tabs.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('#container-1').tabs();
	});
 </script> 
<style type="text/css" >
	.tabs-hide {
			display: none;
	}    
</style>
</head>
    <body>
      <h2>Simple Tabs</h2>
       <div id="container-1">
            <ul>
                <li><a href="#fragment-1"><span>One</span></a></li>
                <li><a href="#fragment-2"><span>Two</span></a></li>
                <li><a href="#fragment-3"><span>Tabs are flexible again
				</span></a></li>
            </ul>
            <div id="fragment-1">
				<div id="marqueebox0" style="overflow:hidden;height:111px;line-height:22x;">
                <table width="718"  border="0" align="center" cellpadding="0" cellspacing="0">
				 <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f1</td>
		          </tr>  
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f2</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f3</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f4</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f5</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f6</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f1</td>
		          </tr>  
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f2</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f3</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f4</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f5</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f6</td>
		          </tr>
		  		</table>
				</div>
            </div>
            <div id="fragment-2">
                <div id="marqueebox0" style="overflow:hidden;height:111px;line-height:22x;">
				<table width="718"  border="0" align="center" cellpadding="0" cellspacing="0">
				 <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f7</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f8</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f9</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f10</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f11</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f12</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f9</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f10</td>
		          </tr>
				  <tr onmouseover="javascript:this.bgColor='#ffffff'"   onmouseout="javascript:this.bgColor=''">
		             <td width="4%">f11</td>
		          </tr>
		  		</table>
		  		</div>
            </div>
            <div id="fragment-3">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </div>
			<script> 
<!-- 
function startmarquee(lh,speed,delay,index){ 
var t; 
var p=false; 
var o=document.getElementById("marqueebox"+index); 
o.innerHTML+=o.innerHTML; 
o.onmouseover=function(){p=true} 
o.onmouseout=function(){p=false} 
o.scrollTop = 0; 
function start(){ 
t=setInterval(scrolling,speed); 
if(!p) o.scrollTop += 2; 
} 
function scrolling(){ 
if(o.scrollTop%lh!=0){ 
o.scrollTop += 2; 
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0; 
}else{ 
clearInterval(t); 
setTimeout(start,delay); 
} 
} 
setTimeout(start,delay); 
} 
startmarquee(22,50,3000,0); 
/**startmarquee(一次滚动高度,速度,停留时间,图层标记);**/ 

//--> 
</script>
        </div>
    </body>
</html>
分享到：
| 网站收藏
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Tab控件（类型于AJAX里的TAB控件）

    在AJAX（Asynchronous JavaScript and XML）技术出现后，Tab控件得到了进一步的发展，能够实现无刷新页面切换，提升用户体验。以下是对Tab控件及其与AJAX关联的详细解释。 一、Tab控件的基本原理 Tab控件通常由...

    ajax和php做tab控件源代码

    **三、Tab控件实现** Tab控件的HTML结构通常由一组表示标签的li元素和一个存放内容的div容器组成。每个li元素代表一个Tab，div容器用于显示内容。通过CSS样式，我们可以实现Tab的视觉效果，如悬浮高亮、点击切换等。...

    javascript 经典tab控件

    模仿ExtJS的Tab控件意味着它可能包含类似的功能，如动态添加和删除标签页、支持Ajax加载内容、自定义样式等。 在实际开发中，创建一个JavaScript Tab控件通常涉及以下几个关键步骤： 1. **HTML结构**：首先，我们...

    网页上仿Gmail拼写检查控件及 AJAX实现的TAB脚本控件

    网页上仿Gmail拼写检查控件及 AJAX实现的TAB脚本控件

    Tab控件(1.访淘宝Tab,2.访博客园(新闻频道的Tab))

    我们将深入探讨Tab控件的原理、实现方式以及在实际场景中的应用。 首先，Tab控件的基本概念是通过创建多个标签页来分隔内容，每个标签页代表一个独立的信息区域。用户可以通过点击不同的标签来切换显示的内容，这样...

    asp.net ajax tabs优化控件

    在优化ASP.NET AJAX Tab控件时，有几个关键知识点需要考虑： 1. **性能优化**： - **异步加载**：默认情况下，所有选项卡的内容在页面加载时都会被加载。为了提高性能，可以配置控件只在用户切换到相应选项卡时...

    jquery tab控件

    接下来，我们需要使用jQuery来实现Tab控件的功能。这里可以使用`.click()`事件监听标签的点击，并根据点击的标签切换内容的显示。示例代码如下： ```javascript $(document).ready(function() { // 默认显示第一个...

    AJAXTool 常用控件安装程序

    - **AjaxTab**：选项卡控件，可组织内容为多个可切换的面板。 - **AjaxLoader**：加载指示器，显示数据正在加载或处理中。 - **AjaxUpload**：文件上传控件，支持多文件选择和上传进度显示。 - **AjaxPager**：...

    AJAX常用34个控件及介绍

    ### AJAX常用34个控件及详细介绍 #### 1. Accordion（折叠面板） Accordion 控件可以创建一种可折叠的面板布局，用户可以点击标题来展开或收起内容区域，非常适用于网页上需要节省空间展示大量信息的情况。该控件...

    ajaxtoolkit中Tab控件的例子

    Tab本身就应该是个以页签形式显示组织网页内容的一个控件...在AJAX Control Tool Kit的控件中有TabContainer控件,它是一些TabPanel控件的载体,而每个TabPanel可以像标准的Panel控件一样,成为其它一些ASP.NET控件的容器

    tabpane--js的tab控件

    **Tabpane - JavaScript的Tab控件** Tab控件在网页设计中是一种常见的用户界面元素，它允许用户在多个视图之间切换，而无需在页面上实际加载新的内容。Tabpane是实现这种功能的一种JavaScript实现，它能够帮助...

    Asp.net2.0实现简易菜单Tab切换

    Tab控件能够帮助用户更好地组织和浏览网页上的信息，提高用户体验。下面我们将深入探讨如何利用Asp.net 2.0来实现这一功能。 首先，我们需要理解Asp.net 2.0的核心概念。Asp.net 2.0是微软推出的Web应用程序开发...

    [A037]ASP.NET AJAX控件Tabs

    ASP.NET AJAX控件中的Tabs控件由多个TabPanels组成，每个TabPanel代表一个Tab页。TabPanels可以包含任何ASP.NET服务器控件，如文本、图片、表格、表单等。开发者可以通过编程或设计时界面（Visual Studio IDE）来...

    asp.net Tab

    在提供的压缩包文件中，`TabsCode.aspx`可能是包含Tab控件实现的ASPX页面代码，它将展示如何在页面设计中使用Tab控件。而`TabsCode.cs`则可能是对应的后台C#代码，这部分代码负责处理Tab控件的逻辑，如初始化Tab页、...

    基与MSAjax 的Tab

    http://www.ynrj.net 开原一个控件

    Ajax TabContainer 自定义CSS样式 .txt

    - **`.ajax_tab_menu.ajax__tab_hover.ajax__tab_tab`**：这是鼠标悬停在标签页上的样式。 - **`.ajax_tab_menu.ajax__tab_active.ajax__tab_tab`**：这是当前选中的标签页样式。 ##### 2. CSS代码示例 ```css /* ...

    Atlas中UpdatePanel无刷新Tab切换源码.zip

    此“Atlas中UpdatePanel无刷新Tab切换源码.zip”压缩包包含的是一个示例项目，展示了如何利用UpdatePanel实现Tab控件的无刷新切换。这个功能在网页设计中非常常见，特别是在构建复杂且数据丰富的Web应用时，能够减少...

    ASP.NET源码——Tab选项卡控件及Demo源码.zip

    在ASP.NET中，Tab控件常用于创建用户友好的界面，让用户可以方便地在多个视图或内容之间切换，而无需刷新整个页面。这种控件在网站设计中尤其常见，如设置页面、个人信息管理等场景。 该源码可能包含以下几个部分：...

    商业编程-源码-Asp.net2.0实现简易菜单Tab切换.zip

    Tab控件在Web界面设计中被广泛使用，它可以帮助用户组织和导航不同内容区域，提高用户体验。在Asp.net中，可以通过多种方式实现Tab切换，例如使用UpdatePanel、AjaxControlToolkit的TabContainer控件或者自定义...

Magicbox
Global site tag (gtag.js) - Google Analytics