【分享】原创网页TIPS无图片插件！3K完美搞定！
本文原创地址：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 ”,并且有关闭按钮 |
|||
