jQuery (пример 1) - Форум
Включить музыку | Понедельник, 05 Дек 2016, 5.21.00| Главная | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Архив - только для чтения
Форум » Корзина » Архив » jQuery » jQuery (пример 1) (слайд-панель)
jQuery (пример 1)
veterokuaДата: Среда, 20 Янв 2010, 7.14.04 | Сообщение # 1
Генерал-полковник
Группа: Администраторы
На форуме с: 11 Окт 2009
Награды: 93
Сообщений: 1647
< >
Статус:
~ Мои награды ~
jQuery – это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании.
Вначале идем на домашнюю страницу
jQuery (домашняя страница)
Качаем или точнее сказать сохраняем в свой комп
Потом заливаем себе на сайт
Далее в на страничке где мы собираемся вставлять jQuery, должны проинициализировать код
Выглядет это так
Code

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Приведу к примеру код страницы

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Пример</title>
<script type="text/javascript" src="http://komu-za-40.ucoz.kz/veterokua/jquery-1.4.js"></script>
</head>
</html>

Как из кода видно я в свою папку veterokua закачал jquery-1.4.js
При создании веб страницы на которой будет применяться эффект проинициализировать строчкой

Code
<script type="text/javascript" src="http://komu-za-40.ucoz.kz/veterokua/jquery-1.4.js"></script>

Основные моменты Вам поможет понять следующая диаграмма:

Для того чтобы понимать как работает селектор Вам все-же необходимы базовые знания CSS, т.к. именно от принципов CSS отталкивается селектор jQuery:

* $(“#header”) – получение элемента с id=”header”
* $(“h3″) – получить все <h3> элементы
* $(“div#content .photo”) – получить все элементы с классом =”photo” которые находятся в элементе div с id=”content”
* $(“ul li”) – получить все <li> элементы из списка <ul>
* $(“ul li:first”) – получить только первый элемент <li> из списка <ul>

Начнем с простенького примера – слайд-панель, она у нас будет двигаться вверх/вниз по клику на ссылке

Реализуем это следующим образом, по клику на ссылку, у нас будет переключаться её класс (между “active” и “btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться. (класс “active” изменяет позицию фонового изображения, см. CSS файл во вложении).

Code

$(document).ready(function(){
           $(".btn-slide").click(function(){
               $("#panel").slideToggle("slow");
               $(this).toggleClass("active");
           });
});

А вот так это будет выглядеть на нашей пробной странице
Пример

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>О том ,о сем в гостях у Белочки</title>

<script type="text/javascript" src="http://komu-za-40.ucoz.kz/veterokua/jquery-1.4.js"></script>

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

       $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
       });
             
              
});
</script>

<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(http://komu-za-40.ucoz.kz/veterokua/images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
       background: url(http://komu-za-40.ucoz.kz/veterokua/images/) 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;
}
</style>
</head>

<body>

<div id="panel">
       Бла бла бла бла бла
</div>

<p class="slide"><a href="#" class="btn-slide">Пример выдвижной панели </a></p>
<br>
<br>
<br>
<a href="http://komu-za-40.ucoz.kz/forum/52-903-1"><h4>Назад в тему<h4></a>

</body>
</html>

Пример 1

Сообщение отредактировал veterokua - Среда, 20 Янв 2010, 7.42.22
 
oleff4029Дата: Среда, 18 Дек 2013, 7.01.51 | Сообщение # 2
Сержант
Группа: Проверенные
Город: Rīga
На форуме с: 02 Май 2010
Награды: 0
Сообщений: 26
< >
Статус:
Смайл настроения:
~ Мои награды ~
как сделать переключатель табов как на картинке


http://kinomania.ucoz.lv Фильмы, музыка,
 
Форум » Корзина » Архив » jQuery » jQuery (пример 1) (слайд-панель)
Страница 1 из 11
Поиск:
Последние сообщения на форуме
Посетители дня
Посетители:

В гостях у Белчонки © 2016