bgjs初学者入门（三）tips!
在本节中，你将了解一下bgjs的tip提示功能，并认识最简单的一个dom操作：CC.$()选择器。
——————————————————————————————————————————————
在上一节中，我们初步认识了一下bgjs的使用。今天我们来了解一下tip提示。为什么介绍这个呢？因为够简单！
一。创建开始的代码。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>bgjs的tips!</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"/>
</head>
<body>
</body>
</html>
<script>
Event.ready(function(){
/*
我们的代码放在这里~
*/
});
</script>
是的，这个代码几乎每次都可以用上，除了你可能修改下title和引用的ru_share.css！
二。在body标签内加入以下代码：
<div id='tip_for_qtip'>鼠标移过来，qtip!</div>
<input id='tip_for_ftip'/>
<div id='tip_for_CFloatTip'>自己实例化的CFloatTip!</div>
为了便于区分，在head标签内加入以下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>
我们等下将分别用三种方法来实现tip提示。
三。第一种tip提示：qtip。
qtip是bgjs提供的一个很方便的tooltip实现。它实现一个功能：当鼠标在元素上悬浮的时候，出现tip提示。它也是在CUtil下。（还记得上一讲的CUtil.alert()吗？）
使用方法：CUtil.qtip(proxy, msg)
其中：'proxy'是希望悬浮时出现qtip提示的dom元素的id。Element也可以。
'msg'是提示的内容。
下面我们在script中加入以下代码来实现它：
CUtil.qtip('tip_for_qtip','你好qtip!');
你可以现在就保存并用浏览器打开，效果图如下：
看见那个小东西了么^_^
小结：qtip是bgjs提供的最简单方便的一个tip功能。它适用在鼠标悬浮的场合，显示一个简单的提示!
四。第二种提示：ftip
qitp很方便，但是功能比较简单。ftip是又一个tip提示功能，它比qtip功能强，使用起来也稍微复杂一点。
使用方法：CUtil.ftip (msg, title, proxy, getFocus, timeout)
其中：msg：tip的内容。
title：tip的标题。
proxy：要tip的元素（id|Element）
getfocus：tip显示时是否让element激活（前面我们特意做了个input，就是为了试验这个效果）
timeout：tip显示的时间(以毫秒计)
看到这里，你是不是马上就想试验一下呢？
在script标签内修改成以下代码：
<script>
Event.ready(function(){
CUtil.qtip('tip_for_qtip','你好qtip!');
//加了下面这一行
CUtil.ftip('这里是ftip的内容','这里是ftip的标题','tip_for_ftip',true,3000);
});
</script>
保存并运行它吧！效果如下所示：
观察：1.ftip样式和qtip有点不同，而且多一个标题；
2.由于getfocus设置为true，当ftip出现的时候，input被激活了；
3.出现大约3秒以后，ftip消失。
4.ftip消失以后，鼠标再移上input，点击它，ftip并不出现（想想，qtip总是在鼠标悬浮的时候出现，而ftip默认不是这样的，它默认是一次性显示的）
看到这个示例，我们可以发现,ftip有和qtip相似的地方，但是也有很多不同。它的可选项更多，功能更强。
但是，能不能使ftip也像qtip那样，在鼠标悬浮，甚至点击、双击时，出现，而不是像现在这样只出现一次呢？
五。更强的ftip,CC.$()
答案是可以的。我们只需要对代码做一点点修改就可以了。
1.首先，把ftip的实现封装为一个函数。
function showftip(){
CUtil.ftip('这里是ftip的内容','这里是ftip的标题','tip_for_ftip',true,3000);
}
很明显，通过调用这个函数，就能出现ftip提示。
2.第二步，需要把对应元素的对应事件和这个函数绑定。
这里使用bgjs提供的一个简捷的dom选择器函数CC.$('dom_id')。通过调用它，可以根据id直接返回dom节点。
在页面加入以下代码：
CC.$('tip_for_ftip').onclick=showftip;
它的含义是：选择id为'tip_for_ftip'的节点，并在onclick事件发生时调用showftip函数。
3.整个页面的完整代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>bgjs的tips!</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').onclick=showftip;
});
</script>
保存并运行它吧，你将会看到一个和刚才不同的ftip:当鼠标点击文本框时，ftip才会出现！
小结：1.CUtil.qtip()和CUtil.ftip()都能够快速地调出tip提示；
2.CUtil.qtip()的特点是，一条语句就能实现，鼠标悬浮的时候自动提示。这种提示没有标题。
3.ftip的特点是，能够实现带有标题的提示。而且，它具有设置显示时间、自动focus的功能。而且，通过一定的技巧，也能实现更多效果（可以将前面的onclick换成onmousemove、onblur等等，你可以搜索下"DHTML事件"进行相关的了解。这里有一个链接：http://www.w3school.com.cn/dhtml/dhtml_events.asp）
4.CC.$()，可以简捷地选择一个dom节点。
一个问题：为什么在css代码中，我是将"#tip_for_qtip,#tip_for_ftip,#tip_for_CFloatTip"分别写出，而不是直接一个"div input"呢？如果你这样做一下就知道，这个时候的tip出现的位置诡异地跑到其他地方去了!
原因：不仅仅是bgjs,一切javascript ria框架都会在运行的时候修改页面dom，包括自动加入一些div标签，table标签等（所以才会这么好看嘛）。因此，当你设置页面的css的时候，不要轻易对这些标签做通用修改（除非你很确定你在干什么），哪怕页面可以看见的就仅仅几个dom节点！经常的，你应该通过id或者class设置来代替。
本节做的代码请不要删除，下一节我们将继续修改它，并学习tip实现的第三种、也是最强大的方法。
浙公网安备 33010602011771号