2010-09-26 19 views

Répondre

1

Vous pourriez avoir à rouler vos propres, avec CSS (style) et JavaScript (contrôle de la seule sélection).

Je viens Styled rapidement un groupe de bouton similaire à la commande segmentée iPhone, avec l'aide de this article:

<style> 
.buttonGroup 
{ 
     display: -webkit-box; 
     -webkit-box-orient: horizontal; 
     -webkit-box-pack:justify; 
     -webkit-box-sizing: border-box; 
} 

.buttonGroup > li 
{ 
     display: block; 
     -webkit-box-flex: 1; 
     border: solid 1px #9a9a99; 
     border-left: none; 
     -webkit-border-radius: 0px; 
     text-align: center; 
     background-image: 
       -webkit-gradient(linear, left top, left bottom, 
         from(#fbfbfb), 
         to(#bdbdbd)); 
     color: #6b6b6b; 
     font-size: 16px; 
     padding: 10px; 
} 

.buttonGroup > li:first-child 
{ 
     border-left: solid 1px #9a9a99; 
     -webkit-border-top-left-radius: 10px; 
     -webkit-border-bottom-left-radius: 10px; 
} 

.buttonGroup > li:last-child 
{ 
     -webkit-border-top-right-radius: 10px; 
     -webkit-border-bottom-right-radius: 10px; 
} 

.buttonGroup > li.selected 
{ 
     background-image: 
       -webkit-gradient(linear, left top, left bottom, 
         from(#2a55b1), 
         to(#6297f2)); 
     color: #fff; 
     border-color: #193a7f; 
} 
</style> 

<ul class="buttonGroup"> 
    <li class="selected">button</li> 
    <li>button</li> 
    <li>button</li> 
</ul>