UDN-企业互联网技术人气社区

板块导航

浏览  : 258
回复  : 3

[mootools] Mootools 1.2教程 Tooltips

[复制链接]
张同学爱英语的头像 楼主
发表于 2015-8-21 14:39:19 | 显示全部楼层 |阅读模式
本帖最后由 张同学爱英语 于 2015-8-21 14:42 编辑

      今天我们将来看一下MooTools绑定的Tooltip插件。通过“提示(Tips)”,你可以轻松地自定义一个包含一个标题和内容的工具提示,可以自定义样式,自定义淡入淡出渐变效果。

      我们还将仔细学习一下工具提示的选项和事件,还有一些用来从元素上添加和移除工具提示的工具。最后,我们将学习一下怎么让一个页面有多个不同样式的工具提示。


      基础知识


      创建一个新的工具提示


      创建一个新的工具提示非常简单。首先,我们来创建一个要添加工具提示的链接:


      参考代码:
  1. <a class="tooltipA" title="1st Tooltip Title" rel="here is the default 'text' of 1" href="http://www.consideropen.com">Tool tip 1</a>
复制代码
     MooTools 1.2工具提示将默认显示链接中的title和rel属性的值。如果没有rel属性,将显示href属性值。


      现在来创建一个新的默认工具条提示:


      参考代码:
  1. var customTips = $('.tooltipA');
  2. var toolTips = new Tips(customTips);
复制代码
     由于没有使用任何样式,你将看到下面这样的工具提示:


      Tool tip 1


      为你的工具提示使用样式


      MooTools可以让你在很大程度上控制它的输出——我们来看一下工具提示的html代码:


      参考代码:
  1. // 你可以在options中指定
  2. // 工具提示容器的CSS类名
  3. <div class="options.className">
  4. <div class="tip"></div>
  5. </div>
复制代码
     留意一下顶部和底部的div,你可以通过它们来轻松地在顶部和底部添加圆角,或者其他样式效果。


      现在,让我们来创建一个我们的第一个选项并添加一些CSS。上面的html代码将用名为“options.className”的CSS样式来渲染。通过给我们的工具提示来指定一个CSS类名,我们就可以给它一个独立的样式而不会影响页面上的其他MooTools工具提示。


      参考代码:
  1. var customTipsB = $('.tooltipB');
  2. var toolTipsB = new Tips(customTipsB, {
  3. className: 'custom_tip'
  4. });
复制代码
     最后,我们再添加一些CSS:


      参考代码:
  1. .custom_tip .tip {
  2. background-color: #333
  3. padding: 5px
  4. }
  5. .custom_tip .tip-title {
  6. color: #fff
  7. background-color: #666
  8. font-size: 20px
  9. padding: 5px
  10. }
  11. .custom_tip .tip-text {
  12. color: #fff
  13. padding: 5px
  14. }
复制代码
     Tool tip 2


      选项


      在Tips类中总共只有五个选项,每个都有很好的自解释性(也就是一看就明白什么意思了)。


      showDelay


      默认值为100


      一个以毫秒为单位的整数,这将决定工具提示在鼠标移动到元素上面多久后再显示出来。


      hideDelay


      默认值为100


      和上面的showDelay一样,不过这个值(也是以毫秒为单位)将决定当鼠标离开元素多久以后隐藏工具提示。


      className


      默认为null


      就像你在上面的示例中看到的一样,这可以让你为工具提示容器设置一个CSS类名。


      offsets


      默认为 x:16, y:16


      这将决定工具提示离你的元素的距离,x值为离元素往右的距离,y为离元素往下的距离(如果指定了fixed选项为false,将是相对于鼠标指针的距离,否则将是相对于元素的距离)。


      fixed


      默认为false


      这个设置决定了当你的鼠标在元素上面移动时,这个工具提示是否跟随鼠标。如果设置为true,工具提示将不随鼠标指针的移动而移动,而只是停留在元素的附近固定的位置。


      事件


      和这个类的其他东西一样,工具提示的事件仍然非常简单。它有两个事件:onShow和onHide,它们将会像你期待的那样工作。


      onShow


      这个事件将在工具条显示的时候触发。如果你设置了延时,这个事件将在直到工具提示显示出来时触发。


      onHide


     和上面的onShow事件一样,相对地,它是在工具提示隐藏时触发。如果设置了延时,这个事件也将在直到工具提示隐藏起来时触发。


      方法


      Tips类有两个方法——attach和dettach,通过这两个方法,你可以给一个指定的元素添加一个工具提示(当然了,这些工具提示会有相同的设置),或者从一个特定的元素上移除工具提示。


     .attach();


      要给一个新的元素添加一个工具提示,你只需要在Tip对象的后面加上.attach();,最后再把这个元素的选择器放在括号里面。


     参考代码:
  1. toolTips.attach('#tooltipID3');
