Гость !!! | RSS
Сегодня на сайте
Новые сообщения Участники Правила форума Поиск RSS
  • Страница 1 из 1
  • 1
Модератор форума: Khufu  
Форум » Скрипты » Другие Скрипты » Горизонтальная выезжающая панель с помощью jQuery
Горизонтальная выезжающая панель с помощью jQuery
« Dimmon » Дата: Четверг, 25 Февраля 2010, 10:38:19 | Сообщение # 1
Любопытные
Dimmon
«Проверенные»
Сообщений: 66
Замечания: ±
Статус Настроения: [редактировать]
Отсутствует

Интересная панель, которая будет появляться \ исчезать при нажатии на кнопку.

Как Вы видите на картинку выше у нас левая часть будет содержать небольшое меню, которое будет появляться\исчезать при нажатии на кнопку, и правая часть с текстовым наполнением, которая будет только менять свой размер, в зависимости от состоянии левой части.

HTML

Начнем с HTML разметки. Она очень простая.

Code
<div id="wrap">
<div id="control">
<a id="controlbtn" class="open" href="http://aext.net" alt="Show/View your stuffs">Hide your stuffs</a>
</div>

<div id="maincontent">

<div id="linkblock">

<h4>All tags</h4>
<ul id="yourlist">
<li>
<a href="http://aext.net/category/css/" title="CSS & XHTML"> CSS & XHTML</a>
</li>
<li>
<a href="http://aext.net/category/php/" title="Resources"> PHP</a>
</li>
<li>
<a href="http://aext.net/category/resources/" title="Resources"> Resources</a>
</li>
<li>
<a href="http://aext.net/category/theme-layout/" title="Themes & Layouts"> Themes & Layouts</a>
</li>
</ul>
</div>


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi .... </p>
</div>
</div>

CSS

Код ниже используется для стилизации обертки:

Code
div#wrap {
position: relative;
width: 800px;
overflow: hidden;
margin: 100px auto 0px auto;
}

Обязательно установите overflow hidden. Это необходимо для того, чтобы при завершении анимации, панель, которую Вы хотите спрятать, выезжала влево и пряталась за оберткой. Мы используем значение hidden overflow для прятанья этой панели.

CSS ниже отвечает за кнопку показа\прятанья панели:

Code
a#controlbtn{
color: #333;
text-decoration: none;
display: inline-block;
padding-left: 20px;
}

a#controlbtn.open {
background: transparent url(images/toggle_minus.png) no-repeat left center;
}

a#controlbtn.close {
background: transparent url(images/toggle_plus.png) no-repeat left center;
}

Мы будем менять кнопку в зависимости от состояния панели.

Остальной CSS код:

Code
div#linkblock {
float: left;
width: 140px;
margin-left: -150px;
border-right: solid 1px #DDDDDD;
}

div#maincontent {
position: relative;
margin-left: 150px;
}

#yourlist {
list-style: none;
margin: 0px;
padding: 0px;
}
#yourlist li {
padding: 3px 5px 3px 0px;
position: relative;
margin-top: 0;
margin-right: 0;
margin-bottom: 5px;
margin-left: 0;

}

#yourlist li a {
color: #D4432F;
padding: none;
margin: none;
}

h4 {
margin: 0px;
font-size: 16px;
line-height: 26px;
color: #333333;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
clear: none;
}

Так как позиционирование div#linkblock абсолютное, div#mainconten должен иметь относительное.

Работа с JavaScript

В начале, мы вызываем функцию $(document).ready() для выполнения скрипта только после загрузки страницы.

Code
<script type="text/javascript">
$(document).ready(function() {

// Будем работать тут
});
</script>

Далее мы напишем немного кода для того, чтобы следить за нажатием кнопки.

e.preventDefault(); используется для отмены обычной работы ссылки. При нажатии на ссылку - ничего не произойдет.

Code
$("a#controlbtn").click(function(e) {

e.preventDefault();

....

});

Далее нам необходимо сообщить скрипту, когда выезжать влево, а когда вправо.
Code
var slidepx=$("div#linkblock").width() + 10;

if (parseInt($("div#maincontent").css('marginLeft'), 10) < slidepx) {

$(this).removeClass('close').html('Hide your stuffs');

margin = "+=" + slidepx;

} else {

$(this).addClass('close').html('Show your stuffs');

margin = "-=" + slidepx;

}

slidepx это количество пикселей, на которое будем двигать панель. Это значение в нашем случае равняется ширине панели, которую мы хотим спрятать + отступы панели (10 пикселей).

В конце, необходимо анимировать панель с помощью кода ниже.
Первая строка кода используется для определения состояния панели.

Code
if ( !$("div#maincontent").is(':animated') ) {

$("div#maincontent").animate({
marginLeft: margin,
}, 300);

}

Анимируем с помощью плагина easing:
Code
if ( !$("div#maincontent").is(':animated') ) {

$("div#maincontent").animate({
marginLeft: margin,
}, {
duration: 'slow',
easing: 'easeOutQuint'
});

}

Панель готова!

Источник: www.aext.net


 
Форум » Скрипты » Другие Скрипты » Горизонтальная выезжающая панель с помощью jQuery
  • Страница 1 из 1
  • 1
Поиск:
мини-чат
Tagis Балаболка
Инфо сайта
Инфо форума

Все права защищены! shalbuzdag-666.ucoz.ru © 2009 – 2024 ()
уЧётчик сайта