(Jquery功能篇) Jquery UI 相关组件(手风琴、tab分页、进度条、 滚动条、 时间控件)
无情
阅读：661
2021-04-01 10:21:35
评论：0
截图：
实例代码：
<%@ 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>
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
