Основы 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>

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

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