Вход

Просмотр полной версии : разработка плагина

Moloch
19.04.2015, 12:53
Здравствуйте, изучаю написание собственных плагинов на 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, но как?
рони
19.04.2015, 16:31
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>
Moloch
19.04.2015, 17:45
Премного благодарен, объесните пожалуйста что за магия творится вот в этой части кода?

opt = $.extend(defaults, opt);
return this.each(function(index, self) {
$(self).animate({
'height': 'toggle',
'opacity': 'toggle'
}, {
'duration': opt.duration,
'easing': opt.easing
});
рони
19.04.2015, 17:54
Moloch,
1. параметры которые получает функция дополняются теми параметрами по умолчанию, которых в них нет.
было {'duration': 1500} стало {'duration': 1500, 'easing': 'swing' }
2. всем элементам в селекторе назначается animate -- можно и без цикла each в данном случае -- each удобен в плане расширения плагина.
Moloch
19.04.2015, 18:25
мне непонятно как extend в данном случае работает. Есть объект defaults я вызываю extend() и объединяю го с объектом opt и все это присваиваю переменной opt. затем возвращаю коллекцию объектов . а какую роль играет переменная self?
рони
19.04.2015, 18:50
затем возвращаю коллекцию
какую колекцию -- был у функции 1 аргумент один и остался -- просто ключей в обьекте стало ровно столько сколько необходимо плагину.
можно совсем без параметров $('.container').inOut(); или так $('.container').inOut({}); если аргументов нет тогда параметры полностью возьмутся из defaults.
более добавить нечего

self равен this или элементу 'div.container'
нельзя this.animate у элемента нет никакого свойства animate
но можно $(this).animate -- потому что у обьекта jquery -> $(this) есть метод animate
Moloch
19.04.2015, 19:45
а если мне нужно еще чтобы по нажатию на конопку менялся цвет фона блока , то это так делается?

(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' то фон по умолчанию не становится зеленым?
Moloch
19.04.2015, 20:13
а, разобрался opt = $.extend(defaults, opt); вот эта строчка нужна для перезаписи свойств по умолчанию
laimas
19.04.2015, 20:16
opt = $.extend(defaults, opt);
рони
19.04.2015, 20:54
вот эта строчка нужна для перезаписи свойств по умолчанию
для перезаписи параметров запуска плагина -- еслиб было перезапись свойств по умолчанию -- дальнейшее использование плагина выдавало бы 'pink' - а будет 'green' если не задано иное - понятно - проверьте сделав вторую кнопку для клика без параметра background_color
рони
19.04.2015, 22:50
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>
Moloch
20.04.2015, 23:16
спасиибо ! буду разбираться =)