jquery messagetip信息语提示控件
编写原因:
作为提示框,jquery有个messagebox的控件,也就是弹出的提示框。但这个控件如果不是用在需要确认的时候,单单警告提示、消息提示、失败提示时,用户还需要去点下确认,有时这操作还是挺烦的(尽管可以设置timeout,会自动消失)。
控件需求:
现在需要一个简洁消息提示控件,不需确认。
1.提示框可以从顶部或底部滑入,在失效后滑出。
2.可以设置滑入时间,内容停留时间、滑出时间。
PS:比较简单的控件
效果如下




编写过程:
1.在无文档的情况下, 我建议将用户能传的参数的定义写在控件的最前面。
var defaults = {
zIndex : 9999 ,
fadeInTimeOut : 1, //second
contentTimeOut : 3,
fadeOutTimeOut : 1,
position : "top" //show position top or bottom
};
这样使用者对他能够设的就非常清楚了,即便是没有文档,也能愉快的玩耍。
2.考虑浏览器的兼容性
因为控件的提示框是固定在底部或顶部的,不可避免的就是position:fixed的问题
IE6 IE7 IE8 固定定位元素 position:absolute 用设置,所以定位计算也要变化。
3.滑动效果的实现
滑入、内容停留、滑出。
具体的实现就不在这里说明,最后面会有源码链接。
PS:最主要东西就是上面这三个。
总结:
1.在强调的用户体验的年代,做这个控件也是为了用户能有更好的感受。
2.在做东西(编码)时,也时刻想能否这东西能否通用,而控件和框架也无非就是为了通用。
3.另附上我这个控件的下载链接
点击下载-> jquery.messagetip
DEMO:
$.messageTip.info({
message:"我是提示消息.......",
fadeInTimeOut : 1, //滑入秒数
contentTimeOut : 3, //内容停留秒数
fadeOutTimeOut : 1, ////滑出秒数
});
jquery messagetip信息语提示控件的更多相关文章
- jquery的智能提示控件
福利到~分享一个基于jquery的智能提示控件intellSeach.js 一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...
- 气泡形提示控件grumble.js
grumble.js 是一个很特别的气泡形状提示控件,最开始是为 Huddle.com 网站开发的, 它没有通常的north/east/south/west的定位限制. 任何一个grumble都可以放 ...
- jQuery里面的datepicker日期控件默认是显示英文的,如何显示中文或其他语言呢?
jQuery里面的datepicker日期控件默认是显示英文的,如何让他显示中文或其他呢? [官方的写法]: (1)引入JS文件: <script type="text/javascr ...
- 错误提示控件errorProvider
http://www.cnblogs.com/suguoqiang/archive/2012/07/17/2596564.html 错误提示控件errorProvider VS显示: 核心代码: th ...
- Atitit.dwr3 不能显示错误详细信息的解决方案,控件显示错误详细信息的解决方案 java .net php
Atitit.dwr3 不能显示错误详细信息的解决方案,控件显示错误详细信息的解决方案 java .net php 1. Keyword/subtitle 1 2. 使用dwr3的异常convert处 ...
- jquery datepicker-强大的日期控件
在web开发中,总会遇到需要用户输入日期的情况.一般都是提供一个text类型的input供用户输入日期.然而,这种方式,开发人员必须对用户输入的日期进行验证,判断其合法性.除此之外,让用户输入日期也是 ...
- 重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider
原文:重新想象 Windows 8 Store Apps (4) - 控件之提示控件: ProgressRing; 范围控件: ProgressBar, Slider [源码下载] 重新想象 Wind ...
- RS开发日期提示控件默认为昨天之进阶篇
时隔<RS开发日期提示控件默认为昨天>这篇博文已经很久了,请原谅我隔了这么久才继续来写这篇笔记.也希望读到这篇笔记的朋友可以从这篇笔记中学习到一些关于RS日期控件和JS的一些应用知识,当然 ...
- iOS项目开发实战——自己定义圆形进度提示控件
iOS中默认的进度条是水平方向的进度条,这往往不能满足我们的需求. 可是我们能够自己定义类似的圆形的进度提示控件,主要使用iOS中的画图机制来实现. 这里我们要实现一个通过button点击然后圆形进度 ...
随机推荐
- Sort the Array
/* 思路: 找到单调下降串的起始位置[l, r] 如果左边 0...l-1中的最大值 > l...r中的最小值 或者 r+1...n中的最小值 < l...r中的最大值 都是不能实现排序 ...
- 使用ExifInterface设置Datetime发生的问题
最近在弄一个Android小程序,需要把图像的生成时间设置到Exif的Datetime,用ExifInterface.setAttribute(ExifInterface.TAG_DATETIME,& ...
- Kruskal算法(一)之 C语言详解
本章介绍克鲁斯卡尔算法.和以往一样,本文会先对克鲁斯卡尔算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 最小生成树 2. 克鲁斯卡尔算法介绍 3 ...
- C++和java多态的区别
C++和java多态的区别 分类: Java2015-06-04 21:38 2人阅读 评论(0) 收藏 举报 转载自:http://www.cnblogs.com/plmnko/archive ...
- CentOS7 Nexus安装
CentOS7 Nexus安装 CentOS7 Nexus安装 Download 从Nexus下载nexus-2.11.2-03-bundle.tar.gz Install 安装 上传RPM文件到/t ...
- 设计宝库:22套精美的 PhotoShop 素材免费下载
<设计宝库>系列给大家带来22套精美的 PSD 设计素材,你可以免费下载使用.设计师经常会去网上搜罗各种各样的素材,这些免费素材不仅能帮助他们节省大量的时间,而且能有很好的效果.非常感谢那 ...
- 功能齐全并且比较时髦的Jquery通用开源框架之【ejq.js】
简介 ejq是一款非常小巧的JS工具库,未压缩才50K,在jquery的基础上对jquery缺失部分作了很好的弥补作用. 优点: 1.具有内置的模板解析引擎语法和angularjs相近减少学习成本 2 ...
- Moon.Orm 5.0 (MQL版) 实战实例
))) .) { ) { ) { ...
- Python性能提升小技巧
第一部分 1-使用内建函数: 你可以用Python写出高效的代码,但很难击败内建函数. 经查证. 他们非常快速 2-使用 join() 连接字符串. 你可以使用 + 来连接字符串. 但由于string ...
- Android 手机上获取物理唯一标识码[转]
所有添加有谷歌账户的设备可以返回一个 ANDROID_ID 所有的CDMA设备对于 ANDROID_ID 和 TelephonyManager.getDeviceId() 返回相同的值(只要在设置时添 ...