注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

对YUI2 tooltip的小小扩展  

2011-05-12 09:02:08|  分类: Yui |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

对YAHOO.widget.Tooltip进行扩展:

YAHOO.ci.Tooltip 对 YAHOO.widget.Tooltip 进行继承

在宽度高度固定时,location参数生效

在宽度高度auto时,location失效

 

//new namespace ci
YAHOO.namespace("ci");
//new Tooltip
/* toolTip_id
* userConfig
* id: HtmlElement
* text: toolTip context

* xyoffset优先级高于location

* location: top bottom left right 
* width: toolTip width
* height: toolTip height
*/
YAHOO.ci.Tooltip = function(toolTip_id,userConfig){
    var width = userConfig.width || 200;
    var height = userConfig.height || 20;
    var locations = {};
    if(typeof(width) == 'number' && typeof(height) == 'number'){
    locations = {
        top:[-width/2,-25-height],
        bottom:[-width/2,25],
        left:[-25-width,-height/2],
        right:[25,-height/2],
        center:[-width/2,-height/2],
        leftTop:[-25-width,-25-height],
        leftBottom:[-25-width,25],
        rightTop:[25,-25-height],
        rightBottom:[25,25]
     };
         width = width + "px";
         height = height + "px";
     }
     var config = {
         context:userConfig.id,
         text:userConfig.text||null,
         xyoffset:userConfig.xyoffset||locations[userConfig.location]||[0,25],
         width:width,
         height:height,
         effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.15}
      };

     YAHOO.ci.Tooltip.superclass.constructor.call(this, toolTip_id, config);
}
//YAHOO.ci.Tooltip extend YAHOO.weight.Tooltip
YAHOO.lang.extend(YAHOO.ci.Tooltip, YAHOO.widget.Tooltip);

 

YAHOO.ci.MyTooltip = {};
/*
* {tooltipId,id,text,location},{...},...
* 设置多个ToolTip
*/
YAHOO.ci.MyTooltip.setMultipleToolTips = function(){
       var tooltips = [];
       for(var i = 0; i<arguments.length; i++){
                tooltips.push(new YAHOO.ci.Tooltip(arguments[i].tooltipId,arguments[i]));
        }
        return tooltips;
}

 

一个Demo示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Simple Tooltip Example</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
}
</style>

<script src="../../build/yuiloader/yuiloader-min.js"></script>
</head>

<body >

<h1>Simple Tooltip Example</h1>

<div >
        <p>Hover over the orange box and the link to see their Tooltips.</p>  
</div>

<style>
      #ctx { background:orange;width:200px;height:200px; }
</style>

<p id="cx">Hover over me to see a Tooltip!</p>
<p id="ctx">Hover over me to see a Tooltip!</p>
<p><a id="link" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!</a></p>
<p><a id="left" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!.........................</a></p>
<p><a id="top" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!.........................</a></p>
<p><a id="right" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!......................</a></p>
<p><a id="bottom" href="http://www.yahoo.com/" title="Do You Yahoo?">Hover over me to see a Tooltip!......................</a></p>
<script type="text/javascript">

var loader = new YAHOO.util.YUILoader({
           onSuccess: function(){
                   new YAHOO.ci.Tooltip("7",{id:"cx",text:"my text .......<br/>............<br/>........",width:"auto",height:"auto"});
                   new YAHOO.ci.Tooltip("6",{id:"ctx",text:"my text ........."});
                   new YAHOO.ci.Tooltip("5",{id:"link",text:"my link ........",location:"left"});
                   new YAHOO.ci.Tooltip("4",{id:"left",text:"left............",location:"left"});
                   new YAHOO.ci.Tooltip("3",{id:"left",text:"top..............",location:"top"});
                   new YAHOO.ci.Tooltip("2",{id:"left",text:"bottom........",location:"bottom"});
                   new YAHOO.ci.Tooltip("1",{id:"left",text:"right..........",location:"right"});
                  new YAHOO.ci.Tooltip("0",{id:"left",text:"leftTop..........",location:"leftTop"});
                   new YAHOO.ci.Tooltip("-1",{id:"left",text:"leftBottom..........",location:"leftBottom"});
                   new YAHOO.ci.Tooltip("-2",{id:"left",text:"rightTop..........",location:"rightTop"});
                   new YAHOO.ci.Tooltip("-3",{id:"left",text:"rightBottom..........",location:"rightBottom"});
                   YAHOO.ci.MyTooltip.setMultipleToolTips({tooltipId:"10",id:"bottom",text:"....",location:"bottom"},
                   {tooltipId:"11",id:"bottom",text:"....",location:"top"});
            },
            base: "../../build/"
});

loader.addModule({
           name: 'myTooltip',
           type: 'js',
           fullpath: './js/tooltip.js',
            requires: ["yahoo-dom-event","animation","container"]
});

loader.require("myTooltip");
loader.insert();

</script>
</body>
</html>

增加了对tooltip位置的准确控制,可以对同一个目标元素增加多个tooltip,还保留了YAHOO的Tooltip的原有功能。

效果图:

  对YUI2 tooltip的小小扩展 - zhenghaoju700 - zhenghaoju700 的博客

 

  评论这张
 
阅读(243)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017