一個簡潔的通知JS插件：notie.js

jopen 9年前發布 | 40K 次閱讀 notie.js Node.js 開發

notie.js是一個簡潔的消息通知JS插件(alert/growl風格) ，沒有任何依賴。示例 https://jaredreich.com/projects/notie.js

Alt text

  • 純JavaScript，沒有依賴，只有一個文件
  • 更改顏色以配合你的風格/品牌
  • 根據屏幕大小字體大小自動調整
  • Turn off bottom shadow for flat design, on for material design
  • Easily customizable
  • Override or add styling in a separate .css file (optional)

Usage

In your html: 

<body>
  ...
  <script src="/path/to/notie.js"></script>
</body>

In your javascript: 

notie.alert(style, 'message', time_in_seconds);
notie.confirm('Title text', 'Yes button text', 'No/cancel button text', yes_callback)

For example: 

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);
        });
    });
});

Options

At the top of notie.js you can change all the colors to match your style/brand, turn on or off the bottom shadow, and change the large and small font sizes that auto adjust based on screen width. 

// General
var shadow = true;
var font_size_small = '18px';
var font_size_big = '24px';
var animation_delay = 0.3;

// 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_color_background = '#4D82D6';
var confirm_color_yes_background = '#57bf57';
var confirm_color_no_background = '#E1715B';
var confirm_color_text = '#FFF';
var confirm_color_yes_text = '#FFF';
var confirm_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';

項目主頁：http://www.baiduhome.net/lib/view/home/1447510437975

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！