本文原创地址:http://www.cnblogs.com/idche/archive/2010/09/17/ljtips.html 转载请注明。
请划过或点击下面带框的文本
看我这里一个DIV
提示在我的下面出现
提示在左边出现
提示出现2秒后会自动消失
提示可以有关闭按钮
不同担心页面放大缩小会位置会偏移哦
优点
- 1:兼容 各种浏览器
- 2:自己定义TIPS样式(颜色),CSS3渐进增强
- 3:多方向弹出提示
- 4:纯CSS+javascript(不包含任何图片)
- 5:体积超级小 CSS+js = 3k
参数配置
- ljtips(object).show(JSON)
- object: DOM对象ID(test1), DOM对象
-
json:{ content:提示的消息内容(必须), p:提示框位置(可选值top left bottom right),默认为right(可选), closeBtn:是否有关闭按钮(true false) 默认值(false)(可选), time:多少毫秒提示框消失(可选) }
ljtips 使用说明 | |||
---|---|---|---|
参数 | 返回值 | 方法说明 | |
ljtips() | String | element | Object | 返回tips对象,包含.show 和.hide()方法 |
显示和隐藏 | |||
.show() | JSON content:String | html, //提示内容,可以是HTML片段 p:String // 提示位置 上下左右 分别为 [top,bottom,left,right] clear:Boolean, //是否强制清除已经存在的提示 默认 false closeBtn:Boolean, // 是否有关闭按钮 默认false time:Number // 提示存在时间 默认不消失 | null | 在页面上显示提示信息 |
.hide() | 无 | 无 | 隐藏提示 |
例子 | |||
ljtips('#test').show({content:'hello world', time: 1000})//在 test 元素的右边(默认)提示“ hello world ”显示时间为1秒 | |||
var test = ljtips('#test')// 申明一个ljtips对象 test.show({content:'hello world',p:'top', closeBtn:true})//在 test 元素的上面提示“ hello world ”,并且有关闭按钮 |