【分享】原创网页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 ”,并且有关闭按钮

演示HTML下载 点击这个连接下载上面的演示HTML文件