基于jquery的提示框JavaScript 插件，類Bootstrap
目錄- 基于jquery的提示框JavaScript 插件，類Bootstrap
- 原始碼
- 實體
- 用法
- 方法
- 示例
- IE兼容性
- 原始碼決議
原始碼
github地址：
https://github.com/Ethan-Xie/message
實體
通過此此插件可以為提示欄添加自動/點擊消失的功能
用法
需引入message.css與message.js
<link rel="stylesheet" href="https://www.cnblogs.com/dongmll/p/message.css">
<script src="https://www.cnblogs.com/dongmll/p/Message.js"></script>
為元素加上onclick="$.fn.msg('msg', { text: '警告訊息', type: 'warning', position: ' middle-center' })"事件函式，可以自動為元素添加點擊后，可以全域添加提示框功能，可以多次添加，如配置為了手動關閉，提示框會出現×字符，點擊會將其從DOM中洗掉
<button type="button" onclick="$.fn.msg('msg', { text: '警告訊息', type: 'warning', position: ' middle-center' })">
warning警告訊息 $.fn.msg('msg', { text: '警告訊息', type: 'warning', position: 'top-center' })
</button>
方法
$.fn.msg或者$().msg
讓元素具有提示框功能，如果再傳入配置
sticky:true代表不會自動消失， close:true代表提示資訊后面會自動添加“×”洗掉字符
- 其它可以傳入配置：
inEffect: {opacity: 'show'}, // 實作方式
inEffectDuration: 200, // 出現過渡時間
stayTime: 1000, //資訊停留時間
leaveTime: 600, // 資訊離開影片時間
text: '', // 提示內容
sticky: false, // 內容是否常駐界面
type: 'info', //型別：notice, warning, danger, success,info
position: 'top-center', //// top-left, top-center, top-right, middle-left, middle-center, middle-right
close: false, // 是否開啟開關功能
closeText: '?', //關閉的文字
示例
- 函式概述：
[email protected] create by xiethan on 19.12.17
* $().msg(str|object, [object])
* 概述： 方法可以呼叫網頁一個提示框, 依賴于jquery
* 引數：str: 提示框顯示的文字，樣式等設定為默認值
* object：一個設定集合物件：如：{ text: '我是測驗object', type: 'info', position: 'top-center' }，其它可以引數在文中上一段代碼
* str,[object]:str為呼叫庫的哪個(msg|removemsg)方法，object:與上一致
- 示例
最簡單呼叫方式： $.fn.msg('我是測驗str')
次簡單呼叫方式,不自動消失，并有關閉按鈕：$.fn.msg({ text: '我是測驗object', type: 'info', position: 'top-center',close: true,sticky:true })
info一般訊息 $.fn.msg('msg', { text: '一般訊息', type: 'info', position: 'top-center' })
notice通知訊息 $.fn.msg('msg', { text: '通知訊息', type: 'notice', position: 'top-center' })
success成功訊息 $.fn.msg('msg', { text: '成功訊息', type: 'success', position: 'top-center' })
warning警告訊息 $.fn.msg('msg', { text: '警告訊息', type: 'warning', position: 'top-center' })
danger危險訊息 $.fn.msg('msg', { text: '危險訊息', type: 'danger', position: 'top-center' })
IE兼容性
引入jquery<2.0下:支持>=IE8
原始碼決議
請閱讀 src/message.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/125540.html
標籤：其他
上一篇：聊一聊 JS 輸出為 [object object] 是怎么回事？
下一篇：單片機應用