jQtouch排序按钮

Question

我看了看jqtouch的文档，但我无法弄清楚如何创建iphone风格的排序按钮组，如此附加图片。 http://img843.imageshack.us/img843/8669/captureov.png

你有什么想法如何与jqtouch做到这一点，是否有任何插件这样做jqtouch？

谢谢您的答复， CAS sakal

Answer 1

您可能必须推出自己的，用CSS（风格）和JavaScript（控制单选择）。

我只是快速的风格了类似于iPhone的分段控制按钮组，以帮助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>