Который день мучаюсь с этим вопросом. Нигде точной информации так и не нашла.
В общем есть плагин аккордеон. У него есть опции и одна из них "Okey" должна содержать функцию (не суть важно какую, пусть даже она будет изначально пустой).
При нажатии кнопки, мы переопределяем опции, а так же содержимое этой функции. И теперь наша функция должна выводить через алерт заголовок клавиши аккордеона.
Подскажите пожалуйста, как это реализовать. Сама, боюсь, не справлюсь. Может у кого-то есть похожий пример с переопределением функции? Буду очень благодарна.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Аккордеон</title>
<link type="text/css" rel="stylesheet" href="jquery.accordion.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('dl#my-accordion').accordion();
$("#ok").click(function(){
$("dl#my-accordion").accordion({
Okey: function(){
//по нажатию: alert "Была открыта новая вкладка (this.find("dt").html();)?"
}
});
});
});
</script>
</head>
<body>
<dl class="accordion" id="my-accordion">
<dt><a href=""></a>Окно 1</dt>
<dd>Контент окна 1.</dd>
<dt>Окно 2</dt>
<dd>Контент окна 2.</dd>
<dt>Окно 3</dt>
<dd>Контент окна 3.</dd>
<dt>Окно 4</dt>
<dd>Контент окна 4.</dd>
</dl>
<button id="ok">Подробнее</button>
</body>
</html>
(function($) {
$.fn.accordion = function(options) {
var settings = {
open: false,
Okey: function(){
//при нажатии на различные клавиши аккордеона, он меняет цвета
};
}
$.extend(options, settings, options );
return this.each(function() {
// если опции существуют, то совмещаем их
// со значениями по умолчанию
if ( options ) {
$.extend( settings, options ); // при этом важен порядок совмещения
};
if(settings.open) $(this).children('dt:first-child').next().show();
var dts = $(this).children('dt');
dts.click(onClick);
dts.each(reset);
});
function onClick() {
$(this).siblings('dt').each(hide);
$(this).next().slideDown('fast');
return false;
}
function hide() {
$(this).next().slideUp('fast');
}
function reset() {
$(this).next().hide();
}
}
})(jQuery);