Кнопки сортировки jQtouch

Я просмотрел документацию jqtouch, но не смог понять, как создать группу кнопок сортировки в стиле iphone, как на этом прикрепленном изображении. http://img843.imageshack.us/img843/8669/captureov.png

Есть ли у вас какие-либо идеи, как это сделать с помощью jqtouch, есть ли какой-либо подключаемый модуль, делающий это для jqtouch?

Спасибо за ответ, cas sakal


iphone javascript css jqtouch
person Cas Sakal    schedule 26.09.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Возможно, вам придется создать свой собственный с помощью CSS (стиль) и JavaScript (управление одним выделением).

Я просто быстро создал группу кнопок, похожую на сегментированный элемент управления в iPhone, с помощью этой статьи:

<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>
person William Niu    schedule 28.09.2010