基于jquery的信息提示插件

作者:norion时间:2013年5月21日评论次数:0 条

很多人做信息提示插件都是用jqueryUI,但是如果只用到信息提示插件来用jqueryUI那就有点大材小用了,为了解决jqueryUI太大太重的问题,决定写一个小的容易修改的tip插件,支持html标签内写提示信息,也支持在js内直接写提示信息,代码共享之。。。

jquery插件代码

(function ($) {
	/*******************************
	 * @name tip插件 v1.0
	 * @author norion
	 * @author blog http://zkeyword.com/
	 * @2013.05.21
	 * @可自由转载及使用,但请注明版权归属
	 *******************************/
	$.fn.tip = function (options) {
		options = $.extend({
				text : null, //默认tip的文本,当obj设置了html自定义属性tip值时,这个文本无效。
				headText : null, //tip的标题
				width : 150, //默认tip的宽度
				arrowDirection : 'topBottom', //设箭头位置,默认是向上向下,可选是向左向右
				wrapObj : 'body', //obj的最外层,默认网页的最外层为body
				event : 'mouseover', //鼠标事件
				cls : null //一个页面的tip添加自己的class
			}, options);
		this.live(options.event, function () {
			$('body').append('<div id="l-promptWrap"></div>');
			var obj = $(this),
			objH = obj[0].offsetHeight,
			objW = obj[0].offsetWidth,
			objTop = obj.offset().top,
			objLeft = obj.offset().left,
			objTipVal = obj.attr('tip'),
			tipWrap = $('#l-promptWrap'),
			tipText = objTipVal ? objTipVal : options.text,
			tipHeadText = options.headText,
			tipW = options.width,
			tipHtml = '',
			cls = options.cls,
			wrapObj = $(options.wrapObj),
			wrapObjW = wrapObj[0].offsetWidth,
			wrapObjH = wrapObj[0].offsetHeight,
			arrowDirection = options.arrowDirection;
			if (tipText) {
				tipHtml += '<div class="ui-promptBlock" style="width:' + tipW + 'px">';
				tipHtml += '<span class="ui-promptArrow"></span><div class="ui-promptMain">';
				if (tipHeadText) {
					tipHtml += '<h5>' + tipHeadText + '</h5>';
				}
				tipHtml += '<div class="ui-promptMain-message">' + tipText + '</div>';
				tipHtml += '</div></div>';
				tipWrap.html(tipHtml);
				if (cls) {
					tipWrap.addClass(cls);
				}
				var tipObj = $('.ui-promptBlock'),
				tipTop = 0,
				tipLeft = 0,
				tipOffsetW = tipObj[0].offsetWidth,
				tipOffsetH = tipObj[0].offsetHeight,
				tipArrow = $('.ui-promptArrow');
				if (arrowDirection == 'topBottom') {
					tipArrow.addClass('ui-promptArrow-topBottom');
					var tipArrowH = tipArrow.height(),
					tipArrowW = tipArrow.width();
					/*判断obj在左还是在右*/
					if (objLeft & lt; wrapObjW / 2 - objW / 2) {
						tipLeft = objLeft;
						/*判断obj在上还是在下*/
						if (objTop & lt; wrapObjH / 2 - objH / 2) {
							tipTop = objTop + objH + tipArrowH;
							tipArrow.addClass('ui-promptArrow-topLeft');
						} else {
							tipTop = objTop - tipOffsetH - tipArrowH;
							tipArrow.addClass('ui-promptArrow-bottomLeft');
						}
					} else {
						tipLeft = objLeft + objW - tipOffsetW;
						/*判断obj在上还是在下*/
						if (objTop & lt; wrapObjH / 2 - objH / 2) {
							tipTop = objTop + objH + tipArrowH;
							tipArrow.addClass('ui-promptArrow-topRight');
						} else {
							tipTop = objTop - tipOffsetH - tipArrowH;
							tipArrow.addClass('ui-promptArrow-bottomRight');
						}
					}
				} else {
					tipArrow.addClass('ui-promptArrow-leftRight');
					var tipArrowH = tipArrow.height(),
					tipArrowW = tipArrow.width();
					/*判断obj在左还是在右*/
					if (objLeft & lt; wrapObjW / 2 - objW / 2) {
						tipLeft = objLeft + objW + tipArrowW;
						/*判断obj在上还是在下*/
						if (objTop & lt; wrapObjH / 2 - objH / 2) {
							tipTop = objTop;
							tipArrow.addClass('ui-promptArrow-leftTop');
						} else {
							tipTop = objTop + objH - tipOffsetH;
							tipArrow.addClass('ui-promptArrow-leftBottom');
						}
					} else {
						tipLeft = objLeft - tipOffsetW - tipArrowW;
						/*判断obj在上还是在下*/
						if (objTop & lt; wrapObjH / 2 - objH / 2) {
							tipTop = objTop;
							tipArrow.addClass('ui-promptArrow-rightTop');
						} else {
							tipTop = objTop + objH - tipOffsetH;
							tipArrow.addClass('ui-promptArrow-rightBottom');
						}
					}
				}
				tipWrap.css({
					top : tipTop,
					left : tipLeft
				});
			}
		}).live('mouseout', function () {
			$('#l-promptWrap').remove();
		});
	};
})(jQuery);

css代码:

#l-promptWrap{position:absolute;z-index:9302;top:0;left:0}
	.ui-promptBlock{display:block;position:absolute;z-index:995;padding:5px;background:#fff9d4;border:1px solid #fec500;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
		.ui-promptBlock .ui-promptMain{padding:10px;line-height:1.5;text-align:left;color:#666;background:#fff;}
		.ui-promptBlock h5{display:block;background:url(../images/ico-printMgt.png) no-repeat 0 2px;margin:5px 0;padding-left:18px;font-size:14px;font-weight:bold;color:#C33700;}
			.ui-promptMain-message{padding-left:12px;color:#000;font-size:12px}
			.ui-promptArrow{background:url(../images/ico-promptArrow.png) no-repeat;position:absolute;overflow:hidden;}
				.ui-promptArrow-topBottom{width:15px;height:9px;}
					.ui-promptArrow-topLeft{top:-9px;left:8px;background-position:-9px 0}
					.ui-promptArrow-topRight{top:-9px;right:8px;background-position:-9px 0}
					.ui-promptArrow-bottomLeft{bottom:-9px;left:8px;background-position:-9px -24px}
					.ui-promptArrow-bottomRight{bottom:-9px;right:8px;background-position:-9px -24px}
				.ui-promptArrow-leftRight{width:9px;height:15px;}
					.ui-promptArrow-leftBottom{bottom:8px;left:-9px;background-position:0 -9px}
					.ui-promptArrow-leftTop{top:8px;left:-9px;background-position:0 -9px}
					.ui-promptArrow-rightTop{top:8px;right:-9px;background-position:-24px -9px}
					.ui-promptArrow-rightBottom{bottom:8px;right:-9px;background-position:-24px -9px}

直接在html设置调用方式:

<div id="tip"></div>
$('#tip').tip({ width:200 });

js设置调用方式:

<div id="tip"></div>
$('#tip').tip({ text:'提示内容', width:200 });

细节部分请根据实际情况调整,有bug请留言拍砖~~~

上一篇: javascript匹配含变量的正则表达式

下一篇:推荐javascript移动开发框架zepto.js兼容jquery的api

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注