Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Drop-Down (выпадающее) меню (вертикальное).

⇐ ПредыдущаяСтр 16 из 25Следующая ⇒

Еще одна реализация выпадающего меню. Пример аналогичен предущему, только основное отличие заключается в положении меню. В данном примере показано реализация вертикального drop-меню. Компоненты показаны на рисунке ниже.

Рисунок 19 – элементы вертикального drop-down меню

Код программы:

<head>

<title>Выпадающее меню</title>

$(document).ready(function(){

// добавить обработчик события hover

$('.topmenu ul li').hover(

function() {

$(this).find('ul:first').stop(true, true);// останавливаем всю текущую анимацию

// находим элемент ul и вызываем анимацию slideDown

$(this).find('ul:first').slideDown();

function() {

$(this).find('ul:first').slideUp('fast');

}

); // всем элементам меню с вложенностью добавить символ »

$('.topmenu li:has(ul)').find('a:first').append('»');

});

</script>

body {

margin: 0 auto;

padding: 0;

font: 75%/120% Arial, Helvetica, sans-serif;

}

a:focus {

outline: none;

}

.topmenu {

float:left;

}

.topmenu ul,.topmenu li{

list-style:none;

margin: 0;

padding: 0;

}

.topmenu ul li {

position:relative;

width:140px;

}

.topmenu ul li a{

display:block;

padding:10px 10px 10px 30px;

background:url('images/window.gif') no-repeat 10px center;

color: #0000FF;

text-decoration: none;

border:1px solid #999;

margin:1px;

}

.topmenu ul li a:HOVER{

color: #FF0000;

background-color:#E6E6FA;

}

.topmenu ul li ul {

display: none;

position:absolute;

top:0px;

left:140px;

}

</style>

</head>

<body>

<ul>

<ul>

<li><a href="#" title="Элемент 1.1">Элемент 1.1</a></li>

<li><a href="#" title="Элемент 1.2">Элемент 1.2</a></li>

<li><a href="#" title="Элемент 1.3">Элемент 1.3</a>

<ul>

<li><a href="#" title="Элемент 1.1.1">Элемент 1.1.1</a></li>

<li><a href="#" title="Элемент 1.1.2">Элемент 1.1.2</a></li>

<li><a href="#" title="Элемент 1.1.3">Элемент 1.1.3</a></li>

</ul>

</li>

</ul>

</li>

<ul>

<li><a href="#" title="Элемент 2.1">Элемент 2.1</a></li>

<li><a href="#" title="Элемент 2.2">Элемент 2.2</a></li>

<li><a href="#" title="Элемент 2.3">Элемент 2.3</a></li>

</ul>

</li>

<ul>

<li><a href="#" title="Элемент 3.1">Элемент 3.1</a></li>

<li><a href="#" title="Элемент 3.2">Элемент 3.2</a></li>

<li><a href="#" title="Элемент 3.3">Элемент 3.3</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>

Результат:

Рисунок 20 – демонстрация работы меню

Слайд-меню.

В данном примере показана реализация слайд-меню, которое раскрывается как с верхней, так и с нижней стороны страницы. Пример аналогичен примеру со слайд-панелью (пример 2). После клика по ссылке с классом “btn-slide”, выезжает панель с меню. Элементы меню показаны на рисунке 21.

Рисунок 21 – элементы меню

Код программы:

<head>

<title>Слайд-меню.</title>

// когда страница загрузится

$(document).ready(function(){

// вешаем обработчик на ссылку с классом "btn-slide" (верхнее меню)

$(".btn-slide").click(function(){

// выдвигаем/прячем панель с id = panel1

$("#panel1").slideToggle("slow");

// изменяем класс самой ссылки

$(this).toggleClass("active");

// и ничего не делаем дальше (дабы не было перехода по ссылки)

return false;

});

// вешаем обработчик на ссылку с классом "btn-slide2" (нижнее меню)

$(".btn-slide2").click(function(){

// выдвигаем/прячем панель с id = panel2

$("#panel2").slideToggle("slow");

// изменяем класс самой ссылки

$(this).toggleClass("active2");

// и ничего не делаем дальше (дабы не было перехода по ссылки)

return false;

});

</script>

body {

margin: 0 auto;

padding: 0;

width: 520px;

font: 75%/120% Arial, Helvetica, sans-serif;

}

a:focus {

outline: none;

}

.panel {

background: #ccc;

height: 75px;

display: none;

}

.panel ul {

margin: 0;

padding: 0 15px;

float:left;

list-style:none;

border-right: 1px solid #000;

}

.panel ul li{

margin: 6px;

padding: 0;

}

.panel ul li a{

font-weight:bold;

color: #333;

}

.slide {

margin: 0;

padding: 0;

border-top: solid 4px #aaa;

background: url(images/btn-slide.gif) no-repeat center top;

}

.slide2 {

margin: 0;

padding: 0;

border-bottom: solid 4px #aaa;

background: url(images/btn-slide2.gif) no-repeat center top;

}

.btn-slide,.btn-slide2 {

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;

}

.btn-slide2 {

background: url(images/white-arrow.gif) no-repeat right 15px;

height: 25px;

padding: 15px 10px 0 0;

}

.active {

background-position: right 12px;

}

.active2 {

background-position: right -45px;

}

.bottom {

position:absolute;

bottom:0px;

margin: 0 auto;

padding: 0;

width: 520px;

}

</style>

</head>

<body>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

</div>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

<ul>

<li><a href="#" title="Элемент 1">Элемент 1</a></li>

<li><a href="#" title="Элемент 2">Элемент 2</a></li>

<li><a href="#" title="Элемент 3">Элемент 3</a></li>

</ul>

</div>

</body>

</html>

Результат:

Результат работы кода представлен на рисунке 22. По нажатию кнопки «меню» на верхней и / или нижней панели происходит раскрытие самой панели и демонстрация содержащейся в ней элементов меню:

Рисунок 22 – демонстрация работы меню

Кликабельные блоки.

Этот пример демонстрирует как сделать кликабельным блок с текстом, а не только ссылку. Каждый блок имеет описание соответственной WEB-страницы. По нажатию на блок происходит переход по URL.

Создадим список <ul> с классом class=”pane-list” и мы хотим сделать элементы <li> кликабельными. Для начала привяжемся к событию click для элемента “.pane-list li”; когда пользователь будет кликать по элементу списка, данная функция произведет поиск тэга <a> и сделает редирект на страницу указанную в атрибуте href.

Рисунок 23 – описание элементов

Код программы:

<head>

<title>jQuery. Block clickable</title>

$(document).ready(function(){

//привязка к событию click для элемента “.pane-list li”

$(".pane-list li").click(function(){

//поиск тэга <a> и редирект на страницу указанную в атрибуте href

window.location=$(this).find("a").attr("href");return false;

});

</script>

body {

margin: 10px auto;

width: 470px;

}

a {

color: #333300;

text-decoration: none;

}

a:visited {

color: #333300;

}

a:hover {

color: #333300;

text-decoration: underline;

}

h3 {

margin: 0;

padding: 0 0.3em;

}

p {

margin: 0;

padding: 0 0.5em;

}

.pane-list {

margin: 0;

padding: 0;

list-style: none;

}

.pane-list li {

background: #ecfad7;

padding: 10px 20px 10px;

border-top: solid 1px #c4df9b;

cursor: pointer;

}

.pane-list li:hover {

background: #f6ffe9;

}

</style>

</head>

<body>

<li>

<h3>Komsomolsk-on-Amur State Technical University</h3>

<p>...учитесь с нами, учитесь у нас... <a href="http://www.knastu.ru/"></p>

</li>

<li>

<h3><a href="http://www.webdesignerwall.com">Web Designer Wall</a></h3>

<p>A wall of design ideas, web trends, and tutorials</p>

</li>

<li>

<h3>Best Web Gallery</h3>

<p>Featuring the best <a href="http://bestwebgallery.com">CSS and Flash web sites</a></p>

</li>

<li>

<h3>N.Design Studio</h3>

<p><a href="http://www.ndesign-studio.com">Blog</a> and design portfolio of Nick La</p>

</li>

</ul>

</body>

</html>

Результат:

Результат работы кода показан на рисунке 24. После нажатия на определенный блок, происходит переход на соответствующую WEB-страницу.

Рисунок 24 – демонстрация работы

AJAX. jQuery(..).load

Данный метод может принимать следующие параметры:

· url - url запрашиваемой страницы

· data - передаваемые данные (необязательный параметр)

· callback - функция которой будет скормлен результат (необязательный параметр)

Код программы:

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function(){

$("button").click(function(){

$("#div1").load("demo_test.txt");

});

</script>

</head>

<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>

</html>

Результат:

До нажатия кнопки:

Рисунок 25 – демонстрация работы

После нажатия кнопки:

Рисунок 26 – демонстрация работы

AJAX. jQuery.get

Загружает страницу, используя для передачи данных GET запрос. Может принимать следующие параметры:

1. url запрашиваемой страницы

2. передаваемые данные (необязательный параметр)

3. callback функция, которой будет скормлен результат (необязательный параметр)

4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

Код программы:

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function(){

$("button").click(function(){

$.get("demo_test.asp",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

</script>

</head>

<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>

</html>

Результат:

Рисунок 27 – демонстрация работы

Рисунок 28 – демонстрация работы

AJAX. jQuery.post

Данный метод аналогичен предыдущему, лишь передаваемые данные уйдут на сервер посредством POST’а. Может принимать следующие параметры:

1. url запрашиваемой страницы

2. передаваемые данные (необязательный параметр)

3. callback функция, которой будет скормлен результат (необязательный параметр)

4. тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

Код программы:

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function(){

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"Donald Duck",

city:"Duckburg"

function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

</script>

</head>

<body>

<button>Send an HTTP POST request to a page and get the result back</button>

</body>

</html>

Результат:

Рисунок 29 – демонстрация работы

Рисунок 30 – демонстрация работы

AJAX. jQuery.ajax

Это самый основной метод, а все последующие методы лишь обертки для метода jQuery.ajax. У данного метода лишь один входной параметр – объект включающий в себя все настройки (выделены параметры которые стоит запомнить):

§ async – асинхронность запроса, по умолчанию true

§ cache – вкл/выкл кэширование данных браузером, по умолчанию true

§ contentType – по умолчанию “application/x-www-form-urlencoded”

§ data – передаваемые данные – строка иль объект

§ dataFilter – фильтр для входных данных

§ dataType – тип данных возвращаемых в callback функцию (xml, html, script, json, text, _default)

§ global – тригер – отвечает за использование глобальных AJAX Event’ов, по умолчанию true

§ ifModified – тригер – проверяет были ли изменения в ответе сервера, дабы не слать еще запрос, по умолчанию false

§ jsonp – переустановить имя callback функции для работы с JSONP (по умолчанию генерируется на лету)

§ processData – по умолчанию отправляемые данный заворачиваются в объект, и отправляются как “application/x-www-form-urlencoded”, если надо иначе – отключаем

§ scriptCharset – кодировочка – актуально для JSONP и подгрузки JavaScript’ов

§ timeout – время таймаут в миллисекундах

§ type – GET либо POST

§ url – url запрашиваемой страницы

Локальные AJAX Event’ы:

§ beforeSend – срабатывает перед отправкой запроса

§ error – если произошла ошибка

§ success – если ошибок не возникло

§ complete – срабатывает по окончанию запроса

Для организации HTTP авторизации:

§ username – логин

§ password – пароль

Код программы:

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function(){

$("button").click(function(){

$.ajax({url:"demo_test.txt",success:function(result){

$("#div1").html(result);

}});

});

</script>

</head>

<body>

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

<button>Get External Content</button>

</body>

</html>

Результат:

Рисунок 31 – демонстрация работы

Рисунок 32 – демонстрация работы

Для работы с библиотекой JQuery, ее необходимо проинициализировать. Это можно осуществить двумя способами.

А) Предварительно скачать библиотеку с официального сайта http://jquery.com и сохранив ее на компьютер. Затем в коде указать путь до файла библиотеки.

Б) Библиотеку можно подключить удаленно.

С официального сайта: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

С хостинга JS-библиотек Google: <script src="http://ajax.googleapis.com/ajax/libs/jquery/ 1 /jquery.min.js"></script>

⇐ Предыдущая 11 12 13 14 151617 18 19 20 Следующая ⇒

Читайте также:

Техника нижней прямой подачи мяча

Комплекс физических упражнений для развития мышц плечевого пояса

Стандарт Порядок надевания противочумного костюма

Общеразвивающие упражнения без предметов

Последнее изменение этой страницы: 2016-12-28; просмотров: 232; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.138.174.174 (0.216 с.)