I tmozg js_school_jquery
Upcoming SlideShare
Loading in...5
×
 

I tmozg js_school_jquery

on

  • 461 views

 

Statistics

Views

Total Views
461
Views on SlideShare
451
Embed Views
10

Actions

Likes
0
Downloads
6
Comments
0

1 Embed 10

https://us4.admin.mailchimp.com 10

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    I tmozg js_school_jquery I tmozg js_school_jquery Presentation Transcript

    • 1 jQuery плагины
    • 2 jQuery плагины • Экономят время • Упрощают код скриптов • Позволяют другим использовать ваш код
    • 3 Инициализация jQuery.fn.myPlugin = function() { // Код крутого плагина };
    • 4 Правильная инициализация (function( $ ) { $.fn.myPlugin = function() { // Код крутого плагина }; })( jQuery )
    • 5 Контекст (function( $ ){ $.fn.myPlugin = function() { // "this" уже является jQuery объектом this.fadeIn(normal, function() { // "this“ является DOM объектом }); }; })( jQuery ); $(#element).myPlugin();
    • 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 Поддерживаем chaining (function( $ ){ $.fn.lockDimensions = function( type ) { return this.each(function() { var $this = $(this); // Работаем с каждым элементом }); }; })( jQuery );
    • 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 Namespacing (function( $ ){ $.fn.tooltip = function( options ) { // Это }; $.fn.tooltipShow = function( ) { // очень }; $.fn.tooltipHide = function( ) { // плохо }; $.fn.tooltipUpdate = function( content ) { // !!! }; })( jQuery );
    • 10 Список методов var methods = { init : function( options ) { }, show : function( ) { }, hide : function( ) { }, update : function( content ) { } };
    • 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 Вызов метода // Вызываем init метод $(div).tooltip(); // Вызываем init метод с параметрами $(div).tooltip({ foo : bar }); // Вызываем hide метод $(div).tooltip(hide); // Вызываем update метод с параметром $(div).tooltip(update, This is the new tooltip content!);
    • 13 Итоги • (function( $ ){ /* код плагина */ })( jQuery ); • Поддерживайте chaining • Передавайте настройки через {} • Всегда используйте namespace • Один namespace – один плагин
    • 14 Вопросы? Павлючков Даниил d.pavluchkov@itmozg.ru