Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.04.2015, 12:53
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

разработка плагина
Здравствуйте, изучаю написание собственных плагинов на Jquery. Есть такое задание:
- Создать свой метод inOut, который эмулирует функционал методов slideToggle и fadeToggle
Сами методы slideToggle и fadeToggle в коде не использовать!
- Метод должен вызываться примерно так:
$('div.container').inOut();
- Метод inOut должен отрабатываться при нажатии кнопки "Нажми меня" примерно так:
$('button').on('click', function(){
$('div.container').inOut();
});

- Подсказки:
- использовать animate
- jQuery допускает использование строки "toggle", как значения для св-в "height" и "opacity"
- предусмотреть возможность изменения скорости

я сделал так
(function($) {
  $.fn.mySlideToggle = function(){
     this.animate({'height':'toggle','opacity':'toggle'},{duration : 3000});
     return this;
  };

})(jQuery);
$(function(){


  $('button').on('click',function(){
		$('.container').mySlideToggle();
	});
	});

<div class="container">
	<h2>Какой-то текст</h2>
	<p>
		Неспроста свинцовый сосуд мгновенно открывает квазиупругую колбу. Карусель быстра и кратковременна. Часто бывает, что ядерная лапка груба и продуманна. Очевидно, феноменальная шестерня брезентового комплекта бережно увеличивает тайную лампу. Изящное значение резко и метастабильно. Платиновая инерция перегоревшего изолятора образовывает разделение. Свет преднамерен и замысловат. Шланг предумышленен. Деревянное открытие периодично. Базальтовый проектировщик груб. Замкнутый болт наполняет шип. Нагруженность эпизодична и кратковременна.
	</p>
</div>

<p><button>Нажми меня</button></p>

Объясните пожалуйста как правильно решить эту задачу и как добавить возможность изменения скорости. Подозреваю что надо вытянуть свойство duration метода animate, но как?
Ответить с цитированием
  #2 (permalink)  
Старый 19.04.2015, 16:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Шаблон плагина
Moloch,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
(function($) {
    $.fn.inOut = function(opt) {
        var defaults = {
            'duration': 3000, //продолжительность выполнения анимации в ms
            'easing': 'swing' //изменение скорости анимации
        };
        opt = $.extend(defaults, opt);
        return this.each(function(index, self) {
            $(self).animate({
                'height': 'toggle',
                'opacity': 'toggle'
            }, {
                'duration': opt.duration,
                'easing': opt.easing
            });
        })
    };

})(jQuery);
$(function() {
    $('button').on('click', function() {
        $('.container').inOut({'duration': 1500});
    });
});
</script>
  <title></title>
</head>
<body>
<div class="container">
	<h2>Какой-то текст</h2>
	<p>
		Неспроста свинцовый сосуд мгновенно открывает квазиупругую колбу. Карусель быстра и кратковременна. Часто бывает, что ядерная лапка груба и продуманна. Очевидно, феноменальная шестерня брезентового комплекта бережно увеличивает тайную лампу. Изящное значение резко и метастабильно. Платиновая инерция перегоревшего изолятора образовывает разделение. Свет преднамерен и замысловат. Шланг предумышленен. Деревянное открытие периодично. Базальтовый проектировщик груб. Замкнутый болт наполняет шип. Нагруженность эпизодична и кратковременна.
	</p>
</div>

<p><button>Нажми меня</button></p>

</body>
</html>

Последний раз редактировалось рони, 19.04.2015 в 16:40.
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2015, 17:45
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

Премного благодарен, объесните пожалуйста что за магия творится вот в этой части кода?
opt = $.extend(defaults, opt);
        return this.each(function(index, self) {
            $(self).animate({
                'height': 'toggle',
                'opacity': 'toggle'
            }, {
                'duration': opt.duration,
                'easing': opt.easing
            });
Ответить с цитированием
  #4 (permalink)  
Старый 19.04.2015, 17:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Moloch,
1. параметры которые получает функция дополняются теми параметрами по умолчанию, которых в них нет.
было {'duration': 1500} стало {'duration': 1500, 'easing': 'swing' }
2. всем элементам в селекторе назначается animate -- можно и без цикла each в данном случае -- each удобен в плане расширения плагина.
Ответить с цитированием
  #5 (permalink)  
Старый 19.04.2015, 18:25
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

мне непонятно как extend в данном случае работает. Есть объект defaults я вызываю extend() и объединяю го с объектом opt и все это присваиваю переменной opt. затем возвращаю коллекцию объектов . а какую роль играет переменная self?
Ответить с цитированием
  #6 (permalink)  
Старый 19.04.2015, 18:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от Moloch
затем возвращаю коллекцию
какую колекцию -- был у функции 1 аргумент один и остался -- просто ключей в обьекте стало ровно столько сколько необходимо плагину.
можно совсем без параметров $('.container').inOut(); или так $('.container').inOut({}); если аргументов нет тогда параметры полностью возьмутся из defaults.
более добавить нечего

self равен this или элементу 'div.container'
нельзя this.animate у элемента нет никакого свойства animate
но можно $(this).animate -- потому что у обьекта jquery -> $(this) есть метод animate
Ответить с цитированием
  #7 (permalink)  
Старый 19.04.2015, 19:45
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

а если мне нужно еще чтобы по нажатию на конопку менялся цвет фона блока , то это так делается?
(function($) {
    $.fn.inOut = function(opt) {
        var defaults = {
            'duration': 3000, //продолжительность выполнения анимации в ms
            'easing': 'swing', //изменение скорости анимации
            background_color :'green'
        };
        opt1 = $.extend(defaults, opt);
        return this.each(function(index, self) {
            $(self).animate({
                'height': 'toggle',
                'opacity': 'toggle'
            }, {
                'duration': opt.duration,
                'easing': opt.easing
            }).css('background-color',opt.background_color);
        })
    };

})(jQuery);
$(function() {
    $('button').on('click', function() {
        $('.container').inOut({'duration': 1500,background_color:'pink'});
    });
});

почему если я не задаю background_color:'pink' то фон по умолчанию не становится зеленым?
Ответить с цитированием
  #8 (permalink)  
Старый 19.04.2015, 20:13
Аспирант
Отправить личное сообщение для Moloch Посмотреть профиль Найти все сообщения от Moloch
 
Регистрация: 29.10.2013
Сообщений: 94

а, разобрался opt = $.extend(defaults, opt); вот эта строчка нужна для перезаписи свойств по умолчанию
Ответить с цитированием
  #9 (permalink)  
Старый 19.04.2015, 20:16
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

opt = $.extend(defaults, opt);
Ответить с цитированием
  #10 (permalink)  
Старый 19.04.2015, 20:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

Сообщение от Moloch
вот эта строчка нужна для перезаписи свойств по умолчанию
для перезаписи параметров запуска плагина -- еслиб было перезапись свойств по умолчанию -- дальнейшее использование плагина выдавало бы 'pink' - а будет 'green' если не задано иное - понятно - проверьте сделав вторую кнопку для клика без параметра background_color
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
setInterval внутри плагина giv13 Элементы интерфейса 16 16.10.2014 04:58
PHP - Разработка скриптов и CMS. Программирование сайтов f.Michail Работа 16 28.01.2014 08:46
public метод для плагина Ichigeki jQuery 1 16.02.2012 19:07
разработка плагина для flowplayer lamocomp Работа 0 05.05.2011 12:48
Внутреннее состояние плагина alexander2 jQuery 10 01.04.2010 12:55