jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Постигать азы jQuery удобнее всего с помощью уроков “jQuery для начинающих“. Советую ;) Сегодня попробуем сделать выдвигающеюся панель.
Подцепляем библиотеку jQuery:
- <head>
- <script type="text/javascript" src="jquery.js"></script>
- </head>
JavaScript с пояснениями:
- <script type="text/javascript">
- $(document).ready(function(){
- // вешаем обработчик на ссылку с классом "btn-slide"
- $(".btn-slide").click(function(){
- // выдвигаем/прячем панель с id = panel-id
- $("#panel-id").slideToggle("slow");
- // изменяем класс самой ссылки
- $(this).toggleClass("btn-slide-active");
- // и ничего не делаем дальше (дабы не было перехода по ссылки)
- return false;
- });
- });
- </script>
CSS код:
- body {
- margin: 0 auto;
- }
- .panel {
- height: 38px;
- display: none;
- background: #414E67 url(images/bg_panel.png) repeat-x top;
- color: #E1E1E1;
- font: 12px "Arial";
- }
- .panel a {
- color: #FFF;
- text-decoration: none;
- }
- .panel-text {
- padding: 10px;
- }
- .slide {
- margin: 0;
- padding: 0;
- height: 8px;
- background: url(images/bg_line.png) repeat-x top;
- }
- .btn-slide {
- float: right;
- background: url(images/arrow_open.png) no-repeat;
- width: 40px;
- height: 15px;
- margin: 0 10px 0 0;
- outline: none;
- }
- .btn-slide-active {
- background: url(images/arrow_close.png) no-repeat right;
- }
Ну и на конец HTML:
- <div class="panel" id="panel-id">
- <div class="panel-text">
- Hello World! (<a href="http://driverlab.ru">DRiVERlab.ru</a>)
- </div>
- </div>
- <p class="slide"><a href="#" class="btn-slide" title="Показать/Скрыть" /></p>
Пример работы | Скачать111
