ligerUI 使用教程之Tip介绍与使用
概述:
ligertip是ligerUI系列插件中的tooltip类插件,作用是弹一个浮动层,起提示作用
阅读本文要求具备jQuery的基本知识,不然文中的javascript代码不易理解
截图:
参数:
content | 气泡显示内容,支持html |
callback | 弹出tip后触发事件(例3) |
width | 气泡层宽度 |
x | tip的left(例2) |
y | tip的top(例2) |
target | domid(例2) |
用法:
例1 | 页面上某个或某些dom元素弹出tip以及关闭 |
例2 | 弹出一个可设置位置的tip以及关闭 |
例3 | 弹出一个5秒后自动关闭的tip |
例4 | 鼠标移入产生和移出关闭一个tip |
例5 | 弹一个可显示倒计时且结束时自动关闭的tip |
例6 | 弹一个内含关闭按钮的tip |
例7 | 用户注册:失去焦点后台验证用户名是否存在 |
例8 | 表单验证的例子(见官网 表单->表单验证) |
例1:
$(DOM).ligerTip({ content:“显示内容”}); //dom元素的右侧弹出tip
$(DOM).ligerHideTip(); //关闭弹出的tip
例2:
$.ligerTip({content:"显示内容",x:100,y:50,target:$("#DOMID")}); //弹出一个可设置位置的tip
$("#"+$("#DOMID").attr("ligertipid")).remove(); //关闭这个tip,这里用了jquery来移除tip
//注:x,y的设置仅对本方法有效
例3:
$("#DOMID").ligerTip({
content:”显示内容”,
callback:function()
{
setTimeout(function ()
{
$("#DOMID").ligerHideTip(); //5秒延迟后关闭tip
}, 5000);
}
});
例4:
$(DOM).hover(function ()
{$(this).ligerTip({content:" 显示内容”});},
function ()
{$(this).ligerHideTip();}
); //透过jquery的hover来赋值一个鼠标移入移出事件
例5:
$.ligerTip({
content:"倒计时:10",
width:100,
x:400,
y:100,
callback:function(t)
{
var i=10; //10秒倒计时
calctime(t,i);
}
});
function calctime(t,i) //这个函数用了递归来实现倒计时
{
i--;
(i>=0)
?setTimeout(function(){
$(".l-verify-tip-content",t).text("倒计时:"+i.toString());
calctime(t,i);},1000)
:$(t).remove();
}
例6:
$.ligerTip({
content:"test<br/><input type='button' value='关闭' class='l-button' οnclick='$(this).parent().parent().remove();'>",
width:100,
x:800,
y:300
}); //注意content里的关闭按钮写法,透过$(this).parent().parent()来定位到tip对象(按钮的父对象的父对象)
例7:
$("#text1").blur(function(){
$.post('后台post地址', [{ uid: $(this).val() ,Rnd: Math.random() }], function (result)
{
if (result == "Y") //后台数据库验证后返回值来进行匹配
{
$(this).ligerTip({ content:$(this).val()+"这个名字可以使用"});
}
else
{
$(this).ligerTip({ content:$(this).val()+"这个名字已被注册,请更换"});
$(this).focus(); //切换焦点
}
});
});
文中代码重点部分都有注释,如有发现错误,或者有更简洁高效的写法,欢迎指正,一起学习和提高。