ligerUI 使用教程之Tip介绍与使用(草稿.1.1.4)

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

概述:

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

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

截图:


参数:

content气泡显示内容,支持html
callback弹出tip后触发事件(例3)
width气泡层宽度
xtip的left(例2)
ytip的top(例2)
targetdomid(例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(); //切换焦点
                        }                                       
                    });                                        
                });

 

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

 

转载于:https://www.cnblogs.com/vazumi/archive/2012/01/14/2322184.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值