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


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



Элемент Тултипы (Tooltip) плагина UI библиотеки jQuery.
Плагин UI версии 1.9.2 библиотеки jQuery версии 1.8.3 Сделано в kocby.ru Элемент Тултипы (Tooltip) плагина UI библиотеки jQuery. Кастомизированные, адаптированные по теме Тултипы заменяют ортодоксальные тултипы браузера. Тултипы заменяют ортодоксальные тултипы, делая их соответствующими теме сайта и позволяя разные кастомизации. Показывают больше контента, чем просто заголовок, такие как инлайновые заметки или экстра контент, обновляемый по технологии Ажакс. Кастомизируют положение Тултипов, например, по центру поверх всех элементов. Добавляют экстра стили для кастомизации появления, для полей предупреждения или ошибки. Анимация fade (постепенное исчезновение/появление) используется по дефолту, чтобы показать или спрятать Тултип, делая появление более органичным и естественным по сравнению с простым включением/выключением видимости. Это может быть кастомизировано с помощью опций show (показать) и hide (спрятать).
© Перепечатка разрешается с установкой ссылки на ресурс http://kocby.ru
Tooltip :: Тултипы
Описание: Кастомизированные, адаптированные по теме Тултипы заменяют ортодоксальные тултипы браузера.
Description: Customizable, themeable tooltips, replacing native tooltips.

Пример странички Тултип Дефолтный (по умолчанию, Default functionality):
можно посмотреть здесь.

Пример странички Тултип Адаптированный со стрелкой (Custom style with arrow):
можно посмотреть здесь.

Пример странички Формы с Тултипами (Forms with tooltips):
можно посмотреть здесь.

Пример странички Тултип Трассировка мыши (Track the mouse):
можно посмотреть здесь.

Пример странички Тултип Анимированный по вкусу (Custom animation):
можно посмотреть здесь.

Пример странички Тултип с нужным контентом (Custom content):
можно посмотреть здесь.

Пример странички Тултип Видео Плейер (Video Player):
можно посмотреть здесь.




Теория

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




Options (Опции)



content
Type: Function() or String
Default: function returning the title attribute

The content of the tooltip. Контент Тултипа.
When changing this option, you likely need to also change the items option.
Когда меняете эту опцию, вероятно, вам также следует поменять опцию items (пункты).

Multiple types supported:
Поддерживаются множественные типы:
• Function (Функция): A callback which can either return the content directly, or call the first argument, passing in the content, e.g., for Ajax content. Функция обратного вызова, которая либо возвращает контент напрямую, либо вызывает первый аргумент, передавая в контент, например, для контента Аджакса.
• String (Строка): A string of HTML to use for the tooltip content. Строка в формате HTML для использования как контент Тултипа.

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

$( ".selector" ).tooltip({ content: "Awesome title!" });


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

// getter
var content = $( ".selector" ).tooltip( "option", "content" );
 
// setter
$( ".selector" ).tooltip( "option", "content", "Awesome title!" );



disabled
Type: Boolean
Default: false

Disables the tooltip if set to true.
Когда установлена на значение true (истина), Тултип Выключен.

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

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


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

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



hide
Type: Boolean or Number or String or Object
Default: null

If and how to animate the hiding of the tooltip.
Определяет, анимировать ли и как анимировать Тултип при исчезновении.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean (Двоичная Логика): When set to false, no animation will be used and the tooltip will be hidden immediately. When set to true, the tooltip will fade out with the default duration and the default easing. Когда установлена на значение false (ложь), никакой анимации и Тултип будет спрятан немедленно. Когда установлена на значение true (истина), Тултип будет исчезать с дефолтной продолжительностью и с дефолтным изингом.
• Number (Число): The tooltip will fade out with the specified duration and the default easing. Тултип будет исчезать с заданной продолжительностью и с дефолтным изингом.
• String (Строка): The tooltip will be hidden using the specified effect. The value can either be the name of a built-in jQuery animateion method, such as "slideUp", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing. Тултип будет исчезать с использованием заданного эффекта. Значение опции может быть либо именем встроенного анимационного метода jQuery (жКвери), например "slideUp", либо именем эффекта jQuery UI, например "fold". В любом случае эффект будет использован с дефолтной продолжительностью и с дефолтным изингом.
• Object (Объект): If the value is an object, then effect, duration, and easing properties may be provided. If the effect property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeOut" will be used. Если значение является Объектом, тогда он должен содержать как свойства имя эффекта, продолжительность и изинг. Если свойства эффекта содержат имя метода jQuery, тогда этот метод будет использован. Иначе будет считаться, что это имя эффекта jQuery UI. Когда используется эффект jQuery UI, который поддерживает дополнительные сеттинги, вы можете включить эти сеттинги в объект, и они будут переданы эффекту. Если не задается продолжительность изинга, будут использованы дефолтные значения. Если не задается имя эффекта, будет использован "fadeOut".

Code examples: (Примеры кода: )
Initialize the tooltip with the hide option specified:
Инициализация Тултипов с определенной опцией hide:

$( ".selector" ).tooltip({ hide: { effect: "explode", duration: 1000 } });


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

