Javascript jQtouch排序按钮

我查看了jqtouch的文档，但不知道如何创建iphone风格的排序按钮组，如下图所示。

您知道如何使用jqtouch实现这一点吗？有没有插件可以为jqtouch实现这一点

谢谢你的回复，

---

cas sakal

您可能需要使用CSS（样式）和JavaScript（控制单个选择）来实现自己的功能

我只是在以下帮助下快速设计了一个按钮组，类似于iPhone中的分段控件：

.按钮组
{
显示：-网络工具包盒；
-webkit盒方向：水平；
-webkit盒包：证明；
-webkit框大小：边框框；
}
.buttonGroup>li
{
显示：块；
-webkit-box-flex:1；
边框：实心1px#9a9a99；
左边界：无；
-webkit边界半径：0px；
文本对齐：居中；
背景图像：
-webkit渐变（线性、左上、左下、，
来自（#fbfb），
到（#bdbdbd））；
颜色：#6b；
字体大小：16px；
填充：10px；
}
.buttonGroup>li:第一个孩子
{
左边框：实心1px#9a99；
-webkit边框左上半径：10px；
-webkit边框左下半径：10px；
}
.buttonGroup>li:最后一个孩子
{
-webkit边框右上角半径：10px；
-webkit边框右下半径：10px；
}
.buttonGroup>li.selected
{
背景图像：
-webkit渐变（线性、左上、左下、，
从（#2a55b1），
到（#6297f2））；
颜色：#fff；
边框颜色：#193a7f；
}

按钮
钮扣
钮扣

您可能需要使用CSS（样式）和JavaScript（控制单个选择）来实现自己的功能

我只是在以下帮助下快速设计了一个按钮组，类似于iPhone中的分段控件：

.按钮组
{
显示：-网络工具包盒；
-webkit盒方向：水平；
-webkit盒包：证明；
-webkit框大小：边框框；
}
.buttonGroup>li
{
显示：块；
-webkit-box-flex:1；
边框：实心1px#9a9a99；
左边界：无；
-webkit边界半径：0px；
文本对齐：居中；
背景图像：
-webkit渐变（线性、左上、左下、，
来自（#fbfb），
到（#bdbdbd））；
颜色：#6b；
字体大小：16px；
填充：10px；
}
.buttonGroup>li:第一个孩子
{
左边框：实心1px#9a99；
-webkit边框左上半径：10px；
-webkit边框左下半径：10px；
}
.buttonGroup>li:最后一个孩子
{
-webkit边框右上角半径：10px；
-webkit边框右下半径：10px；
}
.buttonGroup>li.selected
{
背景图像：
-webkit渐变（线性、左上、左下、，
从（#2a55b1），
到（#6297f2））；
颜色：#fff；
边框颜色：#193a7f；
}

按钮
钮扣
钮扣

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