Two simple, effective methods [Self explanatory] in displaying or hiding
specific blocks in jQuery are
.hide() - Used to Hide the specific
block by ID
.show() - Used to Display the
specific block by ID
.hide() & .show()
This method does not accept any arguments.
.hide( [duration ] [, complete ] ) & .show( [duration ] [,
complete ] )
duration (default: 400) -
Type: Number or String
A string or number determining how long the animation will run.
complete -
Type: Function()
A function to call once the animation is complete.
.hide( options ) & .show(options)
options -
Type: PlainObject
A map of additional options to pass to the method.
It will support duration, easing, queue, specialEasing, step, progress,
complete, done, fail and always.
Sample Program
<!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=ISO-8859-1">
<title>Login</title>
<script src="/Sample/js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
$("#Admin").hide();
$("#Student").hide();
$("#Submit").hide();
});
function changeUserType(value)
{
if(value != 'Select'){
if(value == 'Admin'){
$("#Admin").show();
$("#Student").hide();
}
else if(value == 'Student'){
$("#Student").show();
$("#Admin").hide();
}
$("#Submit").show();
}
}
</script>
</head>
<body>
<h3 align="Center">User Login Page</h3>
<div align="Left">
<select id="Select" onchange="changeUserType(this.value)"
name="Select">
<option value="Select">Select...</option>
<option value="Admin">Admin</option>
<option value="Student">Student</option>
</select>
<form name="myform" action="login">
<div id="Admin">
<h4>Admin Block</h4>
Enter Administrators Name: <input type="text"
name="aname"><br>
Password: <input type="text" name="apassword"><br>
</div>
<div id="Student">
<h4>Student Block</h4>
Enter Student Roll No: <input type="text" name="rnumber"><br>
Password: <input type="text"
name="spassword"><br>
</div>
<div id="Submit">
<input type="submit"
value="Submit">
</div>
</form>
</div>
</body>
</html>
Some simple JQuery methods became effective tool for web developers to do magic
on the screen. Happy Learning...
No comments:
Post a Comment