jQuery Special Effects - A Slide Panel For an ASP.NET Page
jQuery with ASP.NET pages produces interesting special effects like the slide panel show in this example. Let's start with CSS classes:
<style type="text/css"> body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
outline: none;
}
#panel {
background: #754c24;
height: 200px;
display: none;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #422410;
background: url(img/btn-slide.gif) no-repeat center top;
}
.btn-slide {
background: url(img/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
.input {
border: 1px solid #006;
background: #ffc;
}
.input:hover {
border: 1px solid #f00;
background: #ff6;
}
.button {
border: 1px solid #006;
background: #FFCC00;
}
.button:hover {
border: 1px solid #f00;
background: #eef;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
color: #FFFFFF;
text-align: right;
}
br { clear: left; }
</style>
Notice that the slide image file and the arrow button pointer image are referenced in the .slide and .btn-slide CSS classes respectively. The CSS classes also feature hovering and other class definitions that affect the user visual experience. The slide panel html tag referenced in the CSS classes for the ASPX file are:
<body> <form id="form1" runat="server"> <!-- The panel is accessed from the jQuery in the code-behind by the selector #panel --> <div id="panel"> <!-- panel content here --> <label>Name: </label> <input type="text" class="input" /><br /> <label>Password: </label> <input type="password" class="input" /><br /><br /> <label> </label> <asp:Button ID="Button1" runat="server" Text="Login" onclick="Button1_Click" class="button"/> </div> <p class="slide"><a href="#" class="btn-slide">Slide panel tab</a></p> </form></body>
The code that responds to the click event and animates the slide special effect is loaded from a Client Script Manager in the ASPX page load event:]
protected void Page_Load(object sender, EventArgs e){
this.GenerateSlidePanelScript();}
//---------------------------------------------------------------------------/// <summary>/// Method Name: GenerateSlidePanelScript/// Description: Loads javascript to Generate Slide Panel Script/// </summary>//---------------------------------------------------------------------------public void GenerateSlidePanelScript(){
string jScript = string.Empty; jScript = "<script language='javascript' type='text/javascript'>$(document).ready(function()" + "{ " + " $('.btn-slide').click(function(){ " + " $('#panel').slideToggle('slow'); " + " $(this).toggleClass('active'); return false; " + " });" + "});" + "</script>"; if (!ClientScript.IsClientScriptBlockRegistered("SlidePanelScript")) {
ClientScript.RegisterClientScriptBlock(this.GetType(), "SlidePanelScript", jScript); }
}
When the page loads, the form initially looks like this:
When the slide panel tab button image is clicked, then jQuery produces the following slide panel toggle "slow" effect:
