It is very easy
to do Sliding controls using Jquery . There are some inbuilt Jquery functions
are very useful for this purpose.
Styles and
Javascript
$("#panel").slideToggle("slow");
Please find the
below Code snippet of Jquery
Aspx Page Code:
<form
id="form1"
runat="server">
<div
id="flip">
↕</div>
<div
id="panel">
<img src="Lighthouse.jpg" alt="" height="200" /><br />
<img src="Penguins.jpg" alt="" height="200" /><br />
<img src="Tulips.jpg" alt="" height="200" /><br />
</div>
</form>
<head runat="server">
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$("#flip").click(function () {
});
});
</script>
<style
type="text/css">
#panel,
#flip
{
padding:
5px;
text-align:
center;
background-color:
#e5eecc;
border:
solid 1px #c3c3c3;
width:
300px;
}
#panel
{
padding:
5px;
}
#flip
{
text-align:
right;
}
</style>
<title></title>
</head>
We have to
include the Jquery online Path:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
And we can access the Controls by name using Jquery Templates &
functions.SlideToggle(…) is an inbuilt
Jquery method which will help us to do toggle events. Similerly SlideUp(..),
SlideDown(…) also there in Jquery.
No comments:
Post a Comment