Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

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

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Остановка ссылок на jquery

.

Первым делом нужно установить для нашего сайта связь с библиотекой jQuery (которую вы загрузили и сохранили ранее) и общим файлом Javascript (с расширением JS). Вы должны добавить на сайт следующий код:

Я сохранил файлы JavaScript в папку js, но вы можете выбрать любой удобный вам вариант. Еще один важный момент: эти два сценария добавлены в самый конец документа перед закрывающим тегом /body. Многие сайты содержат сценарии в начале документов, внутри тегов head/head, и в большинстве книг рекомендуется поступать именно так. Но лучше ставить сценарии в конец, потому что их открытие замедляет загрузку страницы. Да, это довольно сложная тема, даже с элементами науки и техники!

Если вы хотите лучше понять, почему я рекомендую помещать сценарии в конце, прочитайте статью Стива Соудерса (Steve Souders) в Yahoo Developer Network. Или просто поверьте мне на слово.

Добавление значений по умолчанию

Для начала необходимо гарантировать, что сценарии в файле common. j s начнут действовать, только когда документ успешно загрузился:

Пройдемся по полям ввода формы и зададим для каждого из них значение по умолчанию. Начнем с поля с именем:

$(#contactname).val(Введите полное имя):

Заметьте: нужное поле выбирается здесь по i d-атрибуту (#contactname), а значение, которое мы хотим поставить в поле, заключается в кавычки. Введите эту строку в точности так, как указано выше, и поместите ее внутри функции:

$(document).ready(function(){ });.

Теперь сохраните файл и в браузере обновите страницу с контактами. Вы должны увидеть, что в первом текстовом поле ввода сейчас содержится текст-подсказка, как показано на рис. 10.4.

Сейчас создадим несколько таких полей на нашем сайте:

Рис. 10.4. В первом поле формы появился текст

Сохраните файл common, js и обновите страницу в браузере. Теперь все поля должны иметь текст-подсказку (рис. 10.5).

Рис. 10.5. Добавление полезной для пользователей информации в соответствующих полях

Хотя текст-подсказка удобен и полезен, здесь возникает проблема: перед тем как вводить информацию в поле, пользователь должен удалить наш текст. Мы можем помочь ему, добавив следующие строки:

С помощью кода $ (input, texta геа) мы указали в этой строке и текстовое поле, и текстовую область ввода. Это означает «ИЛИ».

Сейчас, когда посетитель, заполняющий форму, ставит курсор в одно из полей, текст в нем автоматически выделяется и можно начинать вводить свои данные, как показано на рис. 10.6.

Рис. 10.6. Перепечатка текста-подсказки с jQuery становится проще

Если где-то здесь вы столкнулись со сложностями, не расстраивайтесь. Вероятность ошибиться, работая с JavaScript, куда выше, чем в случае с HTML и CSS, — сценарии более чувствительны к ошибкам. Помните, что в архиве кода есть все ответы.

Отображение подписей к галерее при наведении указателя мыши

Во втором практическом занятии мы переделаем подписи к фотографиям галереи так, что они будут отображаться при наведении указателя мыши на фото. Первый шаг — скрытие подписей, вот так:

$(figcaption).hide():

Просто и красиво! Но сейчас мы все несколько усложним. Нужно установить собственные настройки для каждого элемента figure, чтобы при наведении указателя мыши на фотографию появлялась подпись только для этой фотографии, а не для всех остальных. Для этого в jQuery есть функция each. Итак:

Далее для каждого элемента figure мы сделаем следующее: О когда указатель мыши будет наведен на изображение, покажем для этого рисунка элемент figcaption;

когда указатель мыши будет выведен за пределы изображения, скроем для этого рисунка элемент figcaption.

Вот как можно выразить эти идеи в коде jQuery:

Как и прежде, не пугайтесь, если все это выглядит слишком сложным. Это лишь образец, и в конце книги нет проверочного теста. Но посмотрите на код и сравните его со строками выше, написанными на русском языке. Вы видите, как точно код jQuery соответствует логике, которую я описал обычным языком? Иногда сложно написать код jQuery не только потому, что не хватает знаний синтаксиса, но и из-за сложности самой логики. Если вам удастся этому научиться, у вас не будет никаких проблем с jQuery.

Хотя предыдущий блок кода работает нормально, все не так гладко, как я здесь говорил. Подпись к фотографии успешно скрывается и отображается в соответствии с движениями мыши, но это происходит слишком быстро и резко. Можно сделать этот эффект более плавным, используя один из готовых инструментов jQuery. Мы применим эффекты Slidellp и SlideDown, установив время, за которое должна появляться или исчезать подпись. Вот каким получится код:

Полный код в файле common. js, дополненный этими изменениями, будет выглядеть вот так.

Если ваш код в точности такой же, как здесь, сохраните его, а затем попробуйте открыть страницу галереи и проверить, как он работает. Ну как? Если что-то не так, помните, что образец кода находится в архиве.

.

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