Основы jQuery, функционал Get Width и плавная прокрутка страницы

Многие современные сайты отличаются развитой интерактивностью.
И важную роль в доступности этой возможности каждому сайту сыграл пакет jQuery, упростивший и развивший интеграцию веб-страниц с языком Javascript.

Основы jQuery

Итак, jQuery - библиотека Javascript, разработанная Джоном Резигом, представленная мировому сообществу в 2006 году, использующий в работе DOM (объектную модель документа).
jQuery распространяется на основании свободной лицензии MIT.
Однако, для её использования недостаточно стандартных возможностей сервера или браузера - что бы воспользоваться на конкретной странице библиотекой jQuery, необходимо подключить внешний Javascript-файл с её ядром.

На этой странице, например, ядро jQuery загружено непосредственно с сайта проекта. Вот таким образом.
Сейчас страница работает с помощью встроенной на сайт версии 1.4.

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

Разумеется, можно Лучше скачать jQuery и использовать стабильную версию с собственного сервера.
Подробнее:
- статья в русской Википедии: http://ru.wikipedia.org/wiki/JQuery;
- оригинальная документация: http://docs.jquery.com/Main_Page.

Теперь посмотрим пару примеров для лучшего понимания.

Функционал Get Width (ширина объектов DOM)

Параграф шириной 25%

Здесь jQuery выведет текст

Исходный код этого фрагмента:

<p class="primer">Параграф шириной 25%</p>

<button id="getparagraph">Ширина параграфа</button>
<button id="getdocument">Ширина документа</button>
<button id="getwindow">Ширина страницы</button>
<button id="getscreen">Ширина монитора</button>

<script>
function showWidth(var1, var2) {
$("div.divprimer").text("Ширина " + var1 +
" — " + var2 + "px.");
}
$("#getparagraph").click(function () {
showWidth("параграфа", $("p.primer").width());
});
$("#getdocument").click(function () {
showWidth("документа", $(document).width());
});

$("#getwindow").click(function () {
showWidth("страницы", $(window).width());
});

$("#getscreen").click(function () {
showWidth("монитора", screen.width);
});

</script>

<div class="divprimer">Здесь jQuery выведет текст</div>

Как можно видеть, в сценарии нужным объектам присвоены уникальные идентификаторы: id="" для кнопок, благодаря которым обработчик клика вызывает именно запрашиваемую нам функцию, и class="" для блоков P и DIV, что бы отличить их от собратьев.
Кстати, для вывода ширины экрана здесь использована функация стандартного javascript — screen.width.

Плавная прокрутка страницы с помощью jQuery

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

Для этого потребовалось следующее.

1. В шапку страницы, в дополнение к ядру, подключён плагин jQuery.ScrollTo, написанный Ариэлем Флеслером: http://flesler.blogspot.com/2007/10/jqueryscrollto.html.

<script src="http://walkmsk.ru/wp-content/plugins/top-link/code.js"></script>

2. В начале страницы поставим ссылку-метку, к которой страницу вернёт скрипт.

<body><a name="#top" id="top"></a>

3. В конце страницы поставим ссылку.

<a href="#top" id="top-link">Вернуться наверх</a>

4. Ну и, не забудем, конечно, обработчик с настройками. Это решение мы тоже не стали выдумывать, а воспользовались несколько сокращённой версией, предложенной Дэвидом Уэлшем: http://davidwalsh.name/jquery-top-link.
Оригинальный обработчик предполагает зафиксированную в определённом месте окна ссылку, которая всплывает по мере прокрутки вниз.
Но у нас вариант попроще - ссылка всегда находится в одном месте.

<script type="text/javascript">

jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200,
ieOffset: 50
}, settings);

};

$(document).ready(function() {
$(’#top-link’).topLink({
min: 400,
fadeSpeed: 500
});

//smoothscroll

$(’#top-link’).click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});

});

</script>

Можно тестировать :)

Вернуться наверх

Рабочие заметки

Бизнес-домены на продажу
26 марта 2017

Искусственный хаос для пользы дела
24 июля 2016

«Дизайн – это работа», советы Майка Монтейро
28 января 2016

Перейти к заметкам

 

Красивая реклама торгового центра в NY
06 ноября 2016

Простота это удобство
26 апреля 2016

Черновые эскизы как этап проектирования
14 декабря 2015

 

Фундаментальные направления маркетинга
28 августа 2016

Технология живого дизайна
16 марта 2016

Простая проверка на скорость загрузки сайта
16 ноября 2015

2009–2017 © Мастерская Дмитрия Кудинова | mail@kud.su

Специальные предложения — Сайт для бизнеса за 9990 | Реклама в Яндекс.Директ

Фотомастерская, Фотоальбом | Вдохновения
Регистрация доменных имён и хостинг