Chromatography Ads

11.14th 2008

【mootools中文实例诠释】Tips类的使用

396
views

mootools的Tips类是非常简单易用，但又非常强悍的。看以下例子：

以下是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 language="javascript" src="mootools.js"></script>
<style type="text/css">
    <!--
       这里填写本实例CSS代码
    -->
</style>
<script language="javascript">
  window.addEvent('domready', function() {
	//这里填写本实例mootools代码
});
</script>
</head>
<body>
<p>
  <img class="Tips1" title="我是私房猫 :: 小JOE叫我跟你说HI" src="http://xiebiji.com/wp-content/uploads/2008/11/0100641f46485fb43ce6c4004aa5c7ebf32f77-35b8-a5c5-ba7a-ad84dac5ae04.jpg" alt="sweetcat" width="117" height="88" />
   <img class="Tips2" title="还是我:: 你有看见我么？" src="http://xiebiji.com/wp-content/uploads/2008/11/ba7c8742184bf7ef705459d87984f4c6_150.jpg" alt="" width="120" height="89" />
    <img  title="哈哈 :: 我的提示颜色不一样哦！" class="Tips4" src="http://xiebiji.com/wp-content/uploads/2008/11/img200807071344170688.jpg" alt="" width="120" height="90" />      
</p>
<p>
  <a href="http://xiebiji.com" onclick="return false;" class="Tips3" title="一个写笔记的网站">http://xiebiji.com</a>
</p>
</body>
</html>

本实例CSS代码

.tool-tip {
	color: #fff;
	width: 139px;
	z-index: 13000;
}
 
.tool-title {
	font-weight: bold;
	font-size: 12px;
	margin: 0;
	color: #9FD4FF;
	padding: 8px 8px 4px;
	background:#000000 top left;
}
 
.tool-text {
	font-size: 12px;
	padding: 4px 8px 8px;
	background:#000000 bottom right;
}
 
.custom-tip {
	color: #000;
	width: 130px;
	z-index: 13000;
}
 
.custom-title {
	font-weight: bold;
	font-size: 12px;
	margin: 0;
	color: #3E4F14;
	padding: 8px 8px 4px;
	background: #C3DF7D;
	border-bottom: 1px solid #B5CF74;
}
 
.custom-text {
	font-size: 12px;
	padding: 4px 8px 8px;
	background: #CFDFA7;
}

本实例mootools 代码：

                 /* Tips 1 以所有包含class:Tips的元素集合建立Tips类*/
		var Tips1 = new Tips($$('.Tips1'));
 
		/* Tips 2 以所有包含class:Tips2的元素集合建立Tips类，其中类初始化的时候建立效果类fx，用以改变元素的透明度；其中还给该Tips类添加动作（出现的时候从目前透明度渐变到全看见，隐藏的时候反之）*/
		var Tips2 = new Tips($$('.Tips2'), {
			initialize:function(){
				this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
			},
			onShow: function(toolTip) {
				this.fx.start(1);
			},
			onHide: function(toolTip) {
				this.fx.start(0);
			}
		});
 
		/* Tips 3 *以所有包含class:Tips3的元素集合建立Tips类/
		var Tips3 = new Tips($$('.Tips3'), {
			showDelay: 400,//onShow方法延迟执行的毫秒数 (默认为100 ms)
			hideDelay: 400,//onHide方法延迟执行的毫秒数 (默认为100 ms)
			fixed: true//如果为true,则提示不会跟随鼠标移动。
		});
 
		/* Tips 4 */
		var Tips4 = new Tips($$('.Tips4'), {
			className: 'custom'//为该元素集合的所有元素增加custom的样式属性
		});

是不是很方便？希望你喜欢。
tips类简要说明
———————————–
参数
elements 要添加tip的元素集

options 参考下面的可选项

可选项
maxTitleChars 提示的标题所能显示的最长字数。默认为 30.
showDelay onShow方法延迟执行的毫秒数 (默认为100 ms)
hideDelay onHide方法延迟执行的毫秒数 (默认为100 ms)
className 提示所用的样式名的前缀。默认为 ‘tool’.

整个提示的样式为: tool-tip

提示标题的样式为: tool-title

文本内容的样式为: tool-text

offsets 提示与鼠标的距离。一个包含x/y 属性的对象。
fixed 如果为true,则提示不会跟随鼠标移动。

事件
onShow 可选。可以用来覆盖默认的onShow的行为
onHide 可选。可以用来覆盖默认的onHide的行为
———————————–
产生的tips提示框代码如下(有为tips类增加class属性的，会自动添上)：

<div class="tool-tip" style="position: absolute; top: 33px; left: 150px; visibility: hidden; opacity: 0;">
    <div>
        <div class="tool-title">
             <span>还是我</span>
       </div>
       <div class="tool-text">
             <span>你有看见我么？</span>
        </div>
   </div>
</div>

转载请著名出处：http://xiebiji.com/2008/11/mootools-tips/ 作者小JOE

PREVIOUS:
> 囧一个，学校请来的IBM讲座
NEXT:
> 超推荐广告美少女江语晨mp3专辑！

Posted in javascript, mootools, 网络笔记 | 396 views|

3评论主题(含6回复) »

1 2008-11-14 at 16:46 免费主机 says:

:razz: Good! 我回去试下先

还有呀那个猫好可爱D,我以前QQ里装了3套该死的病毒搞的什么都没了.

[回复]
joe Reply:
十一月 14th, 2008 at 17:12
:idea: 那个猫真的很可爱

[回复]
2 2008-11-14 at 19:04 久酷 says:

你的RSS是输出摘要的？？我觉得还是输出全文好点哦，呵呵 :mrgreen: :mrgreen:

[回复]
joe Reply:
十一月 14th, 2008 at 20:32
:wink: 那你订阅了我的RSS？那好哦，我输出全文~

[回复]
久酷 Reply:
十一月 14th, 2008 at 22:21
呵呵……我当然订阅你的RSS了啊，要不然我可不知道哦！ :grin:
以前我也不知道输出摘要好还是全文好！后来大家都给我提意见说要输出全文！所以我就改过来了！我也看了下我订阅的RSS几乎全是输出全文的！

[回复]
joe Reply:
十一月 14th, 2008 at 23:37
:oops: 多谢提醒
3 2008-11-15 at 13:32 LD says:

猫貌似那个动画片里的

[回复]
打工皇帝 Reply:
十一月 15th, 2008 at 21:18
什么动画

[回复]
joe Reply:
十一月 16th, 2008 at 10:02
叫甜甜私房猫，每集动画篇幅都很短

[回复]

这篇文章上的评论 RSS feed TrackBack URL

留下评论

Recently Written

Random Posts

BlogUPP

关于博主
我名字叫JOE,是一个性格怪异的学生，整天坐在电脑面前不动，但是脑子却一直在转。最大优点是对喜欢的东西很执着，曾经试过看着设计稿目不转睛，持续时间长达两个小时。我很想跟别人交流,但是又不怎么会交流。有时有点自卑有时却又有点自信。不喜欢依靠别人的人，一直认为女人是受保护动物。
关于博客
本博客08年8月诞生，虽然人影稀少，但是本博客目的只是为了提供作者平时学习书写笔记的地方。鉴于作者表达能力有些，一些内容可能会含糊不清，但是博客始终坚持“留下生活的足迹，让世界知道还存在我”的信念。