notie.js是一款简单实用的纯JavaScript消息提示插件。通过notie.js插件你可以制作Alert提示框,确认框和带输入的消息框。它使用纯JavaScript制作,没有任何外部依赖。它的特点还有:
- 纯JavaScript制作,没有外部依赖,只需引入一个js文件。
- 可以在所有现代浏览器中正常工作(Chrome, Firefox, Safari, IE9+, Edge, Opera)。
- 易于定制。
- 可以修改颜色。
- 字体大小会根据屏幕大小自动调整。
- 样式可以通过单独的CSS文件来重写。
安装
可以通过npm或Bower来安装notie.js插件。
npm install notie bower install notie
使用方法
使用该jQuery图表插件需要引入notie.js文件。
<script src="js/notie.js"></script>
调用插件
下面是notie.js调用Alert提示框,确认框和带输入的消息框的方法。
notie.alert(style_number, 'message', time_in_seconds); notie.confirm('Title text', 'Yes button text', 'No button text', yes_callback) notie.input('Title text', 'Submit button text', 'Cancel button text', 'type', 'placeholder', submit_callback, 'Optional pre-filled value');
例如:
notie.alert(1, 'Success!', 1.5); notie.alert(2, 'Warning<br><b>with</b><br><i>HTML</i><br><u>included.</u>', 2); notie.alert(3, 'Error.', 2.5); notie.alert(4, 'Information.', 2); notie.confirm('Are you sure you want to do that?', 'Yes', 'Cancel', function() { notie.alert(1, 'Good choice!', 2); }); notie.confirm('Are you sure?', 'Yes', 'Cancel', function() { notie.confirm('Are you <b>really</b> sure?', 'Yes', 'Cancel', function() { notie.confirm('Are you really <b>really</b> sure?', 'Yes', 'Cancel', function() { notie.alert(1, 'Okay, jeez...', 2); }); }); }); notie.input('Please enter your email address:', 'Submit', 'Cancel', 'email', 'name@example.com', function(value_entered) { notie.alert(1, 'You entered: ' + value_entered, 2); }); notie.input('What city do you live in?', 'Submit', 'Cancel', 'text', 'Enter your city:', function(value_entered) { notie.alert(1, 'You entered: ' + value_entered, 2); }, 'New York');
配置参数
下面是notie.js的一些可用配置参数:
//通用 var shadow = true; var font_size_small = '18px'; var font_size_big = '24px'; var font_change_screen_width = 600; var animation_delay = 0.3; var background_click_dismiss = true; // notie.alert colors var alert_color_success_background = '#57BF57'; var alert_color_warning_background = '#E3B771'; var alert_color_error_background = '#E1715B'; var alert_color_info_background = '#4D82D6'; var alert_color_text = '#FFF'; // notie.confirm colors var confirm_and_input_color_background = '#4D82D6'; var confirm_and_input_color_yes_background = '#57BF57'; var confirm_and_input_color_no_background = '#E1715B'; var confirm_and_input_color_text = '#FFF'; var confirm_and_input_color_yes_text = '#FFF'; var confirm_and_input_color_no_text = '#FFF'; // ID's for use within your own .css file (OPTIONAL) // (Be sure to use !important to override the javascript) // Example: #notie-alert-inner { padding: 30px !important; } var alert_outer_id = 'notie-alert-outer'; var alert_inner_id = 'notie-alert-inner'; var alert_text_id = 'notie-alert-text'; var confirm_outer_id = 'notie-confirm-outer'; var confirm_inner_id = 'notie-confirm-inner'; var confirm_backdrop_id = 'notie-confirm-backdrop'; var confirm_yes_id = 'notie-confirm-yes'; var confirm_no_id = 'notie-confirm-no'; var confirm_text_id = 'notie-confirm-text'; var confirm_yes_text_id = 'notie-confirm-yes-text'; var confirm_no_text_id = 'notie-confirm-no-text'; var input_outer_id = 'notie-input-outer'; var input_inner_id = 'notie-input-inner'; var input_backdrop_id = 'notie-input-backdrop'; var input_div_id = 'notie-input-div'; var input_field_id = 'notie-input-field'; var input_yes_id = 'notie-input-yes'; var input_no_id = 'notie-input-no'; var input_text_id = 'notie-input-text'; var input_yes_text_id = 'notie-input-yes-text'; var input_no_text_id = 'notie-input-no-text';
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!