<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../css/qfq-bs.css">
<title>Alert</title>
</head>
<body>
<div class="container">
<button id="showalert1">Show Alert 1</button>
<button id="showalert2">Show Alert 2</button>
<button id="showalert3">Show Alert 3 primed</button>
<button id="showmanyalert1">Show Many Alert 1</button>
<button id="showmodalalert1">Show Modal Alert 1</button>
<a id="alertinlink" onclick="
var alert = new QfqNS.Alert('Text being displayed', 'info', [
{ label: 'OK', eventName: 'ok' },
{ label: 'Cancel', eventName: 'cancel'}
]);
alert.on('alert.ok', function() {
window.location = $('#alertinlink').attr('href');
});
alert.show();
return false;
" href="http://www.google.ch">Link alert</a>
<div style="margin-top: 20ex">
<button onclick="alert('Button clicked')">Modal test button</button>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/EventEmitter.min.js"></script>
<script src="../js/qfq.debug.js"></script>
<script>
$(function () {
$('#showalert1').click(function () {
var alert = new QfqNS.Alert("This is alert 1", 'error', [{label: "OK", eventName: "ok", focus: true},
{label: "Cancel", eventName: "cancel"}]);
alert.on('alert.ok', function () {
console.log("OK button alert 1");
});
alert.on('alert.cancel', function () {
console.log("Cancel button alert 1");
});
alert.show();
});
$('#showalert2').click(function () {
var alert = new QfqNS.Alert("This is alert 2", 'warning');
alert.show();
});
$('#showalert3').click(function () {
var alert = new QfqNS.Alert({
message: "This is alert 3. Disappears after 3 secs.",
timeout: 3000
});
alert.show();
});
$('#showmanyalert1').click(function () {
var alert = new QfqNS.Alert("This is alert 1", "info");
alert.show();
alert = new QfqNS.Alert("This is alert 2", "warning");
alert.show();
alert = new QfqNS.Alert("This is alert 3", "error");
alert.show();
});
$('#showmodalalert1').click(function () {
var alert = new QfqNS.Alert(
{
message: "This is modal alert 1",
type: 'error',
buttons: [
{label: "OK", eventName: "ok", focus: true},
{label: "Cancel", eventName: "cancel"}
],
modal: true
}
);
alert.on('alert.ok', function () {
console.log("OK button modal alert 1");
});
alert.on('alert.cancel', function () {
console.log("Cancel button modal alert 1");
});
alert.show();
});
});
</script>
</div>
</body>
</html>