promptJS

4.55KB - 一个小而实用的JS提示插件

观看演示 安装插件

演示！

基本功能

全端兼容，即插即用

初始化插件

var p = loadPrompt()
代码 
p.success('成功！')
代码 
p.warn('危险:|')
代码 
p.error('失败:('
代码 
p.inform('信息')

进阶功能

简单易用
代码 
var m = p.inform('把鼠标移过来试试',true)
不想要抖动？使用以下代码关闭 
// 关闭特定标签的抖动效果
m.noShake()
// 停止使用抖动效果
p.config.shake = false
代码 
p.clean()
代码 

var m = p.warn('再过两秒我就会变！',true);
    setTimeout(function(){
        m.modify('两秒后消失~');
        setTimeout(function(){
            m.remove()
    },2000)
},2000)
代码 

var m = p.error('再等两秒钟，马上就好！',true);
setTimeout(function(){
    m.switch('success');
    m.modify('我好了～')
    setTimeout(function(){
        m.remove()
    },2000)
},2000)
代码 

var m = p.inform('点我消失',true);
m.click(function(){m.remove()})

使用方法：

  1. 下载prompt.min.js

  2. 直接引入prompt.min.js，无需引入css文件

    <script src="path/to/prompt.min.js"></script>

你也可以把css与js分开引入：

  1. 下载prompt.js和prompt.css

  2. 引入prompt.js和prompt.css

    <link rel="stylesheet" href="path/to/prompt.css">
<script src="path/to/prompt.js"></script>

API说明

初始化插件

var p = loadPrompt(node)

node为插件的根目录，默认为document。用途：tag

功能列表

clean: 方法，清除所有正在显示的提示
config: 字典，插件功能配置
error: 方法，错误提示
inform: 方法，信息提示
success: 方法，成功提示
warn: 方法，危险提示

调用：p.功能

提示功能

p.inform(content, isKeep) // 例子

content:提示内容，可以传入string（使用innerHTML写入）和node。

isKeep:控制提示是否常驻。若为true，则返回提示操作列表

提示操作列表

var m = p.inform(123, true) // 例子
m{
click: 方法，传入点击事件所调用的方法。
modify: 方法，修改提示内容，
        与content选项相同。
noShake: 方法，关闭抖动。
node: 提示的DOM树。
remove: 方法，移除提示。
switch: 方法，更改提示类型,
        如m.switch("inform")。
}

插件功能配置

p.config{
classList: 列表，各提示对应的样式
            为switch选项服务。
displayTime: 数字，提示持续显示的毫秒数。
errorModel: DOM，提示模板
informModel: DOM，提示模板
shake: 布尔值，控制提示是否抖动。
successModel: DOM，提示模板
warnModel: DOM，提示模板
}

关于模板：创建模板的方法见源码。

IE9：需要引入classlist的polyfill，Github链接