在Titanium中创建Tooltip

在这篇文章中将说明如何在使用Titanium开发的iPhone应用中创建tooltip！

有时候我们会在导航栏上放置一个图片按钮，但是一个简单的图片按钮还不能够完全让用户理解这个按钮的用途。

例如:
[img]http://dl.iteye.com/upload/attachment/0063/2119/035a6e68-1947-352d-89e3-4cc7f9937f7d.png[/img]

rightNavButton 按钮点下后会有什么动作呢？这是一个ebook阅读器的app.

以下的效果如何呢:
[img]http://dl.iteye.com/upload/attachment/0063/2121/4ea4cdde-4489-389b-9911-491b37d1bf7a.png[/img]

这样用户就知道了，当我点下这个按钮的时候是继续阅读文章呢。

那么这样的效果在Titanium中是如何做出来的呢？

tooltip其实是一个设置了tip图像的背景的简单的view。
[img]http://dl.iteye.com/upload/attachment/0063/2123/02b53804-78e0-3b81-9706-dd02ac9e8e38.png[/img]

var lasttipView =  Titanium.UI.createView({
width:205,
height:57,
backgroundImage:"img/bubble.png",
top:0,
right:3
});

把“Continue reading” label添加到这个view中。

var lasttipLabel =  Titanium.UI.createLabel({
text:'Continue reading',
color:'#fff',
width:205,
height:34,
top:16,
font:{
fontFamily:'Helvetica Neue',
fontSize:13,
fontWeight:'bold'
},
textAlign:'center'
});

lasttipView.add(lasttipLabel);

然后把这个tip view添加到index窗口中。(当然前提是我们已经创建好了index_win。)

index_win.add(lasttipView);

现在当我们打开index_win的时候，tooltip就会被显示出来，用户就知道rightNavButton是做什么的呢。但是如果tooltip一直显示在那里的话，我们就需要想办法隐藏它。以下代码创建了一个动画，在click事件中将他显示出来。

var anim_out = Titanium.UI.createAnimation();
anim_out.opacity=0;
anim_out.duration = 250;


last_read =  Titanium.UI.createButton({
image:"img/tag1.png"
});


last_read.addEventListener('click', function() {
lasttipView.animate(anim_out);
});

index_win.setRightNavButton( last_read );

【原文】[url=http://cssgallery.info/create-a-nifty-tooltip-in-titanium/]http://cssgallery.info/create-a-nifty-tooltip-in-titanium/[/url]