Панель Управления


Видеокурс: "Javascript+jQuery для начинающих в видеоформате" Проверка времени и определение часового пояса рабочей станции. RU-CENTER. Центр регистрации доменов зоны .RU Сейчас выгодная возможность зарегистрировать домен .РФ в RU-CENTER Информационная безопасность Система интернет-расчетов RUpay Графический редактор ГИМП (GIMP) Зинаида Лукьянова. Видеокурс Фотошоп с нуля. Евгений Попов. Видеокурс HTML + PHP + MySQL. Весь Софт Софтодром "Электрошоп". Поиск электронных товаров. Джава. Ява. Java. Дмитрий Котеров, Алексей Костарев. PHP-5. Наиболее полное руководство. 2-е издание.



Элемент Аккордион плагина UI библиотеки jQuery
Плагин UI версии 1.9.2 библиотеки jQuery версии 1.8.3 Сделано в kocby.ru Элемент Аккордион плагина UI библиотеки jQuery. Описание: конвертирует пару хидер+контент в аккордеон. Description: Convert a pair of headers and content panels into an accordion. Для того, чтобы сделать аккордион необходимы пары хидер + соответствующая ему панель с контентом. Options (Опции). Methods (Методы). Events (События). Клавиатура, горячие клавиши для работы с аккордионом. Примеры аккордеона: Дефолтный, Изменчивый, Сохранный, Скрытный, Чувственный, Модерновый, Сортировочный.
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
accordion :: аккордеон
Описание: конвертирует пару хидер+контент в аккордеон.
Description: Convert a pair of headers and content panels into an accordion.

Пример странички с Аккордионом дефолтным (по умолчанию):
$( ".selector" ).accordion();
можно посмотреть здесь.

Пример странички Аккордиона с изменением размера внешнего контейнера:
можно посмотреть здесь.

Пример странички с аккордеоном с сохранением размера панели относительно ее контента:
$( ".selector" ).accordion({ heightStyle: "content" });
можно посмотреть здесь

Пример странички с аккордеоном с возможностью скрыть контент всех панелей:
$( ".selector" ).accordion({ collapsible: true });
можно посмотреть здесь

Пример странички с аккордеоном с возможностью открыть контент при наведении мышкой:
$( ".selector" ).accordion({ event: "click hoverintent" });
можно посмотреть здесь

Пример странички Аккордиона с нестандартными иконками:
можно посмотреть здесь.

Пример странички Аккордиона с возможностями сортировки-перемещения пунктов:
можно посмотреть здесь.


Теория

Тесты по теории можно посмотреть здесь.




Options (Опции)



active (активное)
Type: Boolean or Integer (Тип: Булевское (Логическое, Двоичное) или Целое)
Default: 0 (Дефолтное (по умолчанию) значение: 0)


Which panel is currently open. (Какая панель открыта сейчас.)
Multiple types supported: (Поддерживаются множественные типы: )
• Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.
• Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.
• Булевское: Установка опции active на значение false закрывает контенты всех панелей. Требуется, чтобы опция collapsible была установлена на значение true.
• Целое: Определяет активную (открытую панель), подсчет начинается с нуля. Если значение отрицательное, то подсчет начинается с последней панели.

Code examples: (Примеры кода: )
Initialize the accordion with the active option specified:
Инициализация аккордеона с определенной опцией active:

$( ".selector" ).accordion({ active: 2 });


Get or set the active option, after initialization:
Можно получить или установить опцию active после инициализации:

// getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// setter
$( ".selector" ).accordion( "option", "active", 2 );



animate (анимация)
Type: Boolean or Number or String or Object
Тип: Булевское (Логическое, Двоичное) или Целое или Строка или Объект
Default: {} (Дефолтное (по умолчанию) значение: {})

If and how to animate changing panels.
Анимировать ли и как анимировать изменяющиеся панели.

Multiple types supported:
• Boolean: A value of false will disable animations.
• Number: Duration in milliseconds with default easing.
• String: Name of easing to use with default duration.
• Object: Animation settings with easing and duration properties.
◦ Can also contain a down property with any of the above options.
◦ "Down" animations occur when the panel being activated has a lower index than the currently active panel.

Поддерживаются множественные типы:
• Булевское: значение false (ложь) отменяет анимацию.
• Целое: Продолжение в миллисекундах установленного по умолчанию эффекта.
• Строка: Имя эффекта для использования в течении продолжительности по умолчанию.
• Объект: Установки анимации со значениями имени эффекта и его продолжительности.
◦ Может также содержать значение уменьшения для любой опции выше.
◦ "Down" ("Уменьшение") анимационных эффектов имеет место быть, когда активируемая панель имеет меньший индекс, чем текущая активная панель.
Code examples: (Примеры кода: )
Initialize the accordion with the animate option specified:
Инициализация аккордеона с определенной опцией animate:

