MooTools - всплывающие подсказки
MooTools предоставляет различные подсказки для создания пользовательских стилей и эффектов. В этой главе мы изучим различные параметры и события всплывающих подсказок, а также несколько инструментов, которые помогут вам добавлять или удалять всплывающие подсказки из элементов.
Создание новой подсказки
Создать всплывающую подсказку очень просто. Сначала нам нужно создать элемент, к которому мы будем прикреплять всплывающую подсказку. Давайте рассмотрим пример, который создает тег привязки и добавляет его к классу Tips в конструкторе. Взгляните на следующий код.
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>Взгляните на код, используемый для создания всплывающей подсказки.
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);пример
В следующем примере объясняется основная идея всплывающих подсказок. Взгляните на следующий код.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>Вы получите следующий вывод -
Вывод
Параметры всплывающей подсказки
В Советы всего пять вариантов, и все они говорят сами за себя.
showDelay
Целое число, измеряемое в миллисекундах, определяет задержку перед отображением всплывающей подсказки при наведении курсора мыши на элемент. По умолчанию установлено 100.
hideDelay
Как и в случае с showDelay выше, это целое число (также измеряемое в миллисекундах) определяет, как долго ждать, прежде чем скрыть подсказку после того, как пользователь покинет элемент. По умолчанию установлено 100.
className
Это позволяет вам установить имя класса для обтекания всплывающей подсказки. По умолчанию установлено значение Null.
Смещение
Это определяет, как далеко от элемента будет отображаться всплывающая подсказка. «x» относится к правому смещению, где «y» - это смещение вниз (оба относительно курсора, ЕСЛИ для параметра «fixed» установлено значение false, в противном случае смещение относительно исходного элемента). По умолчанию x: 16, y: 16
Исправлена
Это устанавливает, будет ли всплывающая подсказка следовать за курсором мыши, если вы перемещаете элемент. Если вы установите для него значение true, всплывающая подсказка не будет перемещаться при перемещении курсора, но останется фиксированной относительно исходного элемента. По умолчанию установлено значение false.
Всплывающая подсказка События
События всплывающей подсказки остаются простыми, как и остальная часть этого класса. Есть два события - onShow и onHide, и они работают, как и следовало ожидать.
onShow ()
Это событие выполняется при появлении всплывающей подсказки. Если вы установите задержку, это событие не будет выполняться, пока задержка не истечет.
onHide ()
Всплывающая подсказка скрывается при выполнении этого события. Если есть задержка, это событие не будет выполняться, пока задержка не истечет.
Методы всплывающей подсказки
Для всплывающих подсказок есть два метода - прикрепить и отсоединить. Это позволяет вам нацелить определенный элемент и добавить его к объекту всплывающей подсказки (и, таким образом, сохранить все настройки в этом экземпляре класса) или отсоединить конкретный элемент.
прикреплять()
Чтобы присоединить новый элемент к объекту всплывающей подсказки, просто укажите объект подсказки, закрепку на .attach (); и, наконец, поместите селектор элемента в скобки ().
Syntax
toolTips.attach('#tooltipID3');dettach ()
Этот метод работает так же, как метод .attach, но результат полностью противоположен. Сначала укажите объект подсказки, затем добавьте .dettach () и, наконец, поместите селектор элементов в ().
Syntax
toolTips.dettach('#tooltipID3');Example
Давайте возьмем пример, объясняющий всплывающую подсказку. Взгляните на следующий код.
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
toolTipElement.fade(0);
$('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text',
'You can replace the href with whatever text you want.');
$('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>Вы получите следующий вывод -
Output