你的位置:首页 > 软件开发 > Java > [js开源组件开发]tip提示组件

[js开源组件开发]tip提示组件

发布时间:2015-08-11 12:00:05
tip提示组件常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件。效果如下图所示:大概就是这样了,不复杂的东西,也很实用。它的DEMO实例请点击这 ...

[js开源组件开发]tip提示组件

tip提示组件

常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件。效果如下图所示:

[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='/images/loading.gif' data-original="../src/jquery-1.11.2.js"></script>    <script type="text/javascript" src='/images/loading.gif' data-original="../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>  

原标题:[js开源组件开发]tip提示组件

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。