$( ".selector" ).accordion({ animate: "bounceslide" });

Get or set the animate option, after initialization:

Можно получить или установить опцию animate после инициализации:

// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );



collapsible (сворачиваемый)
Type: Boolean
Тип: Булевское (Логическое, Двоичное)
Default: false (Дефолтное (по умолчанию) значение: false (ложь))

Whether all the sections can be closed at once. Allows collapsing the active section.
Определяет, можно ли сделать так, чтобы все панели были закрыты. Позволяет свернуть активную панель.

Code examples: (Примеры кода: )
Initialize the accordion with the collapsible option specified:
Инициализация аккордеона с определенной опцией collapsible:

$( ".selector" ).accordion({ collapsible: true });

Get or set the collapsible option, after initialization:

Можно получить или установить опцию collapsible после инициализации:

// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// setter
$( ".selector" ).accordion( "option", "collapsible", true );



disabled
Type: Boolean
Тип: Булевское (Логическое, Двоичное)
Default: false (Дефолтное (по умолчанию) значение: false (ложь))

Disables the accordion if set to true.
Отменяет функциональность аккордеона, если опция установлена на значение true (истина).

Code examples: (Примеры кода: )
Initialize the accordion with the disabled option specified:
Инициализация аккордеона с определенной опцией disabled:

$( ".selector" ).accordion({ disabled: true });

Get or set the disabled option, after initialization:

Можно получить или установить опцию disabled после инициализации:

// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// setter
$( ".selector" ).accordion( "option", "disabled", true );



event (событие)
Type: String
Тип: Строка
Default: "click" (Дефолтное значение: "click" (клик мышкой))

The event that accordion headers will react to in order to activate the associated panel. Multiple events can be specificed, separated by a space.
Определяет событие, на которое реагируют хидеры аккордеона по активации соответствующей панели с контентом. Можно определять несколько событий, разделяя их пробелами.

Code examples: (Примеры кода: )
Initialize the accordion with the event option specified:
Инициализация аккордеона с определенной опцией event:

$( ".selector" ).accordion({ event: "mouseover" });

Get or set the event option, after initialization:

Можно получить или установить опцию event после инициализации:

// getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );



header (хидер)
Type: Selector
Тип: Селектор
Default: "> li > :first-child,> :not(li):even"

Selector for the header element, applied via .find() on the main accordion element. Content panels must be the sibling immedately after their associated headers.
Селектор для элемента хидер, используемый через .find() на главном элементе аккордеона. Панели контента должны быть немедленно привязаны после соответствующих хидеров.

Code examples: (Примеры кода: )
Initialize the accordion with the header option specified:
Инициализация аккордеона с определенной опцией header:

$( ".selector" ).accordion({ header: "h3" });

Get or set the header option, after initialization:

Можно получить или установить опцию header после инициализации:

// getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// setter
$( ".selector" ).accordion( "option", "header", "h3" );



heightStyle
Type: String
Тип: Строка
Default: "auto"

Controls the height of the accordion and each panel. Possible values:
• "auto": All panels will be set to the height of the tallest panel.
• "fill": Expand to the available height based on the accordion's parent height.
• "content": Each panel will be only as tall as its content.

Контролирует высотой (height) аккордеона и каждой панели. Возможные значения:
• "auto": авто - все панели будут установлены по высоте самой высокой панели.
• "fill": заполнить - расширяет до возможной высоты, основываясь на высоте родительского аккордеона.
• "content": контент - каждая панель будет иметь высоту, согласно ее контента.

Code examples: (Примеры кода: )
Initialize the accordion with the heightStyle option specified:
Инициализация аккордеона с определенной опцией heightStyle:

$( ".selector" ).accordion({ heightStyle: "fill" });

Get or set the heightStyle option, after initialization:

Можно получить или установить опцию heightStyle после инициализации:

// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );



icons
Type: Object
Тип: Объект
Default: { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }

Icons to use for headers, matching an icon defined by the jQuery UI CSS Framework. Set to false to have no icons displayed.
•header (string, default: "ui-icon-triangle-1-e")
•activeHeader (string, default: "ui-icon-triangle-1-s")

