Показать сообщение отдельно
  #5 (permalink)  
Старый 08.06.2017, 12:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

создание плагина jQuery
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>
Ответить с цитированием