jQuery tab

chengyu2099

浏览: 468695 次
性别:
来自: 南京

最近访客更多访客>>

u012363178

zjjsgwm

dyf423

97wgl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery IE UI JSP HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI tabs integration demo</title>

<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css" />

<script src="../../lib/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../jquery.validate.js" type="text/javascript"></script>

<script id="demo" type="text/javascript">
$(document).ready(function() {
	var tabs = $("#tabs").tabs();
	var validator = $("#signupform").validate({
		groups: {
			birthdate: "birthdateDay birthdateMonth birthdateYear"
		},
		errorPlacement: function(label, element) {
			if (/^birthdate/.test(element[0].name)) {
				label.insertAfter("#birthdateYear");
			} else {
				label.insertAfter(element);
			}
		}
	});
	
	// validate the other two selects when one changes to update the whole group
	var birthdaySelects = $("#birthdateGroup select").click(function() {
		birthdaySelects.not(this).valid();
	})
	
	// overwrite focusInvalid to activate tab with invalid elements
	validator.focusInvalid = function() {
		if( this.settings.focusInvalid ) {
			try {
				var focused = $(this.findLastActive() || this.errorList.length && this.errorList[0].element || []).filter(":visible");
				tabs.tabs("select", tabs.find(">div").index(focused.parent().parent()));
				focused.focus();
			} catch(e) {
				// ignore IE throwing errors when focusing hidden elements
			}
		}
	};
});
</script>

<style>
	body { font-size: 65.2% }
	label { display: inline-block; width: 8em; }
	label.error { color: red; margin-left: 0.5em; width: 20em; }
</style>

</head>
<body>
	
<form id="signupform">
	
	<div id="tabs">
		<ul>
			<li><a href="#logindata">Login data</a></li>
			<li><a href="#personaldata">Personal data</a></li>
			<li><a href="#subscriptions">Subscriptions</a></li>
		</ul>
		<div id="logindata">
			<p>
				<label for="username">Username</label>
				<input id="username" name="username" class="required" minlength="3" maxlength="20" type="text" />
			</p>
			<p>
				<label for="email">Email address</label>
				<input id="email" name="email" class="required email" type="text" />
			</p>
			<p>
				<label for="password">Password</label>
				<input name="password" type="password" class="required" id="password" minlength="4" maxlength="50" />
			</p>
			<p>
				<label for="confirmpassword">Confirm Password</label>
				<input name="confirmpassword" type="password" class="required" equalTo="#password" id="confirmpassword" />
			</p>
		</div>
		<div id="personaldata">
			<p>
				<label for="street">Street</label>
				<input id="street" name="street" class="required" minlength="3" maxlength="50" type="text" />
			</p>
			<p>
				<label for="city">City</label>
				<input id="city" name="city" class="required" minlength="3" maxlength="50" type="text" />
			</p>
			<p id="birthdateGroup">
				<label for="birthdateDay">Birthdate</label>
				<select id="birthdateDay" name="birthdateDay" class="required">
					<option value="">Day</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>...</option>
				</select>
				<select id="birthdateMonth" name="birthdateMonth" class="required">
					<option value="">Month</option>
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
					<option>5</option>
					<option>6</option>
					<option>7</option>
					<option>8</option>
					<option>9</option>
					<option>10</option>
					<option>11</option>
					<option>12</option>
				</select>
				<select id="birthdateYear" name="birthdateYear" class="required">
					<option value="">Year</option>
					<option>1950</option>
					<option>1951</option>
					<option>1952</option>
					<option>1953</option>
					<option>1954</option>
					<option>1955</option>
					<option>...</option>
				</select>
			</p>
		</div>
		<div id="subscriptions">
			<p>
				<label for="weekly">Weekly Newsletter</label>
				<input id="weekly" name="weekly" type="checkbox" />
			</p>
			<p>
				<label for="updates">Product Updates</label>
				<input id="updates" name="updates" type="checkbox" />
			</p>
			<p>
				<label for="terms">Terms and conditions</label>
				<input id="terms" name="terms" class="required" type="checkbox" />
			</p>
		</div>
	</div>

	<input type="submit" />
</form>


<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2623402-1";
urchinTracker();
</script>

</body>
</html>

分享到：

jsp file-set | DIV 排版例子

2010-01-17 12:59
浏览 1090
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery tab

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery tab

评论

发表评论

相关推荐

jquery uploadify

javascript 单元格互换值

json-jquery-struct 解析例子(map) - 批量导入解析和批量导出

弹出窗口 ymPrompt API

jquery tabs 面板

jquery - tags 百度样式的动态提示

jQuery 弹出层

jquery 鼠标移动，连接提示

jquery-实现拖拽功能

js操作table，实现拖拽，保存顺序思路

js 验证的样式 有点EXT味道

正则表达式 验证表单 regular

jQuery js 图片轮换显示 缩略图 滚动预览小图的相册

js 滚动图片

showDialog 窗口模式

jQuery Ajax

jQuery获取表单值

js 操作 json

js 选择提示 confirm

JS 提示输入字符数

最近访客更多访客>>

js 验证的样式有点EXT味道

正则表达式验证表单 regular

jQuery js 图片轮换显示缩略图滚动预览小图的相册