ExacTI
/
Toast
mirror of https://github.com/exacti/Toast.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Toast - A Bootstrap 4.2+ jQuery plugin for the toast component https://github.com/exacti/Toast
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 Commits
1 Branch
1 Tag
283 KiB
Tag: Branch: Tree: e756a7dad3
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e756a7dad3'
${ noResults }
Toast/example/index.html

166 lines
5.6 KiB
Raw Normal View History Unescape

Update includes the additon of: * Allow img in toast as is shown in the Bootstrap 4 documentation * Autoremove toast from DOM once hidden
6 years ago
<!DOCTYPE html>
<html lang="en">
Update example
6 years ago
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
Update includes the additon of: * Allow img in toast as is shown in the Bootstrap 4 documentation * Autoremove toast from DOM once hidden
6 years ago
Update example
6 years ago
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="../dist/toast.min.css ">
<script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.9.0/js/all.min.js"></script>
Update includes the additon of: * Allow img in toast as is shown in the Bootstrap 4 documentation * Autoremove toast from DOM once hidden
6 years ago
Update example
6 years ago
<title>Toast</title>
Update includes the additon of: * Allow img in toast as is shown in the Bootstrap 4 documentation * Autoremove toast from DOM once hidden
6 years ago
</head>
<body>
Update example
6 years ago
<button class="btn-block btn-primary" onclick="show_random_toast();">Show Random Toast</button>
<br>
<button class="btn-block btn-primary" onclick="show_random_toast(true);">Pause on Hover</button>
<br>
<button class="btn-block btn-primary" onclick="show_image_toast();">Show Image Toast</button>
<br>
<button class="btn-block btn-primary" onclick="show_ico_toast();">Show Icon Toast</button>
<br>
<button class="btn-block btn-primary" onclick="show_prepend_toast();">Show Prepend Toast</button>
<br>
<button class="btn-block btn-primary" onclick="show_random_snack();">Show Random Snack</button>
<br>
<button class="btn-block btn-primary" onclick="show_toast_in_container();">Show Toast in Container</button>
<div class="mt-5 bg-secondary vh-100" id="my_container">
<p>My container</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="../dist/toast.min.js"></script>
<script>
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
});
const TYPES = ['info', 'warning', 'success', 'error', 'dark', 'white', 'transparent', 'light', 'primary', 'secondary'],
TITLES = {
'info': 'Notice!',
'success': 'Awesome!',
'warning': 'Watch Out!',
'error': 'Doh!',
'dark': 'Dark Title',
'white': 'White Title',
'transparent': 'Transparent title',
'light': 'Light Title',
'primary': 'Primary title',
'secondary': 'Secondary title'
},
CONTENT = {
'info': 'Hello, world! This is a toast message.',
'success': 'The action has been completed.',
'warning': 'It\'s all about to go wrong',
'error': 'It all went wrong.',
'dark': 'Dark Content',
'white': 'White content',
'transparent': 'Transparent content',
'light': 'Light content',
'primary': 'Primary content',
'secondary': 'Secondary content'
};
function show_random_toast(pause_on_hover = false) {
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
title = TITLES[type],
content = CONTENT[type];
$.toast({
title: title,
subtitle: '11 mins ago',
content: content,
type: type,
pause_on_hover: pause_on_hover,
delay: 5000
Update includes the additon of: * Allow img in toast as is shown in the Bootstrap 4 documentation * Autoremove toast from DOM once hidden
6 years ago
});
Update example
6 years ago
}
function show_image_toast() {
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
title = TITLES[type],
content = CONTENT[type];
$.toast({
title: title,
subtitle: '11 mins ago',
content: content,
type: type,
delay: 5000,
img: {
src: 'https://via.placeholder.com/25',
class: 'rounded',
title: 'Thumbnail Title',
alt: 'Alternative'
}
});
}
function show_ico_toast() {
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
title = TITLES[type],
content = CONTENT[type];
$.toast({
title: title,
subtitle: '11 mins ago',
content: content,
type: type,
delay: 5000,
ico: '<i class="fas fa-home"></i>'
});
}
function show_prepend_toast() {
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
title = TITLES[type],
content = CONTENT[type];
$.toast({
title: title,
subtitle: '11 mins ago',
content: content,
type: type,
delay: 5000,
prepend: true,
ico: '<i class="fas fa-smoking"></i>'
});
}
Update includes the additon of: * Allow img in toast as is shown in the Bootstrap 4 documentation * Autoremove toast from DOM once hidden
6 years ago
Update example
6 years ago
function show_random_snack() {
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
content = CONTENT[type].replace('toast', 'snack');
$.toast({
title: content,
type: type,
delay: 5000
});
}
function show_toast_in_container() {
let type = TYPES[Math.floor(Math.random() * TYPES.length)],
title = TITLES[type],
content = CONTENT[type];
$.toast({
title: title,
subtitle: '11 mins ago',
content: content,
type: type,
delay: 5000,
container: $("#my_container")
});
}
</script>
Update includes the additon of: * Allow img in toast as is shown in the Bootstrap 4 documentation * Autoremove toast from DOM once hidden
6 years ago
</body>
update example
6 years ago
</html>