Форум

Shock9777 · #1 (**permalink**) 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);

рони · #2 (**permalink**) 07.06.2017, 20:37

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

Сообщение от Shock9777

};

лишняя точка с запятой

Shock9777 · #3 (**permalink**) 07.06.2017, 22:43

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

рони · #4 (**permalink**) 07.06.2017, 23:11

Shock9777,

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

рони · #5 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript