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
Posted in javascript, mootools, 网络笔记 | 396 views|
:
昨天服务器被攻击了。。
: logo写错了,应该是:http://www.fanxipeng.com/logo.gif
: 我又来了
,昨天贵站怎么上去呀。
另外,我的LOGO做好了:http://www.fanxipeng.com
: 新的一年 新的气象 祝福你!!!
:
新年快乐~
:razz: Good! 我回去试下先
还有呀 那个猫好可爱D,我以前QQ里装了3套 该死的病毒搞的什么都没了.
joe Reply:
十一月 14th, 2008 at 17:12
:idea: 那个猫真的很可爱
你的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: 多谢提醒
猫 貌似那个动画片里的
打工皇帝 Reply:
十一月 15th, 2008 at 21:18
什么动画
joe Reply:
十一月 16th, 2008 at 10:02
叫甜甜私房猫,每集动画篇幅都很短