复制代码
     .dettach();


      这个方法和.attach方法一样,不过它们的行为完全相反。首先,写下Tip对象,然后在这个元素的后面添加上.dettach();,最后把这个元素的选择器放在括号里面。


      参考代码:
  1. toolTips.dettach('#tooltipID3');
复制代码
     代码


      在这个示例中,我们将创建两个不同的Tip插件实例,这样我们就可以有两个不同样式的工具提示。我们还将集成我们上面看到的选项、事件和方法。


      参考代码:
  1. var customTips = $('.tooltip');
  2. var toolTips = new Tips(customTips, {
  3. // 这将设置工具提示显示的延迟时间
  4. showDelay: 1000, // 默认是100
  5. // 这将设置工具提示隐藏的延迟事件
  6. hideDelay: 100, // 默认是100
  7. // 这将给工具提示的容器div添加一个CSS样式
  8. // 这样就可以在一个页面上
  9. // 有两个不同样式的工具条提示
  10. className: 'anything', // 默认是null
  11. // 这将设置x和y的偏移值
  12. offsets: {
  13. 'x': 100, // 默认是16
  14. 'y': 16 // 默认16
  15. },
  16. // 这将设置工具提示是否跟随鼠标
  17. // 设为true将不会跟随鼠标
  18. fixed: false, // 默认是false
  19. // 如果你在选项之外调用这个函数
  20. // 并把这个函数留在这里
  21. // 它就闪一下,并有一个平滑的渐变效果
  22. onShow: function(toolTipElement){
  23. // 传递进来tooltip对象
  24. // 你可以让它们渐变到完全不透明
  25. // 或者让它们有一点点透明
  26. toolTipElement.fade(.8);
  27. $('show').highlight('#FFF504');
  28. },
  29. onHide: function(toolTipElement){
  30. toolTipElement.fade(0);
  31. $('hide').highlight('#FFF504');
  32. }
  33. });
  34. var toolTipsTwo = new Tips('.tooltip2', {
  35. className: 'something_else', // 默认是null
  36. });
  37. // 你可以用.store();方法来改变rel的值
  38. // 从而改变工具提示的值
  39. // 你可以使用下面的代码
  40. $('tooltipID1').store('tip:text', 'You can replace the href with whatever text you want.');
  41. $('tooltipID1').store('tip:title', 'Here is a new title.');
  42. // 下面的代码将改不会改变工具提示的文本
  43. $('tooltipID1').set('rel', 'This will not change the tooltips text');
  44. $('tooltipID1').set('title', 'This will not change the tooltips title');
  45. toolTips.detach('#tooltipID2');
  46. toolTips.detach('#tooltipID4');
  47. toolTips.attach('#tooltipID4');
复制代码




相关帖子

张同学爱英语的头像 楼主
发表于 2015-8-22 09:48:47 | 显示全部楼层
好帖子 我看好我自己
使用道具 举报

回复

发表于 2015-9-17 16:13:05 | 显示全部楼层
JavaScript依赖于浏览器本身,与操作环境无关,只要计算机能运行浏览器,并支持JavaScript的浏览器,就可正确执行,从而实现了“编写一次,走遍天下”的梦想。
使用道具 举报

回复

发表于 2015-9-17 22:35:41 | 显示全部楼层
其实js如果遇到web安全类的项目,那就又要做牺牲了,无法读写文件,访问受限。。。哎。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部