ligerUI 使用教程之Tip介绍与使用

概述:

    ligertip是ligerUI系列插件中的tooltip类插件,作用是弹一个浮动层,起提示作用

    阅读本文要求具备jQuery的基本知识,不然文中的javascript代码不易理解   

截图:

ligerUI 使用教程之Tip介绍与使用_第1张图片


参数:

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

 

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

你可能感兴趣的:(UI)