разработка плагина
Здравствуйте, изучаю написание собственных плагинов на 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, но как? |
Шаблон плагина
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>
|
Премного благодарен, объесните пожалуйста что за магия творится вот в этой части кода?
opt = $.extend(defaults, opt);
return this.each(function(index, self) {
$(self).animate({
'height': 'toggle',
'opacity': 'toggle'
}, {
'duration': opt.duration,
'easing': opt.easing
});
|
Moloch,
1. параметры которые получает функция дополняются теми параметрами по умолчанию, которых в них нет. было {'duration': 1500} стало {'duration': 1500, 'easing': 'swing' } 2. всем элементам в селекторе назначается animate -- можно и без цикла each в данном случае -- each удобен в плане расширения плагина. |
мне непонятно как extend в данном случае работает. Есть объект defaults я вызываю extend() и объединяю го с объектом opt и все это присваиваю переменной opt. затем возвращаю коллекцию объектов . а какую роль играет переменная self?
|
Цитата:
можно совсем без параметров $('.container').inOut(); или так $('.container').inOut({}); если аргументов нет тогда параметры полностью возьмутся из defaults. более добавить нечего self равен this или элементу 'div.container' нельзя this.animate у элемента нет никакого свойства animate но можно $(this).animate -- потому что у обьекта jquery -> $(this) есть метод animate |
а если мне нужно еще чтобы по нажатию на конопку менялся цвет фона блока , то это так делается?
(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' то фон по умолчанию не становится зеленым? |
а, разобрался opt = $.extend(defaults, opt); вот эта строчка нужна для перезаписи свойств по умолчанию
|
opt = $.extend(defaults, opt);
|
Цитата:
|
| Часовой пояс GMT +3, время: 16:37. |