Иконки для использования в хидерах, в соответствии с теми, что определены в jQuery UI CSS Framework. Установите на значение false, чтобы не было иконок в хидере.
•header (хидер, строка, по дефолту: "ui-icon-triangle-1-e")
•activeHeader (хидер активный (текущий открытый), строка, по дефолту:: "ui-icon-triangle-1-s")

Code examples: (Примеры кода: )
Initialize the accordion with the icons option specified:
Инициализация аккордеона с определенной опцией icons:

$( ".selector" ).accordion({ icons: { "header": "ui-icon-plus", "headerSelected": "ui-icon-minus" } });

Get or set the icons option, after initialization:

Можно получить или установить опцию icons после инициализации:

// getter
var icons = $( ".selector" ).accordion( "option", "icons" );
 
// setter
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "headerSelected": "ui-icon-minus" } );



Methods (Методы)



destroy()
Removes the accordion functionality completely. This will return the element back to its pre-init state.
• This method does not accept any arguments.

Полностью удаляет аккордион и его функциональность. Возвращает элемент обратно, в состояние до инициализации.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the destroy method:
Запуск метода destroy (разрушить):
$( ".selector" ).accordion( "destroy" );



disable()
Disables the accordion.
• This method does not accept any arguments.

Выключает функциональность аккордиона.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the disable method:
Запуск метода disable (выключить):
$( ".selector" ).accordion( "disable" );



enable()
Enables the accordion.
• This method does not accept any arguments.

Включает функциональность аккордиона.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the enable method:
Запуск метода enable (включить):
$( ".selector" ).accordion( "enable" );



option( optionName )
Returns: Object
Возвращает: Объект

Gets the value currently associated with the specified optionName.
• optionName
Type: String
The name of the option to get.

Получает значение, которое в данный момент связано с определенным optionName.
• optionName
Тип: Строка
Получаемое имя опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var isDisabled = $( ".selector" ).accordion( "option", "disabled" );



option()
Returns: PlainObject
Возвращает: ПростойОбъект

Gets an object containing key/value pairs representing the current accordion options hash.
• This method does not accept any arguments.

Получает объект, содержащий пару key/value (ключ/значение), которая представляет текущую опцию аккордиона в хэше.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
var options = $( ".selector" ).accordion( "option" );



option( optionName, value )
Sets the value of the accordion option associated with the specified optionName.
• optionName

Устанавливает значение опции акккордиона, связанной с определенным optionName (именем опции).
• optionName (имя опции)

Type: String
Тип: Строка
The name of the option to set.
Имя опции для установки
• value
• значение
Type: Object
Тип: Объект
A value to set for the option.
Значение, устанавливаемое для данной опции.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).accordion( "option", "disabled", true );



option( options )
Sets one or more options for the accordion.
• options
Type: Object
A map of option-value pairs to set.

Устанавливает одну или более опций для аккордиона.
• options (опции)
Тип: Объект
Карта пар опция-значение для установки.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).accordion( "option", { disabled: true } );



refresh()
Recompute the height of the accordion panels. Results depend on the content and the heightStyle option.
• This method does not accept any arguments.

Пересчитывает высоту панелей аккордиона. Результат зависит от контента и от опции heightStyle.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the method:
Запуск метода:
$( ".selector" ).accordion( "refresh" );



widget()
Returns: jQuery
Returns a jQuery object containing the accordion.
• This method does not accept any arguments.

Возвращает: jQuery
Возвращает объект jQuery, который содержит аккордион.
• Этот метод не принимает никаких аргументов.

Code examples: (Примеры кода: )
Invoke the widget method:
Запуск метода виджета:
var widget = $( ".selector" ).accordion( "widget" );



Events (События)



activate( event, ui )
Type: accordionactivate

Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed, ui.oldHeader and ui.oldPanel will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.

• event
Type: Event

• ui
Type: Object

◦ newHeader
Type: jQuery
The header that was just activated.

◦ oldHeader
Type: jQuery
The header that was just deactivated.

◦ newPanel
Type: jQuery
The panel that was just activated.

◦ oldPanel
Type: jQuery
The panel that was just deactivated.

Code examples: (Примеры кода: )
Initialize the accordion with the activate callback specified:
Инициализация аккордеона с определенным активным колбаком:
$( ".selector" ).accordion({
    activate: function( event, ui ) {}
});


Bind an event listener to the accordionactivate event:
Привязка прослушки события к событию типа accordionactivate:
$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );



beforeActivate( event, ui )
Type: accordionbeforeactivate

Triggered directly before a panel is activated. Can be canceled to prevent the panel from activating. If the accordion is currently collapsed, ui.oldHeader and ui.oldPanel will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.

• event
Type: Event

