Реализация подобных сообщений не составляет большого труда, и у меня не вызвала, однако случилось так что при развитии проекта количество кода отвечающего лишь за подобного рода сообщения выросло до нежелательных размеров, да и интернационализацию подтягивать с яваскрипта не очень приятно. Решил упростить себе жизнь и написать универсальный обработчик таких сообщений, что с этого вышло смотрите сами.
Начнем с ТЗ : по клику на элемент с определенным классом (пусть будет need-confirmation) вывести пользователю сообщение (будем хранить его в атрибуте title нашего элемента) и предотвратить дальнейшее всплывание события и его поведение по умолчанию (переход по ссылке для элементов <a>). При получении подтверждения запустить обработчики событий для данного элемента и выполнить действие по умолчанию для ссылок.
<!doctype html>
<html>
<head>
<title>Unified confirmations</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.need-confirm').on('click', function (e) {
var self = $(this);
if (!self.data('confirmed')){
e.stopImmediatePropagation();
e.preventDefault();
// Simulate confirmation by any dialog type (jquery ui for example)
setTimeout(function () {
if (confirm(self.attr('title'))){
self.data('confirmed', true);
self.trigger($.Event('click')); // Trigger another handlers and default handlers i.e. form submition ...
if (self.prop('href')) { // but if this a link
var target = (self.prop('target') || '_self').replace(/^_/, '').toLowerCase();
if (target == 'blank') {
window.open(self.prop('href'));
} else {
if (window.frames[target]) {
window.frames[target].location = self.prop('href');
} else {
window.open(self.prop('href'), 'target');
}
}
}
}
}, 500);
return false;
}
self.data('confirmed', false);
return true;
});
$('a').on('click', function () {
$('body').append('Handler on ' + this.href + ' target ' + this.target + '</br>');
});
});
</script>
</head>
<body>
<a href="http://google.com" target="_blank" class="need-confirm" title="Create new window with google?">Test</a>
<a href="#porno-site" target="_top" class="need-confirm" title="Open porno site ?">Test</a>
<a href="http://www.msn.com/" target="my_frame" class="need-confirm"r title="Looking for bad ass ?">Test</a>
<a href="#regular-test" class="need-confirm">Test</a>
</body>
</html>
В заключение скажу, что навешивать такой обработчик необходимо первым так как он не сможет остановить обработчики которые были навешаны раньше его.
Комментариев нет:
Отправить комментарий