bgjs初学者入门（四）CFloatTip，第一个控件

最新推荐文章于 2025-11-24 03:12:01 发布

转载最新推荐文章于 2025-11-24 03:12:01 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/flowthink/archive/2010/01/12/1644398.html

文章标签：

#javascript #ViewUI

本文介绍了bgjs库中的CFloatTip控件使用方法，包括初始化配置、显示控制及定位设置等关键功能，并通过示例代码展示了如何创建自定义提示框。

　　开始进入bgjs的控件世界！

　　一个解释：前文所谓的部件、widget，和这里的控件都是一个意思。以后统一都以控件来称呼。

-------------------------------------------------------------------------------------------

　　看了上一节的qtip和ftip,你可能对bgjs的两个不同的tip实现有了一定的了解。

　　下面，让我们翻开bgjs的源代码看看，这两个函数是怎么写的。

　　当我们想研究bgjs的源代码的时候，你可以用你喜欢的编辑器打开bglib-all-debug.js，这里有完整的源代码和注释。然后你可以分别搜索CUtil.qtip、CUtil.ftip。

//CUtil.qtip源代码
CUtil.qtip = function(proxy, msg){
if(!instance)
instance = new CFloatTip({showTo:document.body, autoRender:true});
instance.tipFor(proxy, msg);
};
//CUtil.ftip源代码
CUtil.ftip = function(msg, title, proxy, getFocus, timeout){
if(!instance)
instance = new CFloatTip({showTo:document.body, autoRender:true});
CC.fly(instance.tail).show().unfly();
instance.show(msg, title, proxy, getFocus, timeout);

return instance;
};

　　如果你没有仔细研究过bgjs的源代码，这里有相当的东西不大明白（其实我也是-_-!!）不过至少我们可以看到有一点：这两个函数实际上都是对CFloatTip控件的一个封装。

　　实际上，CFloatTip控件具有更多的功能。

　　下面，我们来看看CFloatTip控件的使用方法，并通过它进入bgjs控件世界的大门！

一。CFloatTip的使用方法

　　CFloatTip是一个控件。对于任何控件，我们总是这样做的：

var 实例变量=new 控件名({属性集})
实例变量.dosomething();

　　开始学习不同的控件，我们就要先关注，它到底有哪些不同的属性，分别对应什么不同的功能。

1.初始化CFloatTip控件

　　CFloatTip常用的有下面一些属性：

msg:　　　　tip的内容。可以是html代码。
title:　　　　 tip的标题。qmode设置为true的时候会忽略。
showTo:　　对哪个节点显示。对于CFloatTip来说，它主要有一个影响：当调用setXY()方法的时候（后面有介绍），定位是基于这个设置的。
autoRender: 是否自动渲染。我通常都设置为true。
timeout:　　超时时间，单位为毫秒。设置为false则不消失。默认为2500.
delay:　　　延迟多长时间出现tip。单位为毫秒。默认为500.（这一项设置还需要咨询。）
qmode：　　设置为true，则是qtip样式。设置为false，则是ftip样式。默认为false。

　　一般来说，msg、title、showTo这些没有默认值，你都需要在初始化的时候传入对应参数（当qmode设置为true的时候，可以省略title参数）。

　　下面我们做一个简单的初始化代码示范：

var f=new CFloatTip({msg:'hello',title:'world',showTo:document.body,timeout:1000})

　　如上所示，选项调用的格式是：{属性名1:属性值1,属性名2:属性值2...}，做为参数传入。

　　也许你现在就拿出编辑器，编写一个网页，并把上面的代码输入进去，保存并运行，但是……也许你会意外，页面怎么什么提示都没有？

　　这是因为，你还没有设置tip出现的位置信息。这个信息属性中是没有的，它是CFloatTip控件实例的一个方法。

2.CFloatTip实例的方法

　　要想刚才的tip能够出现，我们需要调用几个方法：

setXY(intx,int y)　　设置tip出现的位置（相对于showTo对象的位置定位）
show()　　显示tip。

因此，我们可以加上下面的代码，使tip显示出来：

f.setXY(200,200);
f.show();

或者，你还有一个更酷的选择来代替：链式操作。

f.setXY(200,200).show();

以上两种方式效果一样。

二。完善上一节的代码。

直接上完整代码吧：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Helloworld!</title>
<script type="text/javascript" src="../bglib-all.js"></script>
<link rel="stylesheet" href="../default/global.css" type="text/css"/>
<link rel="stylesheet" href="../default/ru_share.css" type="text/css"/>
<style>
#tip_for_qtip,
#tip_for_ftip,
#tip_for_CFloatTip{position:absolute;left:300px;top:100px;border:1px solid #CCC;}
#tip_for_ftip{top:200px;}
#tip_for_CFloatTip{top:300px;}
</style>
</head>
<body lang="zh">
<div id='tip_for_qtip'>鼠标移过来，qtip!</div>
<input id='tip_for_ftip' value="这里是ftip!"/>
<div id='tip_for_CFloatTip'>自己实例化的CFloatTip!</div>
</body>
</html>
<script>
Event.ready(function(){
CUtil.qtip('tip_for_qtip','你好qtip!');
function showftip(){
CUtil.ftip('这里是ftip的内容','这里是ftip的标题','tip_for_ftip',true,3000);
}
CC.$('tip_for_ftip').onmousemove=showftip;
//以下是我们今天新加的内容
//封装成一个函数
function showCFloatTip(){
//先初始化
var f = new CFloatTip({showTo:document.body,autoRender:true,timeout:2000, ,title : 'CFloatTip标题', msg:'CFloatTip内容'});
//再显示
f.setXY(300,300).show();
}
//这里将函数和事件绑定
CC.$('tip_for_CFloatTip').onclick=showCFloatTip;
});
</script>

　　请确保你明白每段代码的含义，想想会是什么样的页面。然后保存并打开它，看看是不是。

　　三。一个补充

　　以上介绍的是使用setXY来定位，它的位置相比以前的qtip和ftip可以更灵活，但是大多数时候我们可能想让tip出现在一个控件的周围，不需要我们操心具体的坐标，就好像qtip和ftip。这应该怎么做呢？

　　你只需要把

f.setXY(300,300).show();

　　换成：

f.setRightPosForTarget('tip_for_CFloatTip')

f.show();

　　就可以了。