// getter
var hide = $( ".selector" ).tooltip( "option", "hide" );
 
// setter
$( ".selector" ).tooltip( "option", "hide", { effect: "explode", duration: 1000 } );



items
Type: Selector
Default: [title]

A selector indicating which items should show tooltips. Customize if you're using something other then the title attribute for the tooltip content, or if you need a different selector for event delegation.
When changing this option, you likely need to also change the content option.

Селектор, показывающий, какие пункты должны показывать Тултипы. Адаптируйте под свои потребности, если вы используете нечто отличное от аттрибута title (заголовок) для контента Тултипа или если вам нужен другой селектор для передачи события.
Когда меняете эту опцию, вероятно, вам также следует поменять опцию content (контент).

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

$( ".selector" ).tooltip({ items: "img[alt]" });


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

// getter
var items = $( ".selector" ).tooltip( "option", "items" );
 
// setter
$( ".selector" ).tooltip( "option", "items", "img[alt]" );



position
Type: Object
Default: { my: "left top+15", at: "left bottom", collision: "flipfit" }

Configuration for the Position utility. The of property defaults to the target element, but can also be overriden.
Note: In 1.9.0, the default value was { my: "left+15 center", at: "right center", collision: "flipfit" }, but this was changed to more closely match native tooltip positioning.

Конфигурация для утилиты Позиционирования (Position). Свойства по умолчанию принимают значения элемента-цели, но могут быть перезаписаны.
Обратите внимание. В версии 1.9.0 дефолтное значение было { my: "left+15 center", at: "right center", collision: "flipfit" }, но в данной версии 1.9.2 было изменено, чтобы больше соответствовать позиции ортодоксального Тултипа.

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

$( ".selector" ).tooltip({ position: { my: "left+15 center", at: "right center" } });


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

// getter
var position = $( ".selector" ).tooltip( "option", "position" );
 
// setter
$( ".selector" ).tooltip( "option", "position", { my: "left+15 center", at: "right center" } );



show
Type: Boolean or Number or String or Object
Default: null

If and how to animate the showing of the tooltip.
Определяет, анимировать ли и как анимировать Тултип при показе.

Multiple types supported:
Поддерживаются множественные типы:
• Boolean (Двоичная Логика): When set to false, no animation will be used and the tooltip will be shown immediately. When set to true, the tooltip will fade in with the default duration and the default easing. Когда установлена на значение false (ложь), никакой анимации и Тултип будет показан немедленно. Когда установлена на значение true (истина), Тултип будет показываться с дефолтной продолжительностью и с дефолтным изингом.
• Number (Число): The tooltip will fade in with the specified duration and the default easing. Тултип будет показываться с заданной продолжительностью и с дефолтным изингом.
• String (Строка): The tooltip will be shown using the specified effect. The value can either be the name of a built-in jQuery animateion method, such as "slideDown", or the name of a jQuery UI effect, such as "fold". In either case the effect will be used with the default duration and the default easing. Тултип будет показан с использованием заданного эффекта. Значение опции может быть либо именем встроенного анимационного метода jQuery (жКвери), например "slideUp", либо именем эффекта jQuery UI, например "fold". В любом случае эффект будет использован с дефолтной продолжительностью и с дефолтным изингом.
• Object (Объект): If the value is an object, then effect, duration, and easing properties may be provided. If the effect property contains the name of a jQuery method, then that method will be used; otherwise it is assumed to be the name of a jQuery UI effect. When using a jQuery UI effect that supports additional settings, you may include those settings in the object and they will be passed to the effect. If duration or easing is omitted, then the default values will be used. If effect is omitted, then "fadeIn" will be used. Если значение является Объектом, тогда он должен содержать как свойства имя эффекта, продолжительность и изинг. Если свойства эффекта содержат имя метода jQuery, тогда этот метод будет использован. Иначе будет считаться, что это имя эффекта jQuery UI. Когда используется эффект jQuery UI, который поддерживает дополнительные сеттинги, вы можете включить эти сеттинги в объект, и они будут переданы эффекту. Если не задается продолжительность изинга, будут использованы дефолтные значения. Если не задается имя эффекта, будет использован "fadeIn".

Code examples: (Примеры кода: )
Initialize the tooltip with the show option specified:
Инициализация Тултипов с определенной опцией show:

$( ".selector" ).tooltip({ show: { effect: "blind", duration: 800 } });


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

// getter
var show = $( ".selector" ).tooltip( "option", "show" );
 
// setter
$( ".selector" ).tooltip( "option", "show", { effect: "blind", duration: 800 } );
tooltipClass
Type: String
Default: null

A class to add to the widget, can be used to display various tooltip types, like warnings or errors.
This may get replaced by the classes option.

Класс для добавления виджету. Может быть использован для показа разных типов Тултипов, таких как предупреждения или ошибки.
Может быть заменена с помощью опции classes (классы).

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

$( ".selector" ).tooltip({ tooltipClass: "custom-tooltip-styling" });


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

// getter
var tooltipClass = $( ".selector" ).tooltip( "option", "tooltipClass" );
 
