ligerUI 使用教程之Tip介紹與使用(草稿.1.1.4)

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' onclick='$(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(); //切換焦點
                        }                                       
                    });                                        
                });

 

 文中代碼重點部分都有注釋，如有發現錯誤，或者有更簡潔高效的寫法，歡迎指正，一起學習和提高。