jQuery плагин своими руками. Пример первый

На данный момент jQuery — один из самых популярных фреймворков на JavaScript. Многие, кто так или иначе связан с вебстроительством, пользовались jQuery и множественными плагинами к нему. Плагинов на jQuery действительно много и в нескольких последующих постах я затрону тему их разработки. И начну эту серию сразу статьей о создании jQuery плагина. Поехали!

Наша цель — написать плагин, который будет динамически центрировать по вертикали и горизонтали переданные ему элементы страницы. И, первым делом, скачаем jquery последней версии.

Вот теперь действительно поехали :)

Шаг 1

Создаем текстовый файл с названием jquery.center.js. После того как файл создан, подключаем его и сам jQuery на страницу:

  1. <head>
  2.     <script src="jquery.latest.pack.js" type="text/javascript">
  3.     <script src="jquery.center.js" type="text/javascript">
  4. </head>

Шаг 2

В файл jquery.center.js всталяем следующий код:

  1. (function($){
  2. $.fn.center = function(){ // обратите внимание - center - название плагина, по нему потом будем вызывать плагин
  3. var element = this;
  4. $(element).load(function(){ // изменяем стили после загрузки элемента
  5. changeCss();
  6. $(window).bind("resize", function(){ // а также при ресайзе окна браузера
  7.     changeCss();
  8. });
  9. function changeCss(){ // функция изменения стилей
  10.     var imageHeight = $(element).height(); // высота элемента
  11.     var imageWidth = $(element).width(); // ширина
  12.     var windowWidth = $(window).width(); // ширина окна
  13.     var windowHeight = $(window).height(); // высота
  14.     $(element).css({ // стиль
  15.         "position" : "absolute", // задаем абсолютное позиционирование элемента
  16.         "left" : windowWidth / 2 - imageWidth / 2, // помещаем слева на расстоянии половины ширины окна за вычетом половины ширины слоя
  17.         "top" : windowHeight /2 - imageHeight / 2 // также для высоты
  18.     });
  19. };
  20. });
  21. };
  22. })(jQuery);

Теперь, чтобы применить этот код к какому-либо слою достаточно написать на странице следующий код:

  1. $(function(){
  2.   $("#myDiv").center();
  3. });

Вот и всё, можно пользоваться :)
Пример
Лучше всего такой плагин использовать с картинками. Также этот плагин не принимает никаких параметров и его действие всегда одинаково. Но для начала написания собственных jQuery плагинов вполне подходит. В следующей статье попробуем сделать уже что-нибудь серьезное.

Запись опубликована в рубрике JS & jQuery с метками , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">