(转)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:

1 2	$(DOM).ligerTip({ content:“显示内容”}); //dom元素的右侧弹出tip $(DOM).ligerHideTip(); //关闭弹出的tip

例2:

1 2 3

$.ligerTip({content:"显示内容",x:100,y:50,target:$("#DOMID")}); //弹出一个可设置位置的tip $("#"+$("#DOMID").attr("ligertipid")).remove(); //关闭这个tip，这里用了jquery来移除tip //注:x,y的设置仅对本方法有效

例3:

1 2 3 4 5 6 7 8 9 10

$("#DOMID").ligerTip({                                         content:”显示内容”,                                         callback:function()                                         {                                             setTimeout(function ()                                             {                                                 $("#DOMID").ligerHideTip(); //5秒延迟后关闭tip                                             }, 5000);                                         }                     });

例4:

1 2 3 4 5

$(DOM).hover(function ()     {$(this).ligerTip({content:" 显示内容”});},     function ()     {$(this).ligerHideTip();} ); //透过jquery的hover来赋值一个鼠标移入移出事件

例5:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$.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:

1 2 3 4 5 6

$.ligerTip({                             content:"test<br/><input type='button' value='关闭' class='l-button' onclick='$(this).parent().parent().remove();'>",                             width:100,                             x:800,                             y:300           }); //注意content里的关闭按钮写法，透过$(this).parent().parent()来定位到tip对象(按钮的父对象的父对象)

例7:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$("#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(); //切换焦点                         }                                                           });                                                        });

文中代码重点部分都有注释，如有发现错误，或者有更简洁高效的写法，欢迎指正，一起学习和提高。