js-alert
Version:
A simple JavaScript popup alert manager.
263 lines (138 loc) • 5.04 kB
HTML
<html>
<head>
<title>JSAlert tests</title>
<script src='dist/jsalert.min.js'></script>
<style>
.button {
display: inline-block;
margin: 10px;
padding: 10px 20px;
border: 1px solid #08F;
border-radius: 4px;
color: #08F;
cursor: pointer;
font-family: Helvetica Neue, Helvetica, Arial;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Header -->
<h1>JSAlert tests</h1>
<!-- Test categories -->
<h2>Displaying alerts</h2>
<div id='test01' class='button'>Simple alert</div>
<script>
// Display a simple alert
document.querySelector("#test01").addEventListener("click", function() {
JSAlert.alert("Hello from JSAlert version " + JSAlert.version + "!");
});
</script>
<div id='test02' class='button'>Alert with title</div>
<script>
// Display an alert with a custom title
document.querySelector("#test02").addEventListener("click", function() {
JSAlert.alert("The content goes here.", "My custom alert title");
});
</script>
<div id='test03' class='button'>Queued alerts</div>
<script>
// Display 3 alerts in a row. Alerts are automatically queued.
document.querySelector("#test03").addEventListener("click", function() {
JSAlert.alert("This is the first alert.");
JSAlert.alert("This is the second alert.");
JSAlert.alert("This is the third and final alert.");
});
</script>
<div id='test04' class='button'>Confirm alert</div>
<script>
// Display a confirm alert
document.querySelector("#test04").addEventListener("click", function() {
JSAlert.confirm("Are you sure you want to delete this file?").then(function(result) {
// Check if pressed yes
if (!result)
return;
// User pressed yes!
JSAlert.alert("File deleted!");
});
});
</script>
<div id='test05' class='button'>Prompt</div>
<script>
// Display a confirm alert
document.querySelector("#test05").addEventListener("click", function() {
JSAlert.prompt("Enter your name:", "John Smith").then(function(result) {
// Check if successful
if (!result)
return;
// User entered their name
JSAlert.alert("Hello <b>" + result + "</b>!");
});
});
</script>
<div id='test06' class='button'>Loader</div>
<script>
// Display a loader overlay
document.querySelector("#test06").addEventListener("click", function() {
JSAlert.loader("Please wait...").dismissIn(2000);
});
</script>
<!-- Test categories -->
<h2>Events</h2>
<div id='test-events01' class='button'>Dismiss event</div>
<script>
// Listen for the event.
document.querySelector("#test-events01").addEventListener("click", function() {
JSAlert.alert("This alert has an event listener!").then(function() {
document.querySelector("#test-events01").innerText = "Alert dismissed!";
});
});
</script>
<!-- Test categories -->
<h2>Icons</h2>
<div id='test-icons01' class='button'>Information icon</div>
<script>
// Show with icon
document.querySelector("#test-icons01").addEventListener("click", function() {
JSAlert.alert("<code>JSAlert.Icons.Information</code>", null, JSAlert.Icons.Information);
});
</script>
<div id='test-icons02' class='button'>Warning icon</div>
<script>
// Show with icon
document.querySelector("#test-icons02").addEventListener("click", function() {
JSAlert.alert("<code>JSAlert.Icons.Warning</code>", null, JSAlert.Icons.Warning);
});
</script>
<div id='test-icons03' class='button'>Question icon</div>
<script>
// Show with icon
document.querySelector("#test-icons03").addEventListener("click", function() {
JSAlert.alert("<code>JSAlert.Icons.Question</code>", null, JSAlert.Icons.Question);
});
</script>
<div id='test-icons04' class='button'>Success icon</div>
<script>
// Show with icon
document.querySelector("#test-icons04").addEventListener("click", function() {
JSAlert.alert("<code>JSAlert.Icons.Success</code>", null, JSAlert.Icons.Success);
});
</script>
<div id='test-icons05' class='button'>Failed icon</div>
<script>
// Show with icon
document.querySelector("#test-icons05").addEventListener("click", function() {
JSAlert.alert("<code>JSAlert.Icons.Failed</code>", null, JSAlert.Icons.Failed);
});
</script>
<div id='test-icons06' class='button'>Deleted icon</div>
<script>
// Show with icon
document.querySelector("#test-icons06").addEventListener("click", function() {
JSAlert.alert("<code>JSAlert.Icons.Deleted</code>", null, JSAlert.Icons.Deleted);
});
</script>
</body>
</html>