2011-05-23 5 views
1

Je suis nouveau avec Appcelerator et j'ai rencontré un problème ennuyant concernant la mise en page.Titanium Appcelerator Boutons personnalisés

Je dois faire une barre de menu qui est très facile à faire avec html simple (ul> li> a et c'est tout). Le problème est qu'il semble que toutes les fonctions liées aux boutons ne sont pas personnalisables. Je veux que les boutons soient affichés en texte clair, pas sur les boutons.

La première pensée était d'utiliser des étiquettes (au lieu de boutons). Mais ... Est-ce une bonne façon? J'ai besoin d'une barre de menu, pas d'un paragraphe de texte! En plus de cela, le menu est en quelque sorte flexible, pas comme les étiquettes.

C'est une (! De beaucoup) choses que j'essayé:

var menu_color = Titanium.UI.createButton({ 
     title:Ti.Locale.getString("menu_color") || "Color", 
     height:24, 
     top:10 
    }); 

J'ai aussi ajouté borderWidth:0 (aucun effet) et backgroundColor:none/transparent sans chance.

Aide? :)

Répondre

2

J'utilise généralement des vues lorsque j'ai besoin de créer ce que vous avez décrit ci-dessus.

Par exemple:

J'utilise une vue avec une mise en page verticale, puis ajouter mon point de vue de l'enfant. Les vues enfant ont alors des écouteurs pour le clic ou tout autre événement.

Ceci vous permet d'avoir plus de contrôle sur le formatage. Un effet secondaire de ceci est que vous devrez créer votre propre "presse" ui cue dans certains cas.

 
var demo = {win : Ti.UI.currentWindow}; 

(function(){ 

    //Create the container view 
    demo.vwMain = Ti.UI.createView({height:100, layout:'vertical', backgroundColor:'yellow'}); 
    demo.win.add(demo.vwMain); 
    demo.fakebutton1 = Ti.UI.createView({height:40, backgroundColor:'blue',left:25,right:25,borderRadius:5,borderColor:'#000'}); 
    demo.vwMain.add(demo.fakebutton1); 
    demo.fakebutton2 = Ti.UI.createView({top:5,height:40, backgroundColor:'green',left:25,right:25,borderRadius:5,borderColor:'#000'}); 
    demo.vwMain.add(demo.fakebutton2); 

    demo.fakebutton1.addEventListener('click', function(e) { 
     alert('Clicked fake button 1'); 
    }); 

    demo.fakebutton2.addEventListener('click', function(e) { 
     alert('Clicked fake button 2'); 
    }); 

})(); 
+0

hmm ... Je vais essayer. Merci! –

+0

ok, semble fonctionner presque ok. Il existe un moyen de ne pas spécifier la largeur (en fait, juste pour cloner le comportement de la barre de boutons sans ... l'aspect de la barre de boutons) –

+0

Il est préférable d'utiliser la disposition horizontale et de calculer la largeur en fonction de la taille de l'écran. –

0

créer une vue à la propriété de mise en page est définie à la verticale et ajoutez l'étiquette ou sur le bouton que vous want.View est comme dans HTML.Hope vous comprenez.

+0

Vous réalisez que c'est une question vieille de 4 ans, oui? :) –