1    jQuery плагины
2    jQuery плагины    • Экономят время    • Упрощают код скриптов    • Позволяют другим использовать ваш код
3    Инициализация    jQuery.fn.myPlugin = function() {     // Код крутого плагина    };
4    Правильная инициализация    (function( $ ) {     $.fn.myPlugin = function() {      // Код крутого плагина     };    }...
5    Контекст    (function( $ ){     $.fn.myPlugin = function() {       // "this" уже является jQuery объектом       this....
6    Работающий плагин    (function( $ ){     $.fn.maxHeight = function() {      var max = 0;      this.each(function() { ...
7    Поддерживаем chaining    (function( $ ){     $.fn.lockDimensions = function( type ) {      return this.each(function(...
8    Параметризация    (function( $ ){     $.fn.tooltip = function( options ) {      // Массив значений по умолчанию      ...
9    Namespacing    (function( $ ){     $.fn.tooltip = function( options ) {       // Это     };     $.fn.tooltipShow = fu...
10     Список методов      var methods = {         init : function( options ) { },         show : function( ) { },        ...
11     Логика выбора нужного метода     $.fn.tooltip = function( method ) {        if ( methods[method] ) {          retur...
12     Вызов метода     // Вызываем init метод     $(div).tooltip();     // Вызываем init метод с параметрами     $(div).t...
13     Итоги     • (function( $ ){ /* код плагина */ })( jQuery );     • Поддерживайте chaining     • Передавайте настройк...
14                      Вопросы?        Павлючков         Даниил     d.pavluchkov@itmozg.ru
Upcoming SlideShare
Loading in...5
×

I tmozg js_school_jquery

351

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
351
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

I tmozg js_school_jquery

  1. 1. 1 jQuery плагины
  2. 2. 2 jQuery плагины • Экономят время • Упрощают код скриптов • Позволяют другим использовать ваш код
  3. 3. 3 Инициализация jQuery.fn.myPlugin = function() { // Код крутого плагина };
  4. 4. 4 Правильная инициализация (function( $ ) { $.fn.myPlugin = function() { // Код крутого плагина }; })( jQuery )
  5. 5. 5 Контекст (function( $ ){ $.fn.myPlugin = function() { // "this" уже является jQuery объектом this.fadeIn(normal, function() { // "this“ является DOM объектом }); }; })( jQuery ); $(#element).myPlugin();
  6. 6. 6 Работающий плагин (function( $ ){ $.fn.maxHeight = function() { var max = 0; this.each(function() { max = Math.max( max, $(this).height() ); }); return max; }; })( jQuery ); var tallest = $(div).maxHeight();
  7. 7. 7 Поддерживаем chaining (function( $ ){ $.fn.lockDimensions = function( type ) { return this.each(function() { var $this = $(this); // Работаем с каждым элементом }); }; })( jQuery );
  8. 8. 8 Параметризация (function( $ ){ $.fn.tooltip = function( options ) { // Массив значений по умолчанию var settings = $.extend( { location : top, background-color‘ : blue }, options); return this.each(function() { // Код плагина }); }; })( jQuery ); $(div).tooltip({ location : left });
  9. 9. 9 Namespacing (function( $ ){ $.fn.tooltip = function( options ) { // Это }; $.fn.tooltipShow = function( ) { // очень }; $.fn.tooltipHide = function( ) { // плохо }; $.fn.tooltipUpdate = function( content ) { // !!! }; })( jQuery );
  10. 10. 10 Список методов var methods = { init : function( options ) { }, show : function( ) { }, hide : function( ) { }, update : function( content ) { } };
  11. 11. 11 Логика выбора нужного метода $.fn.tooltip = function( method ) { if ( methods[method] ) { return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === object || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( Method + method + does not exist on jQuery.tooltip ); } };
  12. 12. 12 Вызов метода // Вызываем init метод $(div).tooltip(); // Вызываем init метод с параметрами $(div).tooltip({ foo : bar }); // Вызываем hide метод $(div).tooltip(hide); // Вызываем update метод с параметром $(div).tooltip(update, This is the new tooltip content!);
  13. 13. 13 Итоги • (function( $ ){ /* код плагина */ })( jQuery ); • Поддерживайте chaining • Передавайте настройки через {} • Всегда используйте namespace • Один namespace – один плагин
  14. 14. 14 Вопросы? Павлючков Даниил d.pavluchkov@itmozg.ru
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×