シンプルãªé€šçŸ¥ã‚’実装ã§ãã‚‹ JavaScript プラグイン『notie.jsã€ã®ä½¿ã„æ–¹
オレ㮠Advent Calendar 2015 - Adventar ã® 16 日目ã§ã™.
phpshpot ã•ã‚“ã®ã‚¨ãƒ³ãƒˆãƒªãƒ¼ 『ページã®ä¸Šã‹ã‚‰å‡ºã¦ãる通知窓を表示ã™ã‚‹ã“ã¨ãŒã§ãる「notie.jsã€:phpspot開発日誌〠ã§ç´¹ä»‹ã•ã‚Œã¦ã„㟠notie.js を使ã£ã¦ã¿ã¾ã—ãŸ.
良ã„æ„Ÿã˜ã ã£ãŸã®ã§å®Ÿéš›ã«å‹•ã動作サンプルå«ã‚紹介ã—ãŸã„ã¨æ€ã„ã¾ã™.
『notie.jsã€ã¨ã¯ï¼Ÿ
å…¬å¼ã‚ˆã‚Š
A clean and simple notification plugin (alert/growl style) for javascript, with no dependencies.
JavaScript ã®ãŸã‚ã§ã‚¯ãƒªãƒ¼ãƒ³(ãŠãらãä¾å˜æ€§ãŒãªã„ã£ã¦ã“ã¨)ã§ã‚·ãƒ³ãƒ—ルãªé€šçŸ¥ãƒ©ã‚¤ãƒ–ラリã§ã™. çš„ãªã“ã¨ãŒæ›¸ã‹ã‚Œã¦ã„ã¾ã™.
- Official ... https://jaredreich.com/projects/notie.js/
- Github ... https://github.com/jaredreich/notie.js
『notie.jsã€ãƒ‡ãƒ¢
『notie.jsã€ã®ä½¿ã„æ–¹
Install
cdn 経緯ã§èªã¿è¾¼ã¿ã¾ã™.
github を見るé™ã‚Šã ã¨ã¾ã リリースãƒãƒ¼ã‚¸ãƒ§ãƒ³ãŒãªã„よã†ã ã£ãŸã®ã§ commit ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã‚’ã—ã¦ã„ã—㦠cdngit 経由ã§èªã¿è¾¼ã‚“ã§ã„ã¾ã™.
<body>
...
<script src='https://cdn.rawgit.com/jaredreich/notie.js/a9e4afbeea979c0e6ee50aaf5cb4ee80e65d225d/notie.js'></script>
</body>
head ã§èªã¿è¾¼ã‚€ã¨ã‚¨ãƒ©ãƒ¼ã«ãªã‚‹ã¿ãŸã„ãªã®ã§ body ã§èªã¿è¾¼ã‚€ã‚ˆã†ã«ã£ã¦ã¨ã“ã ã‘ã”注æ„ãã ã•ã„.
Usage
ã‚ã¨ã¯å®Ÿéš›ã« notie ã®æŒã¤ãƒ¡ã‚½ãƒƒãƒ‰ã‚’呼ã¶ã ã‘ã§ã™.
notie.alert
alert ã§ã™.
notie.alert(style_number, 'message', time_in_seconds);
notie.confirm
confirm(Yes/no) ã§ã™ã.
notie.confirm('Title text', 'Yes button text', 'No button text', yes_callback)
最後ã®ã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯ã¯ yes ã®ã¨ãã®ã¿å‘¼ã°ã‚Œã‚‹ã“ã¨ã«ã”注æ„ãã ã•ã„.
notie.input
インプットã§ã™ã. テã‚ストを入力ã§ãã¾ã™. コールãƒãƒƒã‚¯ã¯ yes ã‚’é¸æŠžã—ãŸã¨ãã ã‘呼ã°ã‚Œã¦, 第一引数ã«å…¥åŠ›ã—ãŸå†…容ãŒæ¸¡ã•ã‚Œã¾ã™.
notie.input('Title text', 'Submit button text', 'Cancel button text', 'type', 'placeholder', submit_callback, 'Optional pre-filled value');