Files
jquery-notify/examples/position.html
T
Leo Ding 4bc2d70f4c Make a nice top/bottom center global position
The example is in 'examples/position.html'
2016-02-16 11:55:18 +08:00

50 lines
1.2 KiB
HTML

<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="../dist/notify.js"></script>
<style type="text/css">
.boxes {
margin: 150px;
}
.box {
border: thin solid blue;
padding: 10px;
margin: 20px;
width: 100px;
}
.wrapper {
margin-top: 50px
}
</style>
<div class="boxes"></div>
<!-- run code -->
<script class="demo">
var positions = ["top", "right", "bottom", "left"];
var boxes = $(".boxes");
$.notify.defaults({ arrowShow: false })
$(function() {
$.each(positions, function(i, p) {
var box = $("<div class=\"box\">"+p+"</div>");
boxes.append($("<div class=\"wrapper\"/>").append(box));
box.notify(p, {position: p+" center"});
});
});
$.notify('Line text 1', {position: 'top center'});
$.notify('Line text 01', {position: 'top center'});
$.notify('Line text 001', {position: 'top center'});
$.notify('Line text 1', {position: 'bottom center'});
$.notify('Line text 01', {position: 'bottom center'});
$.notify('Line text 001', {position: 'bottom center'});
</script>
</body>
</html>