Форма входа

mvcreative

Старая форма входа

  • Страница 1 из 1
  • 1
Модератор форума: BSide  
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Делаем выпадающий неупорядоченный список с помощью jQuery и
Делаем выпадающий неупорядоченный список с помощью jQuery и
JackДата: Понедельник, 21.06.2010, 15:58 | Сообщение # 1
Шептун
Группа: Пользователи
Пользователь №: 9
Сообщений: 32
Награды: 0
Репутация: 2
Статус: оффлайн
Список - это один из наиболее важных элементов на вэб сайте. Существует множество способов сделать список более интересным с помощью CSS, но можно сделать его еще более интригующим, используя jQuery и CSS3. С помощью этих вэб технологий можно создавать потрясающие эффекты для HTML элементов. В данном уроке мы будет испльзовать CSS3 для придания списку лучшего вида и jQuery, чтобы добавить интерактивности.

Подготовка

В данном уроке мы подготовим расширяющийся список с потрясающим видом, который можно получить с помощью CSS3.

Нам нужно создать отдельную папку для файлов урока и скачать туда библиотеку jQuery.

Теперь создадим HTML документ, и сохраним его как index.html в тоже папке, что и библиотека JQuery.

Затем создадим CSS файл и сохраним его в той же папке как style.css.

Установка

Теперь нужно задекларировать наши файлы. Мы декларируем style.css. и jQuery бибилиотеку в нашем HTML документе следующим образом:

Code
<link href="style.css" rel="stylesheet" type="text/css" />
<script  type="text/javascript" src="jquery.js"></script>

Работаем над нашим списком

Теперь нужно создать разметку в нашем документе. Мы будем использовать неупорядоченный список в нашем уроке, но адаптация упорядоченного списка очень проста, нужно только поменять ul на ol, или использовать оба тэга в нашем коде jQuery. Итак, вот наша разметка. Контейнер div сожержит заголовок h3 и неупорядоченный список:

Code
<div class="box">
     <h3>Список №1<span class="expand">+</span></h3>
     <ul>
         <li>Пункт №1</li>
         <li>Пункт №2</li>
         <li>Пункт №3</li>
         <li>Пункт №4</li>
     </ul>
</div>

Для чего нужен span, который сожержит символ "+"? Мы будем использовать его для разворачивания и сворачивания списка по нажатию кнопки мыши.

Теперь добавим стили CSS, которые помогут придать нашему списку более профессиональный вид. Начнем с задания глобальных правил для удаления всех полей и отступов для всех элементов и установим фон и набор шрифтов:

Code
* { margin: 0; padding: 0; }
body { background: #f0f0f0; font-family: Arial, Helvetica, sans-serif; }

Теперь мы зададим стили для контейнера div и используем некоторые правила CSS3, чтобы сделать его более интересным. Чтобы увидеть функционал CSS3 во всей красе нужно использовать браузер на основе Gecko (Mozilla, и т.п.) или браузер Webkit (Chrome, Safari, и т.п.):

Code

.box {
width: 250px;
margin: 10px auto;
background: #fff;
border: 1px solid #d1d1d1;
padding: 4px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

На рисунке показан результат применения стилей:

Теперь зададим стили для заголовка h3 и его секции span:

Code
h3 {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px;
background: -moz-linear-gradient(center top, #efefef 0%,#e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #efefef),color-stop(1, #e0e0e0));
border: 1px solid #d1d1d1;
color: #c1c1c1;
font-size: 13px;
font-weight: normal;
text-shadow: 1px 1px 0px #fff;
}
h3 span { float: right; cursor: pointer; }
h3 span:hover { text-shadow: 0px 0px 3px #a1eeff; }

Для фонa используется правило CSS3, которое задает градиент. Очень трудно запомнить синтаксис, поэтому можно использовать сайт CSS Corners для генерации других стилей. На картинке ниже показан результат применения стилей к тэгу h3.

Теперь займемся элементами списка. Добавим несколько стилей для них, чтобы завершить дизайн нашего списка:

Code
ul { padding: 5px; overflow: hidden; }
ul li { font-size: 13px; list-style-type: square; list-style-position: inside; color: #a1a1a1; padding: 5px; }

Теперь наш список имеет отличный вид и можно приступать к работе с jQuery.
Разберемся с jQuery

Теперь нам надо создать пользовательский скрипт. Мы создадим его в нашем HTML документе, добавим тэг сразу после декларирования jQuery:

Code
<script type="text/javascript">
</script>

Все наши функции и код будут размещены внутри данного тэга. Теперь приступим к добавлению кода, который нам нужен. Ниже приводятся куски кода с объяснениями того, что происходит.

Сначала наш документ загружается и, когда он загружен на 100%, скрипт приступает к действию:

Code
$(document).ready(function(){

});

Мы помещаем весь код нашего скрипта внутрь выше описанной функции. Сначала нам нужно скрыть неупорядоченный список с помощью следующего кода:

Code
$("ul").hide();

Теперь добавляем функцию, которая сворачивает/разворачивает список:

Code
$("h3 span").click(function(){
$(this).parent().next().slideToggle();
});

Давайте разберем долее подробно, что происходит в данном коде. Когда вы нажимаете кнопку мыши на "+", который является элементом h3 span, элемент ul, который является следующим элементом родительского элемента h3 span (это h3) начинает сворачиваться/разворачиватся.

Теперь сделаем наш список боле интересным. Выделим четные строки списка с помощью следующего кода:

Code
$("ul li:odd").css("background-color", "#efefef");

Вот и все!

 
вверх
Angry4178Дата: Суббота, 10.07.2010, 00:59 | Сообщение # 2
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
Jack, Супер.Но есть вопрос:"Можно ли вместо белого фона (при полном открытии меню) поставить свою картинку?


 
вверх
cechДата: Суббота, 10.07.2010, 19:17 | Сообщение # 3
Генерал печатного дела
Группа: Администраторы
Пользователь №: 1
Сообщений: 1706
Награды: 59
Репутация: 108
Статус: оффлайн
Zloi конечно можно! все изменения стиля через css, и цвет и картинка и т.д.


 
вверх
Angry4178Дата: Суббота, 10.07.2010, 20:00 | Сообщение # 4
Спикер
Группа: Пользователи
Пользователь №: 85
Сообщений: 255
Награды: 5
Репутация: 14
Статус: оффлайн
cech, Отлично! Спасибо за информацию...Будем ставить)




Сообщение отредактировал nDiviD - Понедельник, 12.07.2010, 06:03
 
вверх
nDiviDДата: Воскресенье, 11.07.2010, 09:50 | Сообщение # 5
Чего так орать?
Группа: Проверенные
Пользователь №: 21
Сообщений: 614
Награды: 11
Репутация: 39
Статус: оффлайн
Достаточно полезно =) На рулез вообще много интересных уроков smile


Web-create пати uNiceGroup =) Порно бесплатно!
 
вверх
MaximalusДата: Четверг, 07.03.2013, 14:42 | Сообщение # 6
Авы нет
Молчун
Группа: Пользователи
Пользователь №: 2581
Сообщений: 1
Награды: 0
Репутация: 0
Статус: оффлайн
У меня конфликтует этот код непосредственно с блоком меню.
Ставлю код на страницу.
Код работает, но блок меню пустой, он есть и стоит на своём месте но пустой
 
вверх
Форум MVCreative » сделаем креативный uCoz » Общение и архив » Архив старых тем » Делаем выпадающий неупорядоченный список с помощью jQuery и
  • Страница 1 из 1
  • 1
Поиск: