mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
157 lines
4.6 KiB
HTML
157 lines
4.6 KiB
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>
|