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:,
triggerEvent:'hover',
content: 'loading...',
ajax: function() {
var dtd = $.Deferred(); // 新建一个deferred对象
var wait = function(dtd) {
var tasks = function() {
console.log("执行完毕!");
dtd.resolve("这是提示信息啊这是提示信息啊这是提示信息啊这是提示信息啊这是提示信息啊这是提示信息啊"); // 改变deferred对象的执行状态
};
setTimeout(tasks, );
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:,
content: '这是提示信息啊这是提示信息啊这是提示信息啊',
inViewport:true
});
var t = $('#txt-tip').Tip({
content:$('#txt-tip').attr('msg'),
triggerEvent:'focus'
})[];
</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:,y:

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, );
return dtd;
};
wait(dtd);
return dtd;
}

方法

setContent:function(content)

设置提示内容

stop:function()

停止显示

start:function

开始显示

事件或回调

callback:function

显示时的回调

[js开源组件开发]tip提示组件的更多相关文章

  1. [js开源组件开发]table表格组件

    table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...

  2. Vue.js高效前端开发 • 【Vue组件】

    全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...

  3. [js开源组件开发]ajax分页组件

    ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

  4. [js开源组件开发]数字或金额千分位格式化组件

    数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和 ...

  5. [js开源组件开发]query组件,获取url参数和form表单json格式

    query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……, ...

  6. React-Native 组件开发方法

    前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...

  7. Vue企业级优雅实战04-组件开发01-SVG图标组件

    (后续的文章 公众号会提前一周更新,欢迎关注文末的微信公众号:程序员搞艺术) 预览本文的实现效果: # gitee git clone git@gitee.com:cloudyly/dscloudy- ...

  8. 自定义组件开发:使用v-model封装el-pagination组件

    1.前言 通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个. 2.背景 2.1.常规分页处理方法 利用el-pag ...

  9. Delphi组件开发教程指南目录

    用Delphi开发的时间也不短了!刚接触Delphi的时候,就觉得组件这个东西非常方便!根本不必知道组件内部的作为,只要使用就好了!然而用的多了,也不免会对各种delphi组件的内部实现方式产生兴趣! ...

随机推荐

  1. php分享(三十六)mysql中关联表更新

    一:关联不同的表更新 1: 通过where关联更新 update student s, city c set s.province_name = c.province_name, s.city_nam ...

  2. [OpenCV] Samples 05: convexhull

    得到了复杂轮廓往往不适合特征的检测,这里再介绍一个点集凸包络的提取函数convexHull,输入参数就可以是contours组中的一个轮廓,返回外凸包络的点集 ---- 如此就能去掉凹进去的边. 对于 ...

  3. 电路相关知识--读<<继电器是如何成为CPU的>>

    电路相关知识–读<<继电器是如何成为CPU的>> */--> *///--> *///--> 电路相关知识–读<<继电器是如何成为CPU的> ...

  4. Azure China (12) 域名备案问题

    <Windows Azure Platform 系列文章目录> (1) 默认情况下,我们在创建的Azure 服务,默认使用的DNS地址为: http://xxx.chinacloudapi ...

  5. javascript时间戳和日期字符串相互转换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. 记一个同时支持模糊匹配和静态推导的Atom语法补全插件的开发过程: 序

    简介 过去的一周,都睡的很晚,终于做出了Atom上的APICloud语法提示与补全插件:apicloud_autocomplete.个中滋味,感觉还是有必要记录下来的.代码基于 GPL-3.0 开源, ...

  7. 番外特别篇之 为什么我不建议你直接使用UIImage传值?--从一个诡异的相册九图连读崩溃bug谈起

    关于"番外特别篇" 所谓"番外特别篇",就是系列文章更新期间内,随机插入的一篇文章.目前我正在更新的系列文章是 实现iOS图片等资源文件的热更新化.但是,这两天 ...

  8. Android系统如何录制屏幕(录制成mp4格式)

    不管是教学,还是为了演示,如果能将Android手机(或平板)的屏幕录制成视频文件,那是一件非常酷的事(iOS8已经提供了这一功能,能通过OS X直接在Mac上录制iPad.iPhone的屏幕,win ...

  9. Spring MVC 原理介绍(执行流程)

    Spring MVC工作流程图   图一   图二    Spring工作流程描述       1. 用户向服务器发送请求,请求被Spring 前端控制Servelt DispatcherServle ...

  10. Python语言特性之4:类变量和实例变量

    类变量就是供类使用的变量,实例变量就是供实例使用的.如下面的代码: class Person: name = "Tacey" p1 = Person() p2 = Person() ...