jQuery消息彈窗插件圖片
jQuery消息彈窗插件瀏覽器適配
- 支持Chrome所有版本
- 支持Firefox所有版本
- 支持Safari所有版本
- 支持IE11及以上版本
jQuery消息彈窗插件使用教程
類名為 VtMessage
使用:
VtMessage.error({ duration: 0, content: '左上', offset: 'vt-left-top vt-fixed', }); // VtMessage.error('錯誤'); VtMessage.info({ duration: 0, content: '中上', offset: 'vt-top-center vt-fixed' }); VtMessage.success({ duration: 0, content: '右上', offset: 'vt-right-top vt-fixed' });....
具體可查看 index.html 或閱讀源碼. / js / message.js
配置如下:
/** 配置**/
_config: { /*** 多少毫秒后關閉 <= 0 不關* @type {Number}*/ duration: 2500, /** * 背景色 * @type {boolean|string} */ background: false, /** * 前景色 * @type {null|string} */ color: null, /** * 提示內容 * @type {string} */ content: '', /** * 關閉時回調 * @type {null|Function} */ onclose: null, // 圖標 icon: '', /** * 自動關閉時 延遲多久后移除 * @type {number} */ animate_duration: 500, /** * 是否開啟關閉按鈕 * @type {boolean} */ closable: false, /** * 頭部* @type {boolean|string} bool = false */ header: false, /** * 標題 與 header 二者只能存其一 header 高于 title * @type {boolean|string} bool = false */ title: false, /*** 底部* @type {boolean|string} bool = false*/ footer: false, /*** 底部確認按鈕 用戶點擊回調 * @type {boolean|Function} bool = false */ confirm: function(cb) { cb(); }, /** * 底部確認按鈕文字 * @type {string} */ confirm_text: '確認', /** * 底部取消按鈕 用戶點擊回調 * @type {boolean|Function} bool = false */ cancel: function(cb) { cb(); }, /** * 底部取消按鈕文字* @type {string} */ cancel_text: '取消', /** * 寬度 高度 * @type {Array} ar[0] = 寬 ar[1] = 高 */ area: [], /** * 是否開啟遮罩 * @type {boolean} */ mask: false, /** * 父節點 * 父節點不存在會默認創建一個* @type {jQuery|string|HTMLElement|null|boolean} string = selector */ parent: null, /** * 是否移除父節點 * @type {boolean} */ remove_parent: false, /** * 位置 * @type {string} css class * 目前有 vt-right-top、vt-left-top、vt-top-center、vt-left-center、 * vt-center-center、vt-right-center、vt-left-bottom、vt-bottom-center、 * vt-right-bottom * 其中 vt-right-top、vt-left-top、vt-top-center 默認沒有使用 position: fixed * 如果需要使用 則加上 vt-fixed,如: vt-right-top vt-fixed * 每一個位置 css class 都有一個 同級 .vt-remove * 該參數最終會傳遞給 $.addClass() */ offset: 'vt-right-top', /** * 樣式* @type {null|Object} */ style: null, },
查看更多
jQuery消息彈窗插件下載地址
轉載必須注明來自: Chrome插件 ? jQuery消息彈窗插件