#javascript #ratchet-2
#javascript #ratchet-2
Вопрос:
У меня есть всплывающее окно с храповым механизмом, и я взял его отсюда:
<div id="popover" class="popover">
<header class="bar bar-nav">
<h1 class="title">Popover title</h1>
</header>
<ul class="table-view">
<li class="table-view-cell">Item1</li>
<li class="table-view-cell">Item2</li>
</ul>
</div>
<header class="bar bar-nav">
<a href="#popover">
<h1 class="title">
Tap title
<span class="icon icon-caret"></span>
</h1>
</a>
</header>
и я хотел бы найти способ прослушать это закрытие всплывающего окна из JS (также используя jQuery)
Это код ratchet js для всплывающих окон:
!(function () {
'use strict';
var popover;
var findPopovers = function (target) {
var i;
var popovers = document.querySelectorAll('a');
for (; target amp;amp; target !== document; target = target.parentNode) {
for (i = popovers.length; i--;) {
if (popovers[i] === target) {
return target;
}
}
}
};
var onPopoverHidden = function () {
popover.style.display = 'none';
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
};
var backdrop = (function () {
var element = document.createElement('div');
element.classList.add('backdrop');
element.addEventListener('touchend', function () {
popover.addEventListener('webkitTransitionEnd', onPopoverHidden);
popover.classList.remove('visible');
popover.parentNode.removeChild(backdrop);
});
return element;
}());
var getPopover = function (e) {
var anchor = findPopovers(e.target);
if (!anchor || !anchor.hash || (anchor.hash.indexOf('/') > 0)) {
return;
}
try {
popover = document.querySelector(anchor.hash);
}
catch (error) {
popover = null;
}
if (popover === null) {
return;
}
if (!popover || !popover.classList.contains('popover')) {
return;
}
return popover;
};
var showHidePopover = function (e) {
var popover = getPopover(e);
if (!popover) {
return;
}
popover.style.display = 'block';
popover.offsetHeight;
popover.classList.add('visible');
popover.parentNode.appendChild(backdrop);
};
window.addEventListener('touchend', showHidePopover);
}());
Как я могу это сделать?
Спасибо
Ответ №1:
Здесь задокументировано, как вызвать событие. Проверьте это, если вы хотите настроить свои события так, чтобы они всплывали. По сути, инициируйте событие в вашем всплывающем окне следующим образом:
var event = new CustomEvent('pop', { "detail": { "id": popover.id, "type": "hide" }});
// Dispatch the event.
popover.dispatchEvent(event);
Внедрить некоторые триггеры событий в popovers.js . В частности, методы onPopoverHidden
и showHidePopover
var showHidePopover = function (e) {
var popover = getPopover(e);
if (!popover) {
return;
}
popover.style.display = 'block';
popover.offsetHeight;
popover.classList.add('visible');
popover.parentNode.appendChild(backdrop);
//create event
var event = new CustomEvent('pop', { "detail": { "id": popover.id, "type": "show" }});
// Dispatch the event.
popover.dispatchEvent(event);
};
var onPopoverHidden = function () {
popover.style.display = 'none';
popover.removeEventListener('webkitTransitionEnd', onPopoverHidden);
//create event
var event = new CustomEvent('pop', { "detail": { "id": popover.id, "type": "hide" }});
// Dispatch the event.
popover.dispatchEvent(event);
};
Прослушивание всплывающего окна путем присоединения прослушивателя событий к всплывающему окну, которое запускает события
// Listen for the event.
document.getElementById("menu-popover")
.addEventListener('pop', function (e) {
console.log(e.detail.id " " e.detail.type);
}, false);