您的位置：首页 > Web前端 > JQuery

(Jquery功能篇) Jquery UI 相关组件(手风琴、tab分页、进度条、滚动条、时间控件)

2013-08-12 18:14 676 查看

截图：

实例代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>手分琴</title>	
	<!--加载相关资源文件  -->
	<!--jquery 核心组件  -->
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<!--jquery UI 核心组件  -->  
	<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	<!--Jquery UI 核心组件的样式文件  -->
	<link type="text/css" href="css/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
	<script type="text/javascript">
	$(function() {
	//手风琴js 代码 
			$("#accordion").accordion({ header: "h3" });
	//tab 分页js代码 
	        $('#tabs').tabs();
	        
	//时间控件js 代码 
				$('#datepicker').datepicker({
					inline: true
				});
				
				// 滚动条 js  代码 
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
				// 进度条 js 代码 
				$("#progressbar").progressbar({
					value: 20 
				});
	
      
	        
		
	});
	</script>
	
		<style type="text/css">
			/*demo page css*/
			body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
			.demoHeaders { margin-top: 2em; }
		
			
		</style>	
  </head>
  
  <body>   
   	<h2 class="demoHeaders">Accordion</h2>
   	<!--手风琴实例代码  -->
		<div id="accordion">
			<div>
				<h3><a href="#">First</a></h3>
				<div>第一页</div>
			</div>
			<div>
				<h3><a href="#">Second</a></h3>
				<div>第二页</div>
			</div>
			<div>
				<h3><a href="#">Third</a></h3>
				<div>第三页</div>
			</div>
		</div>
   <!--Tab 分页表格  -->
   <h2 class="demoHeaders">Tabs</h2>
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">First</a></li>
				<li><a href="#tabs-2">Second</a></li>
				<li><a href="#tabs-3">Third</a></li>
			</ul>
			<div id="tabs-1">表格一</div>
			<div id="tabs-2">表格二</div>
			<div id="tabs-3">表格三</div>
		</div>
   
<!-- 滚动条 -->
		<h2 class="demoHeaders">滚动条</h2>
		<div id="slider"></div>
<!-- 时间控件 -->
		<h2 class="demoHeaders">时间控件</h2>
		<div id="datepicker"></div>
	
		<!-- 进度条 -->
		<h2 class="demoHeaders">进度条 </h2>	
		<div id="progressbar"></div>

       
  </body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

(Jquery功能篇) Jquery UI 相关组件(手风琴、tab分页、进度条、 滚动条、 时间控件)

(Jquery功能篇) Jquery UI 相关组件(手风琴、tab分页、进度条、滚动条、时间控件)