[js開源組件開發]tip提示組件

tip提示組件

常見的應用場景中，總是難免會遇到提示信息，比如顯示不完全時需要鼠標移上去顯示title，比如驗證時的錯誤提示，比如操作按鈕的輔助說明等，所以我獨立出來了一個小的js組件，tip提示組件。效果如下圖所示：

大概就是這樣了，不復雜的東西，也很實用。

它的DEMO實例請點擊這里http://lovewebgames.com/jsmodule/tip.html

它的源碼托管在github 請點擊這里https://github.com/tianxiangbing/tip

<table style="width:100%;"><tr>
            <td>
                <input type="button" value="右邊hover" id="btn-tip-right">
            </td>
            <td>
                <input type="button" value="左邊click" id="btn-tip-left">
            </td>
            <td>
                <input type="button" value="上邊click" id="btn-tip-top">
            </td>
            <td>
                <input type="button" value="下邊click" id="btn-tip-bottom">
            </td>
            <td align="right">
                <input type="button" value="按邊界click自動" id="btn-tip-auto">
            </td>
        </tr></table>
        文本提示：<input type="text" id="txt-tip" msg="請輸入內容">
        <script type="text/javascript" src="../src/jquery-1.11.2.js"></script>
        <script type="text/javascript" src="../src/tip.js"></script>
        <script>
        var tip = new Tip();
        tip.init({
            trigger: '#btn-tip-right',
            width:100,
            triggerEvent:'hover',
            content: 'loading...',
            ajax: function() {
                var dtd = $.Deferred(); // 新建一個deferred對象
                var wait = function(dtd) {
                    var tasks = function() {
                        console.log("執行完畢！");
                        dtd.resolve("這是提示信息啊這是提示信息啊這是提示信息啊這是提示信息啊這是提示信息啊這是提示信息啊"); // 改變deferred對象的執行狀態
                    };
                    setTimeout(tasks, 1000);
                    return dtd;
                };
                wait(dtd);
                return dtd;
            }
        });
        var tip_left= new Tip();
        tip_left.init({
            trigger:'#btn-tip-left',
            triggerEvent:'click',
            content: '這是提示信息啊',
            position:'left'
            });
        var tip_top= new Tip();
        tip_top.init({
            trigger:'#btn-tip-top',
            triggerEvent:'click',
            content: '這是提示信息啊',
            position:'top'
            });
        var tip_bottom= new Tip();
        tip_bottom.init({
            trigger:'#btn-tip-bottom',
            triggerEvent:'click',
            content: '這是提示信息啊',
            position:'bottom'
            });
        var tip_auto= new Tip();
        tip_auto.init({
            trigger:'#btn-tip-auto',
            triggerEvent:'click',
            width:100,
            content: '這是提示信息啊這是提示信息啊這是提示信息啊',
            inViewport:true
            });
        var t = $('#txt-tip').Tip({
            content:$('#txt-tip').attr('msg'),
            triggerEvent:'focus'
        })[0];
        </script>
    

 

API

屬性

trigger:[$|dom|string]

觸發元素,jquery對象或dom或string

 

triggerEvent: [click|hover|focus]

觸發事件，默認為hover,事件都委托在delegate參數上，focus不委托

 

delegate:[dom|string]

事件的委托節點,默認委托到body,focus無效.

 

tpl:[string]

html模板，默認<div class="ui-tip"><div class="ui-tip-content"></div><div class="ui-tip-arrow"><i></i><em></em></div></div>

 

offset:{x:0,y:0}

偏移量,默認x:0,y:0

 

width:[number]

寬

　　

height:[number]

高

　　

zIndex:999

z-index

　　

content:[string|$]

提示內容，這里可以是string或節點，因為內部是調用的$().html方法,動態設置請調setContent方法

　　

inViewport:bool

是否自適合窗口位置,默認false

 

position:['right'|'left'|'top'|'bottom']

顯示位置，默認'right

 

ajax:function

返回一個promise,參數為promise之后的內容如下：
        ajax: function() {
            var dtd = $.Deferred(); // 新建一個deferred對象
            var wait = function(dtd) {
                var tasks = function() {
                    console.log("執行完畢！");
                    dtd.resolve("這是提示信息啊"); // 改變deferred對象的執行狀態
                };
                setTimeout(tasks, 1000);
                return dtd;
            };
            wait(dtd);
            return dtd;
        }
    

 

方法

setContent:function(content)

設置提示內容

 

stop:function()

停止顯示

 

start:function

開始顯示

 

事件或回調

callback:function

顯示時的回調