[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:,
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提示组件的更多相关文章
- [js开源组件开发]table表格组件
table表格组件 表格的渲染组件,demo请点击http://lovewebgames.com/jsmodule/table.html,git源码请点击https://github.com/tian ...
- Vue.js高效前端开发 • 【Vue组件】
全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...
- [js开源组件开发]ajax分页组件
ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
- [js开源组件开发]数字或金额千分位格式化组件
数字或金额千分位格式化组件 这次距离上一个组件<[js开源组件开发]table表格组件>时隔了一个月,由于最近的项目比较坑,刚挖完坑,所以来总结性提出来几个组件弥补这次的空缺,首先是金额和 ...
- [js开源组件开发]query组件,获取url参数和form表单json格式
query组件,获取url参数和form表单json格式 距离上次的组件[js开源组件开发]ajax分页组件一转眼过去了近二十天,或许我一周一组件的承诺有了质疑声,但其实我一直在做,只是没人看到……, ...
- React-Native 组件开发方法
前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...
- Vue企业级优雅实战04-组件开发01-SVG图标组件
(后续的文章 公众号会提前一周更新,欢迎关注文末的微信公众号:程序员搞艺术) 预览本文的实现效果: # gitee git clone git@gitee.com:cloudyly/dscloudy- ...
- 自定义组件开发:使用v-model封装el-pagination组件
1.前言 通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了,但看了一圈,总是不如意,于是决定还是自己动手搞一个. 2.背景 2.1.常规分页处理方法 利用el-pag ...
- Delphi组件开发教程指南目录
用Delphi开发的时间也不短了!刚接触Delphi的时候,就觉得组件这个东西非常方便!根本不必知道组件内部的作为,只要使用就好了!然而用的多了,也不免会对各种delphi组件的内部实现方式产生兴趣! ...
随机推荐
- IO流-概览
一. 抽象类InputStream和OutputStream构成了了IO类的基础 因为面向字节流的对象不便于处理Unicode形式储存的信息,所以从抽象类Reader和Writer中继承出专门用于处理 ...
- 什么才是正确的javascript数组检测方式
前面的话 对于确定某个对象是不是数组,一直是数组的一个经典问题.本文专门将该问题择出来,介绍什么才是正确的javascript数组检测方式 typeof 首先,使用最常用的类型检测工具——typeof ...
- javaweb -- 获取请求IP(附实现源码)
实现步骤如下: (1)新建一个java web工程 (2)新建servers包,新建类GetRequestIp,用来处理获取请求IP,GetRequestIp类完整代码如下: package serv ...
- linux分享六:字符串处理
一:cut (1)其语法格式为:cut [-bn] [file] 或 cut [-c] [file] 或 cut [-df] [file] 使用说明cut 命令从文件的每一行剪切字节.字符和字段并将这 ...
- [转载]"百度方法+"案例—从持续集成到持续交付
前言 百度开放云(https://bce.baidu.com)是百度基于十五年基础架构核心技术积累推出的云服务,目前推出了14个云计算产品和9个大数据产品,并提供数字营销云.在线教育.物联网等10种解 ...
- 【知识积累】DES算法之C#加密&Java解密
一.前言 在项目需要添加安全模块,客户端调用服务端发布的service必须要经过验证,加密算法采用DES,客户端采用C#进行加密,服务端使用Java进行解密.废话不多说,直接上代码. 二.客户端 客户 ...
- [C++][操作符]四种显示转换操作符
整理了C++ Primer中提到的四种显示转换,用思维导图写出来,是不是很清晰O(∩_∩)O.
- 基于HT for Web矢量实现HTML5文件上传进度条
在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...
- react经典进阶demo
这是我在官方文档上看到的,功能是实现(具体是什么,请往下看) 以下是json数据: [ {category: "Sporting Goods", price: "$49. ...
- Think different
Here's to the crazy ones.The misfits.The rebels.The troublemakers.The round pegs in the square holes ...