Переопределение функций в плагине jquery [Архив форума]

Shock9777

07.06.2017, 20:16

Который день мучаюсь с этим вопросом. Нигде точной информации так и не нашла.
В общем есть плагин аккордеон. У него есть опции и одна из них "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);

рони

07.06.2017, 20:37

Shock9777,
на всякий случай строка 9 плагина }; лишняя точка с запятой

Shock9777

07.06.2017, 22:43

рони,
Подскажите ещё кое в чём. Допустим в опции Okey прописана какая-либо функция, как обратиться для её выполнения в плагине?

рони

07.06.2017, 23:11

Shock9777,
dts.click(onClick);
dts.each(reset);
dts.click(settings.Okey);

рони

08.06.2017, 12:08

Shock9777,
вариант ...

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Аккордеон</title>
<style type="text/css">
dt{
cursor: pointer;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
(function($) {
var settings = {
open: false,
Okey: function() {
var color = "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
$(this).next().css({
backgroundColor: color
})
}
};

function onClick() {
$(this).siblings("dt").each(hide);
$(this).next().slideDown("fast");
return false
}

function hide() {
$(this).next().slideUp("fast")
}

function reset() {
$(this).next().hide()
}
$.fn.accordion = function(method) {
if (methods[method]) return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
else if (typeof method ===
"object" || !method) return methods.init.apply(this, arguments);
else $.error("Метод " + method + " не существует в jQuery.accordion")
};
var methods = {
option: function(key, value) {
var data = $(this).data("accordion");
if (!data) {
var options = {};
options[key] = value;
methods.init.call(this, options)}
else data.settings[key] = value
},
init: function(options) {
return this.each(function() {
var data = $(this).data("accordion");
if (data) return;
var defaults = $.extend({}, settings,
options);
$(this).data("accordion", {
settings: defaults
});
if (defaults.open) $(this).children("dt:first-child").next().show();
var dts = $(this).children("dt");
dts.click(onClick);
dts.each(reset);
dts.click(function() {
defaults.Okey.bind(this)()
})
})
}
}
})(jQuery);
jQuery(function() {
$("dl#my-accordion").accordion();
$("#ok").click(function() {
$("dl#my-accordion").accordion("option", "Okey", function() {
alert("Была открыта новая вкладка " + $(this).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>