разработка плагина
Здравствуйте, изучаю написание собственных плагинов на 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);
|
Цитата:
|
Moloch,
для медитации - дальнейшее расширение плагина и его новые возможности )))
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
(function($) {
var defaults = {
'animate': true,
'css': true,
'duration': 3000, //продолжительность выполнения анимации в ms
'easing': 'swing', //изменение скорости анимации
'background_color': 'green'
};
$.fn.inOut = function(opt) {
opt = $.extend({}, defaults, opt);
return this.each(function(index, self) {
var elem = $(self);
opt.animate && elem.animate({
'height': 'toggle',
'opacity': 'toggle'
}, {
'duration': opt.duration,
'easing': opt.easing
})
opt.css && elem.css('background-color', opt.background_color);
})
};
$.inOut = function(el, opt) {
$(el).inOut(opt)
};
$.inOut.setDefaults = function(setNew) {
defaults = $.extend({}, defaults, setNew)
}
})(jQuery);
jQuery(function($) {
function RandColor() {
var r = Math.floor(Math.random() * (256));
var g = Math.floor(Math.random() * (256));
var b = Math.floor(Math.random() * (256));
var rgb = 'rgb(' + r + ',' + g + ',' + b + ')';
return rgb;
}
$('button').eq(0).on('click', function() {
$('.container').inOut({
'duration': 1500,
background_color: 'pink'
});
});
$('button').eq(1).on('click', function() {
$('.container').inOut({
'duration': 1500
});
});
$('button').eq(2).on('click', function() {
$.inOut('.container');
});
$('button').eq(3).on('click', function() {
var color = RandColor();
$.inOut.setDefaults({
background_color: color
});
$.inOut('button:gt()', {
background_color: color,
animate: false
})
$.inOut('.container');
});
});
</script>
<title></title>
</head>
<body>
<div class="container">
<h2>Какой-то текст</h2>
<p>
Неспроста свинцовый сосуд мгновенно открывает квазиупругую колбу. Карусель быстра и кратковременна. Часто бывает, что ядерная лапка груба и продуманна. Очевидно, феноменальная шестерня брезентового комплекта бережно увеличивает тайную лампу. Изящное значение резко и метастабильно. Платиновая инерция перегоревшего изолятора образовывает разделение. Свет преднамерен и замысловат. Шланг предумышленен. Деревянное открытие периодично. Базальтовый проектировщик груб. Замкнутый болт наполняет шип. Нагруженность эпизодична и кратковременна.
</p>
</div>
<p><button>Нажми меня всегда pink</button></p>
<p><button>Нажми меня defaults green $('.container').inOut()</button></p>
<p><button>Нажми меня defaults green $.inOut('.container')</button></p>
<p><button>Изменить цвет по умолчанию</button></p>
</body>
</html>
|
спасиибо ! буду разбираться =)
|
| Часовой пояс GMT +3, время: 16:25. |