بسیاری از مواقع پیش میآید که در سایت خود بخواهیم کادری داشته باشیم که با کلیک بروی آن ظاهر و با کلیک دوباره بروی آن محو شود. مانند تصویر زیر
سپس با کلیک بروی قسمت مشخص شده از تصویر بالا تصویر مانند زیر ظاهر شود.
در این نوشته قصد داریم کادری به این صورت حالا به هر منظوری طراحی نماییم.
برای کار سه قسمت کد داریم:
- کدهای طراحی قسمت مورد نظر در صفحه وب
- نوشتن کدهای CSS مربوطه
- نوشتن کدهای jQuery
در مرحله اول ابتدا صفحه وب خود را به نحو زیر ایجاد مینماییم.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>کادر لغزان با jQuery</title> <script src="Scripts/jquery-1.7.1.min.js"></script> <link href="CSS/site.css" rel="stylesheet" /> </head> <body> <div id="loginPanel"> <div style="height: auto;" id="login"> <div> <div> <br /> محتویات دلخواه خود را در این قسمت قرار دهید </div> </div> <div><a href="#" id="closeLogin"></a></div> </div> <div id="container"> <div id="top"> <!-- login --> <ul> <li> </li> <li><a id="toggleLogin" href="#">پانل باز شو</a></li> </ul> <!-- / login --> </div> <!-- / top --> </div> </div> <div id="main"> محتویات سایت در این قسمت قرار میگیرد </div> </body> </html>
body { margin:0; padding:0; width:100%; background: #e9e9e9 url(images/header_bg.gif) top repeat-x; direction: rtl; } html { padding:0; margin:0; } #main {margin-top: 100px;} #loginPanel { margin: 0px; position: absolute; overflow: hidden; height: auto; z-index: 3000; width: 100%; top: 0px; color: #fff; } #top { background: url(images/login_top.jpg) repeat-x 0 0; height: 38px; position: relative; } #top ul.login { display: block; position: relative; float: right; clear: right; height: 38px; width: auto; margin: 0; right: 150px; color: white; text-align: center; background: url(images/login_r.png) no-repeat right 0; padding-right: 45px; } #top ul.login li.left { background: url(images/login_l.png) no-repeat left 0; height: 38px; width: 45px; padding: 0; margin: 0; display: block; float: left; } #top ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 38px; background: url(images/login_m.jpg) repeat-x 0 0; } #top ul.login li a { color: #fff; text-decoration: none; } #top ul.login li a:hover { color: #ff0000; text-decoration: none; } #login { width: 100%; color: white; background: #1E1E1E; overflow: hidden; position: relative; z-index: 3; height: 0px; } #login a { text-decoration: none; color: #fff; } #login a:hover { color: white; text-decoration: none; } #login .loginContent { width: 900px; height: 80px; margin: 0 auto; padding-top: 25px; text-align: right; } #login .loginClose { display: block; position: absolute; right: 15px; top: 10px; width: 70px; text-align: left; } #login .loginClose a { display: block; width: 100%; height: 20px; background: url(images/button_close.jpg) no-repeat right 0; padding-right: 10px; border: none; color: white; } #login .loginClose a:hover { background: url(images/button_close.jpg) no-repeat right -20px; } .cen { text-align: center;} .w_100p{ width: 100%;}
<script type="text/javascript"> $(document).ready(function () { $("#login").hide(0); $("#toggleLogin").click(function () { $("#login").slideToggle("slow"); }); $("#closeLogin").click(function () { $("#login").slideUp("slow"); }); }); </script>