// setter
$( ".selector" ).tooltip( "option", "tooltipClass", "custom-tooltip-styling" );



track
Type: Boolean
Default: false

Whether the tooltip should track (follow) the mouse.

Нужна ли трассировка мыши для Тултипа.

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

$( ".selector" ).tooltip({ track: true });


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

// getter
var track = $( ".selector" ).tooltip( "option", "track" );
 
// setter
$( ".selector" ).tooltip( "option", "track", true );



Methods (Методы)



close()
Closes a tooltip. This is only intended to be called for non-delegated tooltips.
• This method does not accept any arguments.

Закрывает Тултип. Предназначен для вызова только для неделегированных Тултипов.
• Этот метод не принимает никаких аргументов.

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



destroy()
Removes the tooltip 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" ).tooltip( "destroy" );



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

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

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



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

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

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



open()
Programmatically open a tooltip. This is only intended to be called for non-delegated tooltips.
• This method does not accept any arguments.

Программно открывает Тултип. Предназначен для вызова только для неделегированных Тултипов.
• Этот метод не принимает никаких аргументов.

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



option( optionName )
Returns: Object
Gets the value currently associated with the specified optionName.
Получает значение, связанное с определенным optionName (имя опции).
• optionName
Type: String
The name of the option to get.
Имя опции, для которой получаем значение.

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



option()
Returns: PlainObject
Gets an object containing key/value pairs representing the current tooltip options hash.
• This method does not accept any arguments.

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

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



option( optionName, value )
Sets the value of the tooltip option associated with the specified 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" ).tooltip( "option", "disabled", true );



option( options )
Sets one or more options for the tooltip.

Устанавливает одну или более опций для Тултипа.

• options
Type: Object
A map of option-value pairs to set.
Карта пар option-value (опция-значение) для установки.

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



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

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

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



Events (События)



close( event, ui )
Type: tooltipclose

Triggered when a tooltip is closed, triggered on focusout or mouseleave.

• event
Type: Event

• ui
Type: Object

◦ tooltip
Type: jQuery
The generated tooltip element.

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


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



create( event, ui )
Type: tooltipcreate

Triggered when the tooltip is created.

• event
Type: Event

• ui
Type: Object

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


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



open( event, ui )
Type: tooltipopen

Triggered when a tooltip is shown, triggered on focusin or mouseover.

• event
Type: Event

• ui
Type: Object

◦ tooltip
Type: jQuery
The generated tooltip element.

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


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



Overview (Обзор)
Tooltip replaces native tooltips, making them themable as well as allowing various customizations:

• Display other content than just the title, like inline footnotes or extra content retrieved via Ajax.
• Customize the positioning, e.g., to center the tooltip above elements.
• Add extra styling to customize the appearance, for warning or error fields.

A fade animation is used by default to show and hide the tooltip, making the appearance a bit more organic, compared to just toggling the visiblity. This can be customized with the show and hide options.

The items and content options need to stay in-sync. If you change one of them, you need to change the other.

In general, disabled elements do not trigger any DOM events. Therefore, it is not possible to properly control tooltips for disabled elements, since we need to listen to events to determine when to show and hide the tooltip. As a result, jQuery UI does not guarantee any level of support for tooltips attached to disabled elements. Unfortunately, this means that if you require tooltips on disabled elements, you may end up with a mixture of native tooltips and jQuery UI tooltips.

Тултипы заменяют ортодоксальные тултипы, делая их соответствующими теме сайта и позволяя разные кастомизации:

• Показывают больше контента, чем просто заголовок, такие как инлайновые заметки или экстра контент, обновляемый по технологии Ажакс.
• Кастомизируют положение Тултипов, например, по центру поверх всех элементов.
• Добавляют экстра стили для кастомизации появления, для полей предупреждения или ошибки.

Анимация fade (постепенное исчезновение/появление) используется по дефолту, чтобы показать или спрятать Тултип, делая появление более органичным и естественным по сравнению с простым включением/выключением видимости. Это может быть кастомизировано с помощью опций show (показать) и hide (спрятать).

Опции items (пункты) и content (контент) должны оставаться синхронными. Если вы меняете одну их них, необходимо изменить также и другую.

В основном выключенные (disabled) элементы не триггеруют какие-либо элементы ДОМа. Следовательно, невозможно нормально управлять Тултипами для выключенных элементов, т.к. нам нужно прослушать события для определения, когда показывать и прятать Тултип. В результате, jQuery UI не гарантирует поддержку Тултипов, прикрепленных к выключеннным элементам. К сожалению, это означает, что если вам требуются Тултипы для выключенных элементов, решение, в конце концов, может заключаться в использовании смеси ортодоксальных Тултипов и Тултипов jQuery UI.



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:



Example: Create a tooltip on the document, using event delegation for all elements with a title attribute.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>tooltip 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>
 
<p>
    <a href="#" title="Anchor description">Anchor text</a>
    <input title="Input help">
</p>
<script>
    $( document ).tooltip();
</script>
 
</body>
</html>



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



Примеры Тултипов на этом сайте: Дефолтный, Адаптированный, Формы, Трассировка, Анимированный, Контент, Видео Плейер.



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




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