[js開源組件開發(fā)]tip提示組件

2024-04-27 15:00:29

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

tip提示組件

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

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

它的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="請輸入內(nèi)容">        <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("執(zhí)行完畢！");                        dtd.resolve("這是提示信息啊這是提示信息啊這是提示信息啊這是提示信息啊這是提示信息啊這是提示信息啊"); // 改變deferred對象的執(zhí)行狀態(tài)                    };                    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]`

觸發(fā)元素,jquery對象或dom或string

triggerEvent: `[click|hover|focus]`

觸發(fā)事件，默認(rèn)為hover,事件都委托在delegate參數(shù)上，focus不委托

delegate:`[dom|string]`

事件的委托節(jié)點,默認(rèn)委托到body,focus無效.

tpl:`[string]`

html模板，默認(rèn)<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}`

偏移量,默認(rèn)x:0,y:0

width:`[number]`

寬

height:`[number]`

高

zIndex:`999`

z-index

content:[string|$]

提示內(nèi)容，這里可以是string或節(jié)點，因為內(nèi)部是調(diào)用的$().html方法,動態(tài)設(shè)置請調(diào)setContent方法

inViewport:`bool`

是否自適合窗口位置,默認(rèn)false

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

顯示位置，默認(rèn)'right

ajax:`function`

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