Вы можете подумать про себя: «Что за шумиха с jQuery? Вам нужно скачать кучу плагинов, чтобы даже сделать библиотеку стоящей». Во-первых, это не так. Во-вторых, библиотека jQuery была специально разработана для этой цели. Сохраняя базовую библиотеку настолько маленькой, насколько это возможно — около 16 КБ, — пользователи могут применять дополнительные плагины по своему усмотрению. Сегодня я научу вас, как создать свой первый плагин «Центр» с нуля. Давайте начнем!
Наша цель
Мы хотим создать плагин, который будет динамически корректировать стилизацию указанного элемента, чтобы он всегда оставался вертикально и горизонтально по центру на странице — даже при изменении размера окна браузера. Очень мало требуется заранее. Вам нужно только убедиться, что у вас есть загруженная библиотека jQuery .
Скринкаст
Шаг 1
Первым шагом при создании плагина является добавление пустого файла Javascript. Соглашения об именах гласят, что файл должен называться «YourPluginName.jQuery.js». Создав этот файл, убедитесь, что вы создали ссылку на него в своем документе.
|
1
2
3
4
|
<head>
<script src=»jquery-1.2.6.pack.js» type=»text/javascript»></script>
<script src=»center.jQuery.js» type=»text/javascript»></script>
</head>
|
Шаг 2
Затем вставьте следующий код.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
(function($){
$.fn.center = function(){
var element = this;
$(element).load(function(){
changeCss();
$(window).bind(«resize», function(){
changeCss();
});
function changeCss(){
var imageHeight = $(element).height();
var imageWidth = $(element).width();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(element).css({
«position» : «absolute»,
«left» : windowWidth / 2 — imageWidth / 2,
«top» : windowHeight /2 — imageHeight / 2
});
};
});
};
})(jQuery);
|
Я подробнее расскажу о видео, но я бы хотел остановиться на нескольких ключевых моментах. Каждый раз, когда вы создаете плагин, он должен быть заключен в:
|
1
|
$.fn.center = function(){};
|
«Центр» должен быть заменен на имя вашего плагина. Это позволяет jQuery знать, что вы расширяете его методы. Теперь, хотя он абсолютно ничего не делает, мы можем вызвать наш метод center с помощью:
|
1
2
3
|
$(function(){
$(«#someElement»).center();
});
|
Шаг 3
Вы должны понимать, как вручную центрировать изображение на странице, прежде чем создавать плагин. Во-первых, ваш элемент должен быть расположен абсолютно. В противном случае, очевидно, что он не сдвинется с места, когда мы изменим «левые» и «верхние» значения. Затем изображение должно быть смещено на 50% ширины браузера влево. Наконец, чтобы компенсировать ширину изображения, нам нужно вычесть одну половину ширины изображения.
|
01
02
03
04
05
06
07
08
09
10
11
12
|
function changeCss(){
var imageHeight = $(element).height();
var imageWidth = $(element).width();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(element).css({
«position» : «absolute»,
«left» : windowWidth / 2 — imageWidth / 2,
«top» : windowHeight /2 — imageHeight / 2
});
};
|
Это прекрасно поместит центр изображения в центр страницы. Это немного сложно объяснить с помощью текста. Обязательно посмотрите видео для большего объяснения.
Шаг 4
Продолжая, нам нужно создать прослушиватель, когда размер окна браузера изменяется.
|
1
2
3
|
$(window).bind(«resize», function(){
changeCss();
});
|
«ChangeCss ()» — это функция, которая корректирует левое и верхнее значения нашего изображения. При повторном вызове при изменении размера окна jQuery пересчитает эти значения.
Вы сделали!
Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий, и я обязательно отвечу. Как всегда, это не может быть «готов к реальному миру». Что произойдет, если у пользователя отключен Javascript? И, конечно, есть несколько способов сделать это с использованием чистого CSS — но я отвлекся.
Подпишитесь на еженедельные скринкасты
- Как только ITUNES загрузится, нажмите «Advanced Tab»
- Выберите «Подписаться на подкаст»
- Введите «http://feeds.feedburner.com/NETTUTSVideos»
Это должно сделать это! Скринкаст также будет доступен для поиска на ITUNES в ближайшие двадцать четыре часа.
- Подпишитесь на RSS-канал NETTUTS, чтобы узнать о ежедневных новостях и статьях о веб-разработке.