jTips--jquery提示插件

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_30237281

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量74

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/4yming/archive/2011/10/27/2226879.html

版权

效果图：

sym.jTips-1.0.js 源文件：

/*
sym.jTips-1.0
by 4yming - 微博：http://weibo.com/4yming
-----------------------------------------
用法：
基本用法：
$.jTips({
_text:'Hello,world!'//显示的文本，也支持html
});
扩展用法：
$.jTips({
_text:'Hello,world!',
_bgColor:'#FDFADC',//背景色
_border:'1px #F2EEA8 solid',//边框颜色
_speed:300,//显示速度
_timeout:3000,//显示时间
_padding:'0 10px',//内容填充
_fontSize:'12px',//字体大小
_fontColor:'#666',//字体颜色
_delay:0,//延时显示时间设置
_opacity:1//透明度
});
*/
$.extend({
jTips:function(options){
//options
var _opt = options || {};
_opt._text = _opt._text || 'jTips';
_opt._bgColor = _opt._bgColor || '#FDFADC';
_opt._border = _opt._border || '1px #F2EEA8 solid';
_opt._speed = _opt._speed || 300;
_opt._timeout = _opt._timeout || 3000;
_opt._padding = _opt._padding || '0 10px';
_opt._fontSize = _opt._fontSize || '12px';
_opt._fontColor = _opt._fontColor || '#666';
_opt._zIndex = _opt._zIndex || 99999;
_opt._delay = _opt._delay || 0;
_opt._opacity = _opt._opacity || 1;

//element
var _timestamp = (new Date()).valueOf();
var _id = 'jTips' + _timestamp;
var _jTips = $('<div id="' + _id + '"></div>');
_jTips.css({
'position':'fixed',
'left':0,
'right':0,
'width':'99.8%',
'top':'-27px',
'height':'25px',
'line-height':'25px',
'background-color':_opt._bgColor,
'border':_opt._border,
'padding':_opt._padding,
'font-size':_opt._fontSize,
'color':_opt._fontColor,
'z-index':_opt._zIndex,
'text-align':'center',
'opacity':_opt._opacity,
'filter':'alpha(opacity=' + (_opt._opacity * 100) + ')'
});

//ie6 bug
if ( $.browser.msie
&& ( $.browser.version.substring( 0, 1 ) == '5'
|| $.browser.version.substring( 0, 1 ) == '6' ) ) {
_jTips.css({'position':'absolute','top':$(window).scrollTop() - 27});
$(window).scroll(function() {
_jTips.css('top', $(window).scrollTop() + 'px');
});
}

_jTips.html(_opt._text);
$('body').append(_jTips);

//show tips
setTimeout(function(){
var top = 0;
//ie6 bug
if ( $.browser.msie
&& ( $.browser.version.substring( 0, 1 ) == '5'
|| $.browser.version.substring( 0, 1 ) == '6' ) ) {
top = $('#' + _id).offset().top + 27;
}

$('#' + _id).animate({
top:top
},_opt._speed);

//auto hide tips
setTimeout(function(){
top = -27;
//ie6 bug
if ( $.browser.msie
&& ( $.browser.version.substring( 0, 1 ) == '5'
|| $.browser.version.substring( 0, 1 ) == '6' ) ) {
top = $('#' + _id).offset().top - 27;
}
$('#' + _id).animate({
top:top
},_opt._speed,
function(){
$('#' + _id).remove();
});
},_opt._timeout);
},_opt._delay);
}
});

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/sym.jTips-1.0.js"></script>
<script type="text/javascript">
$(function(){
$('#test').click(function(){
$.jTips({
_text:'Hello,world! - <a target="_blank" href="http://weibo.com/4yming">关注我吧！</a>',
_timeout:10000
});
});
});
</script>
</head>

<body style="height:2000px;">
<br /><br /><br /><br /><br /><br />
<a id="test" href="#">有种你点我啊！</a>
</body>
</html>

转载于:https://www.cnblogs.com/4yming/archive/2011/10/27/2226879.html

weixin_30237281

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jTips--jquery提示插件

效果图：sym.jTips-1.0.js 源文件：/*sym.jTips-1.0by 4yming - 微博：http://weibo.com/4yming-----------------------------------------用法：基本用法：$.jTips({ _text:'Hello,world!'//显示的文本，也支持html});扩展用法：$.jTips({...
复制链接

扫一扫