在Titanium中创建Tooltip

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

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

例如:


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

以下的效果如何呢:


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

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

tooltip其实是一个设置了tip图像的背景的简单的view。

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 );

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

评论

3 楼 larry1314mvp 2012-02-17  

rensanning 写道

以下是上传相册视频和图片的简单例子：

Titanium.Media.openPhotoGallery({
    allowEditing:true,
    mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO],
    success:function(event) {
        if (Titanium.Network.online == false) {
            return;
        }

        var xhr = Titanium.Network.createHTTPClient();

        xhr.onerror = function(e) {
            Ti.API.error(e.error);
        }

        xhr.onload = function() {
            if (this.status == 200) {
                alert(this.responseText);
                // TODO callback
            } else {
                alert("ERROR:" + this.status);
            }
        }

        xhr.open("POST", "《SERVER URL》", true);

        xhr.setTimeout(10000);

        xhr.send({var1:123, var2:456, file:event.media});
    },
    cancel:function() { },
    error:function(error){ }
});

这第三个参数也太直接了把，这样岂不容易造成OOM？

2 楼 rensanning 2012-02-15  

以下是上传相册视频和图片的简单例子：

Titanium.Media.openPhotoGallery({
    allowEditing:true,
    mediaTypes:[Ti.Media.MEDIA_TYPE_VIDEO,Ti.Media.MEDIA_TYPE_PHOTO],
    success:function(event) {
        if (Titanium.Network.online == false) {
            return;
        }

        var xhr = Titanium.Network.createHTTPClient();

        xhr.onerror = function(e) {
            Ti.API.error(e.error);
        }

        xhr.onload = function() {
            if (this.status == 200) {
                alert(this.responseText);
                // TODO callback
            } else {
                alert("ERROR:" + this.status);
            }
        }

        xhr.open("POST", "《SERVER URL》", true);

        xhr.setTimeout(10000);

        xhr.send({var1:123, var2:456, file:event.media});
    },
    cancel:function() { },
    error:function(error){ }
});

1 楼 larry1314mvp 2012-02-15  

Do you have some information about upload file in titanium.