Zebra_Dialog has no dependencies other than jQuery 1.4.1+
website:https://github.com/stefangabos/Zebra_Dialog/
截止目前为止,该项目已经一年多没有人维护了。
1.加载
<!--link rel="stylesheet" href="public/css/reset.css" type="text/css"--> <link rel="stylesheet" href="public/css/flat/zebra_dialog.css" type="text/css"> <!--link rel="stylesheet" href="public/css/style.css" type="text/css"--> <link rel="stylesheet" href="libraries/highlight/public/css/ir_black.css" type="text/css"> <script type="text/javascript" src="public/js/jquery-1.10.2.js"></script> <script type="text/javascript" src="libraries/highlight/public/javascript/highlight.js"></script> <script type="text/javascript" src="public/js/zebra_dialog.js"></script> <script type="text/javascript" src="public/js/main.js"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad(); </script>
2. 默认对话框
<strong>1.</strong> Default dialog box, no custom settings. Click <a href="javascript:void(0)" id="example1">here</a> to open.
$(‘#example1‘).bind(‘click‘, function(e) { e.preventDefault(); $.Zebra_Dialog(‘<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery‘); });
效果:
3. 对话框类型
3.1 error
$(‘#example2_1‘).bind(‘click‘, function(e) { e.preventDefault(); $.Zebra_Dialog(‘<strong>Zebra_Dialog</strong> has no dependencies other than <em>jQuery 1.5.2+</em> and works in all major‘ + ‘ browsers like<br>- Firefox<br>- Opera<br>- Safari<br>- Chrome<br>- Internet Explorer 6+‘, { ‘type‘: ‘error‘, ‘title‘: ‘Error‘ }); });
效果:
3.2 warning
$(‘#example2_2‘).bind(‘click‘, function(e) { e.preventDefault(); $.Zebra_Dialog(‘<strong>Zebra_Dialog</strong> is meant to replace JavaScript\‘s <em>alert</em> and <em>confirmation</em>‘ + ‘ dialog boxes. <br><br> Can also be used as a notification widget - when configured to show no buttons and to close‘ + ‘ automatically - for updates or errors, without distracting users from their browser experience by displaying obtrusive alerts.‘, { ‘type‘: ‘warning‘, ‘title‘: ‘Warning‘ }); });
3.3 question
$(‘#example2_3‘).bind(‘click‘, function(e) { e.preventDefault(); $.Zebra_Dialog(‘<strong>Zebra_Dialog</strong> can generate 5 types of dialog boxes: confirmation, information, ‘ + ‘ warning, error and question.<br><br>The appearance of the dialog boxes is easily customizable by changing the CSS file ‘, { ‘type‘: ‘question‘, ‘title‘: ‘Question‘ }); });
效果:
3.4 information
$(‘#example2_4‘).bind(‘click‘, function(e) { e.preventDefault(); $.Zebra_Dialog(‘<strong>Zebra_Dialog</strong> dialog boxes can be positioned anywhere on the screen - not just in the middle!‘ + ‘<br><br>By default, dialog boxes can be closed by pressing the ESC key or by clicking anywhere on the overlay.‘, { ‘type‘: ‘information‘, ‘title‘: ‘Information‘ }); });
效果:
3.5 confirm
$(‘#example2_5‘).bind(‘click‘, function(e) { e.preventDefault(); $.Zebra_Dialog(‘<strong>Zebra_Dialog</strong> is a small (6KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+)‘ + ‘ and highly configurable dialog box plugin for jQuery meant to replace JavaScript\‘s <em>alert</em> and <em>confirmation</em> dialog boxes.‘, { ‘type‘: ‘confirmation‘, ‘title‘: ‘Confirmation‘ }); });
效果:
4. 对话框回调
$(‘#example31‘).bind(‘click‘, function(e) { e.preventDefault(); $.Zebra_Dialog(‘<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery‘, { ‘type‘: ‘question‘, ‘title‘: ‘Custom buttons‘, ‘buttons‘: [ {caption: ‘Yes‘, callback: function() { alert(‘"Yes" was clicked‘)}}, {caption: ‘No‘, callback: function() { alert(‘"No" was clicked‘)}}, {caption: ‘Cancel‘, callback: function() { alert(‘"Cancel" was clicked‘)}} ] }); });
效果:
5. iframe
$(‘#example61‘).bind(‘click‘, function(e) { e.preventDefault(); $.Zebra_Dialog(‘<strong>A Wikipedia page</strong><br><br>‘, { source: {‘iframe‘: { ‘src‘: ‘http://en.m.wikipedia.org/wiki/Dialog_box‘, ‘height‘: 500 }}, width: 800, title: ‘External content loaded in an iFrame‘ }); });
效果:
时间: 2024-10-04 04:15:53