Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Практическое применение cookie
Индивидуальная настройки параметров Web-страниц. Хранение товара, выбранного посетителем виртуального магазина. Можно выбрать товары на разных страницах, а потом сделать общий заказ. Хранение текущего состояния сетевой игры. Пример <html> <head> <meta http-equiv=Content-Type content="text/html; charset=windows-1251"> </head> <body> <script type="text/javascript"> <!-- function parseCookie() { // Разделение cookie. var cookieList = document.cookie.split("; "); // Массив для каждого cookie в cookieList. var cookieArray = new Array(); for (var i = 0; i < cookieList.length; i++) { // Разделение пар имя-значение. var name = cookieList[i].split("="); // Декодирование и добавление в cookie-массив. cookieArray[unescape(name[0])] = unescape(name[1]); } return cookieArray; } function setCookie(visits) { /* Счетчик числа посещений и определение срока хранения в 1 год. */ var expireDate = new Date();
// Установка даты автоматического удаления. expireDate.setYear(expireDate.getYear() + 1); // Сохранение числа посещений. document.cookie = "Visits=" + visits + "; expires=" + expireDate.toGMTString() + ";"; } if ("" == document.cookie) { // Инициализация cookie. setCookie(1); document.write("<H3>Поздравляю Вас с первым посещением моего сайта.</H3>"); } else { // Анализ cookie. var cookies = parseCookie(); // Вывод приветствия, числа посещений и увеличение числа посещений на 1. document.write("<H3>Рад снова видеть Вас на моем сайте! Число Ваших посещений - " + cookies.Visits++ + "!</H3>"); // Обновление cookie. setCookie(cookies.Visits); } //--> </script> </body> </html> Библиотека jQuery Исчезающие блоки» Этот пример покажет как можно красиво и легко растворять элементы. При закрытии верхнего блока происходит сдвиг остальных блоков вверх. Рассмотрим один из блоков (Рисунок 1). Когда пользователь кликает по картинке (крестик) <img class=”delete”>, будет найден родительский элемент <div class=”pane”>, и его прозрачность будет медленно изменяться от opacity= 1.0 до opacity=hide: $(this).parents(".pane").animate({ opacity: 'hide' }, "slow"); Для того, чтобы увеличить скорость изменения прозрачности необходимо изменить параметр slow на необходимый пользователю (например fast).
Рисунок 1 – составляющие блока Код программы: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery. Disappear</title>
<!-- проинициализируем библиотеку jquery --> <script type='text/javascript' src='jquery.js'></script>
<script type="text/javascript"> $(document).ready(function(){ /*Событие ready() устанавливает обработчик готовности дерева DOM.*/ $(".pane.delete").click(function(){ /*параметры анимации исчезновения блоков (тип и скорость исчезновения)*/ $(this).parents(".pane").animate({ opacity: 'hide' }, "slow"); }); }); </script> <!-- Размер блоков, цвет фона, цвет шрифта, толщина границ и т.д. --> <style type="text/css"> body { margin: 10px auto; /*margin устанавливает величину отступа от каждого края элемента.*/ width: 470px; /*width устанавливает блочных или заменяемых элементов*/ } h3 { margin: 0; padding: 0 0.3em; /*настройки для заголовка блока*/ } p { margin: 0; padding: 0 0.5em; /*настройки для поля с текстом внутри блока*/ } .pane { background: #edf5e1; /* задает цвет фона блока*/ padding: 10px 20px 10px; /*значение полей вокруг содержимого элемента*/ position: relative;/*способ позиционирования элемента относительно окна браузера*/ border-top: solid 2px #c4df9b; /*толщина и цвет верхней границы*/ } .pane.delete { position: absolute; /*позиция кнопки*/ top: 10px; /*расстояние сверху*/ right: 10px; /*расстояние справа*/ cursor: pointer; } </style> </head> <body> <!-- Содержимое блоков --> <div class="pane"> <h3>Простой заголовок</h3> <!-- текст внутри блоков --> <p>Это пример простого исчезновения блока.</p> <!-- значок "крестик" --> <img src="delete.png" alt="delete" class="delete" /> </div> <div class="pane"> <h3>Простой заголовок</h3> <!-- текст внутри блоков --> <p>Это пример простого исчезновения блока.</p> <!-- значок "крестик" --> <img src="delete.png" alt="delete" class="delete" /> </div> <div class="pane"> <h3>Простой заголовок</h3> <!-- текст внутри блоков --> <p>Это пример простого исчезновения блока.</p> <!-- значок "крестик" --> <img src="delete.png" alt="delete" class="delete" /> </div> <div class="pane"> <h3>Простой заголовок</h3> <!-- текст внутри блоков --> <p>Это пример простого исчезновения блока.</p> <!-- значок "крестик" --> <img src="delete.png" alt="delete" class="delete" /> </div> <div class="pane"> <h3>Простой заголовок</h3> <!-- текст внутри блоков --> <p>Это пример простого исчезновения блока.</p> <!-- значок "крестик" --> <img src="delete.png" alt="delete" class="delete" />
</div> </body> </html> Результат: Результат работы кода можно увидеть на рисунках 2 – 4. На рисунке 2 изображено начальное положение блоков с текстом. После нажатия на кнопку в виде крестика, верхний блок закрывается с анимацией «затухания» (рисунок 3), после чего происходит сдвиг нижних блоков вверх (рисунок 4).
Рисунок 2 - начальное положение блоков
Рисунок 3 – анимация исчезновения блока.
Рисунок 4 – сдвиг нижних блоков вверх.
Выдвижная панель» В следующем примере создается слайд-панель, которая двигается вверх/вниз по клику на ссылке. Реализуется это следующим образом: по клику на ссылку, будет переключаться её класс (между “active” и “btn-slide”), а панелька с id=”panel” будет выдвигаться/прятаться (рисунок 5). (класс “active” изменяет позицию фонового изображения)
Рисунок 5 – элементы слайд-панели
Код программы: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery. Simple Slide Panel</title> <!--удаленно подключаем библиотеку jquery--> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type="text/javascript"> /*Событие ready() устанавливает обработчик готовности дерева DOM.*/ $(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; } h3 {/*текст внутри панели*/ margin: 0; padding: 0 0.3em; } #panel { background: #B0C4DE;/*цвет фона панели*/ height: 200px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #FF8C00; /*цвет и толщина границы*/ /*подключаем файл-изображение кнопки*/ background: url(images/btn-slide.gif) no-repeat center top; } .btn-slide { /*редактирование кнопки слайд-панели*/ /*подключаем файл-изображение стрелки*/ background: url(images/white-arrow.gif) 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"> <h3>Это простейший пример, демонстрирующий работу слайд-панели.</h3> </div> <p class="slide"><a href="#" class="btn-slide">Слайд-панель</a></p> </body> </html>
Результат: Результат работы кода представлен на рисунках 6 – 7. Начальное, свернутое положение слайд-панели показано на рисунке 6. Развёрнутое положение показано на рисунке 7.
Рисунок 6 – начальное свернутое положение панели
Рисунок 7 – развернутая панель Гармошка» В данном примере продемонстрировано создание эффекта «гармошки». Первой строчкой происходит добавление класса “active” первому элементу <h3> внутри <div class=”accordion”> (класс ”active” отвечает за позиционирования фонового рисунка – иконки со стрелочкой). Во второй строчке спрячем все не первые <p> элементы внутри <div class=”accordion”>.
Для регулировки скорости сворачивания и разворачивания блоков необходимо изменить параметры в данном фрагменте кода: $(this).next("p").slideToggle("slow")/*скорость развертывания*/ .siblings("p:visible").slideUp("slow");/*скорость свертывания*/
Рисунок 8 – содержимое «гармошки» Код программы: <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery. Accordion 1</title> <!--проинициализирумем библиотеку jquery--> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type="text/javascript"> $(document).ready(function(){
$(".accordion h3:first").addClass("active"); /*позиционирование фонового рисунка*/ $(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){ $(this).next("p").slideToggle("slow")/*скорость развертывания*/ .siblings("p:visible").slideUp("slow");/*скорость свертывания*/ $(this).toggleClass("active"); $(this).siblings("h3").removeClass("active"); });
}); </script> <style type="text/css"> body { margin: 10px auto;/*величина отступа от каждого края элемента.*/ width: 570px; /*Устанавливает ширину блочных или заменяемых элементов*/ /*цвет и стиль текста*/ font: 75%/120% Arial, Helvetica, sans-serif; } .accordion { width: 480px; /*Устанавливает ширину блочных или заменяемых элементов*/ border-bottom: solid 1px #c4c4c4;/*одновременно установливает толщину, стиль и цвет границы внизу элемента.*/ } .accordion h3 { /*изменение цвета фона заголовка*/ /*подключение файла-изображения (стрелка)*/ background: #FAEBD7 url(images/arrow-square.gif) no-repeat right -51px; padding: 7px 15px; /*значение полей вокруг содержимого элемента. */ margin: 0; /*величина отступа от каждого края элемента.*/ font: bold 120%/100% Arial, Helvetica, sans-serif; border: solid 1px #c4c4c4; /*толщина, стиль и цвет границы*/ border-bottom: none; cursor: pointer;/*Устанавливает форму курсора, когда он находится в пределах элемента.*/ } .accordion h3:hover { /*цвет выделенного блока*/ background-color: #87CEEB; } .accordion h3.active { background-position: right 5px; } .accordion p { /*цвет фона внутри блока*/ background: #FAF0E6; margin: 0;/*величина отступа от каждого края элемента.*/ padding: 10px 15px 20px; /*значение полей вокруг содержимого элемента. */ /*цвет и толщина левой и правой границ блоков*/ border-left: solid 1px #c4c4c4; border-right: solid 1px #c4c4c4; } </style> </head> <body> <!--заголовки и текст, содержащийся в блоках--> <div class="accordion"> <h3>Это первый заголовок</h3> <p>Принцип восприятия непредвзято создает паллиативный интеллект, условно. Концепция ментально оспособляет закон внешнего мира. Сомнение раскладывает на элементы неоднозначный структурализм. Смысл жизни профанирует принцип восприятия, отрицая очевидное. Жизнь философски ассоциирует напряженный постмодернизм. Объект деятельности означает конфликт. Согласно предыдущему, конфликт, в рамках сегодняшних воззрений, ясен не всем.</p>
<h3>А это второй заголовок</h3> <p>Принцип восприятия непредвзято создает паллиативный интеллект, условно. Концепция ментально оспособляет закон внешнего мира. Сомнение раскладывает на элементы неоднозначный структурализм. Смысл жизни профанирует принцип восприятия, отрицая очевидное. Жизнь философски ассоциирует напряженный постмодернизм. Объект деятельности означает конфликт. Согласно предыдущему, конфликт, в рамках сегодняшних воззрений, ясен не всем.</p> <h3>Во всех блоках одинаковый текст</h3> <p>Принцип восприятия непредвзято создает паллиативный интеллект, условно. Концепция ментально оспособляет закон внешнего мира. Сомнение раскладывает на элементы неоднозначный структурализм. Смысл жизни профанирует принцип восприятия, отрицая очевидное. Жизнь философски ассоциирует напряженный постмодернизм. Объект деятельности означает конфликт. Согласно предыдущему, конфликт, в рамках сегодняшних воззрений, ясен не всем.</p> <h3>Не стоит верить на слово</h3> <p>Принцип восприятия непредвзято создает паллиативный интеллект, условно. Концепция ментально оспособляет закон внешнего мира. Сомнение раскладывает на элементы неоднозначный структурализм. Смысл жизни профанирует принцип восприятия, отрицая очевидное. Жизнь философски ассоциирует напряженный постмодернизм. Объект деятельности означает конфликт. Согласно предыдущему, конфликт, в рамках сегодняшних воззрений, ясен не всем.</p> <h3>Нужно просмотреть содержимое всех блоков</h3> <p>Принцип восприятия непредвзято создает паллиативный интеллект, условно. Концепция ментально оспособляет закон внешнего мира. Сомнение раскладывает на элементы неоднозначный структурализм. Смысл жизни профанирует принцип восприятия, отрицая очевидное. Жизнь философски ассоциирует напряженный постмодернизм. Объект деятельности означает конфликт. Согласно предыдущему, конфликт, в рамках сегодняшних воззрений, ясен не всем.</p> </div> </body> </html>
Результат: Результат работы кода продемонстрирован на рисунках 9 – 10. Изначально, раскрыт только первый блок, в свою очередь вс остальные блоки находястся в свернутом состоянии (рисунок 9). Щелкнув на заголовке другого блока предыдущий блок сворачивается и раскрывается выбранный нами блок.
Рисунок 9 – Демонстрация «гармошки»
Рисунок 10 – Демонстрация «гармошки» Связанная анимация Данный пример демонстрирует связанную анимацию. Он поможет лучше понять jQuery. Всего несколько строк кода заставят квадрат двигаться, изменять размер и прозрачность. Line 0: когда прогрузилась страница (DOM готов к манипуляциям)
Изменение прозрачности элемента показана на рисунке 11.
Рисунок 11 – изменение прозрачности квадратом. Код программы:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery. Chainable Transition Effects</title> <!--удаленное подключение библиотеки jquery--> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> <script type="text/javascript"> $(document).ready(function(){ $(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false; }); }); </script> <style type="text/css"> body { margin: 20px auto; /*величина отступа от каждого края элемента.*/ padding: 0; width: 580px; /*стиль, шрифт и размер текста*/ font: 80%/120% Arial, Helvetica, sans-serif; } a { font-weight: bold; color: #000000; } #box { background: #6699FF; /*цвет фона квадрата*/ height: 100px; /*Устанавливает высоту блочных или заменяемых элементов*/ width: 100px; /*Устанавливает ширину блочных или заменяемых элементов*/ position: relative; } </style> </head> <body> <p><a href="#" class="run">Run</a></p> <div id="box"> </div> </body> </html> Результат: Результат работы кода представлен на рисунках 12 – 14. Начальное положение квадрата показано на рисунке 12. После нажатия кнопки квадрат начинает движение, изменяя свои прозрачность и размер (рисунки 13 – 14).
Рисунок 12 – Начальное положение квадрата
Рисунок 13 – изменение прозрачности
Рисунок 14 – изменение размера
|
|||||||||||||||
|
|
Последнее изменение этой страницы: 2016-12-28; просмотров: 261; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 13.58.77.98 (0.138 с.) |