• ui
Type: Object

◦ newHeader
Type: jQuery
The header that is about to be activated.

◦ oldHeader
Type: jQuery
The header that is about to be deactivated.

◦ newPanel
Type: jQuery
The panel that is about to be activated.

◦ oldPanel
Type: jQuery
The panel that is about to be deactivated.

Code examples: (Примеры кода: )
Initialize the accordion with the beforeActivate callback specified:
$( ".selector" ).accordion({
    beforeActivate: function( event, ui ) {}
});


Bind an event listener to the accordionbeforeactivate event:
$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );



create( event, ui )
Type: accordioncreate

Triggered when the accordion is created. If the accordion is collapsed, ui.header and ui.panel will be empty jQuery objects.

• event
Type: Event

• ui
Type: Object

◦ header
Type: jQuery
The active header.

◦ panel
Type: jQuery
The active panel.

Code examples: (Примеры кода: )
Initialize the accordion with the create callback specified:
$( ".selector" ).accordion({
    create: function( event, ui ) {}
});


Bind an event listener to the accordioncreate event:
$( ".selector" ).on( "accordioncreate", function( event, ui ) {} );



Overview (Обзор)
The markup of your accordion container needs pairs of headers and content panels:
Для того, чтобы сделать аккордион необходимы пары хидер + соответствующая ему панель с контентом:
1
2
3
4
5
6
<div id="accordion">
    <h3>First header</h3>
    <div>First content panel</div>
    <h3>Second header</h3>
    <div>Second content panel</div>
</div>


Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.

The panels can be activated programmatically by setting the active option.


Keyboard interaction (Клавиатура, горячие клавиши)
When focus is on a header, the following key commands are available:
• UP/LEFT - Move focus to the previous header. If on first header, moves focus to last header.
• DOWN/RIGHT - Move focus to the next header. If on last header, moves focus to first header.
• HOME - Move focus to the first header.
• END - Move focus to the last header.
• SPACE/ENTER - Activate panel associated with focused header.

When focus is in a panel:
• CTRL+UP: Move focus to associated header.

Когда фокус на хидере, возможны следующие команды с клавиатуры:
• UP/LEFT - Перемещает фокус на предыдущий хидер. Если текущий хидер первый, перемещает фокус на последний хидер.
• DOWN/RIGHT - Перемещает фокус на следующий хидер. Если текущий хидер последний, перемещает фокус на первый хидер.
• HOME - Перемещает фокус на первый хидер.
• END - Перемещает фокус на последний хидер.
• SPACE/ENTER - Активирует панель с контентом, связанную с текущим (сфокусированным) хидером.

Когда фокус на панели контента:
• CTRL+UP: Перемещает фокус на связанный хидер.


Additional Notes (Дополнительная информация)
• This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
• Этот виджет требует определенных стилей CSS, иначе он не будет работать. Если вы используете адаптированную схему, оттолкитесь в своей разработке от специализированного файла CSS.


Example: (Пример: )
A simple jQuery UI Accordion
Простой пример jQuery UI аккордеона
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>accordion demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
    <h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
        Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
        condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
        Nam mi. Proin viverra leo ut odio.</p>
    </div>
    <h3>Section 2</h3>
    <div>
        <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
        Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
        faucibus interdum tellus libero ac justo.</p>
    </div>
    <h3>Section 3</h3>
    <div>
        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
        Quisque lobortis.Phasellus pellentesque purus in massa.</p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
</div>
 
<script>
$( "#accordion" ).accordion();
</script>
 
</body>
</html>



Этот пример можно посмотреть здесь.



Примеры аккордеона на этом сайте: Дефолтный, Изменчивый, Сохранный, Скрытный, Чувственный, Модерновый, Сортировочный.



Если вы планируете вернуться сюда позднее...
Пожалуйста, запомните эту страничку -
URL: http://kocby.ru/post/webmaster/jquery/ui/accordion/
Спасибо за посещение этой странички и внимательное отношение к ее контенту и дизайну. Удачи и успеха!
© KOCBY.RU :: перепечатка материалов разрешается с указанием ссылки на домен KOCBY.RU ©
Basket is empty :: Корзина пустая
Close and hide in basket :: Закрыть и спрятать в корзину
Посмотри в зеркало! Что там видно?
Красивая девушка брюнетка слева Красивая девушка блондинка справа




Close and hide in basket :: Закрыть и спрятать в корзину статистическую информацию о посетителях Клуба.
Створки зеркала Клуба Одиноких Сердец.
Красивая девушка блондинка слева Красивая девушка брюнетка справа