Стилизовать форму выбора количества

Тема в разделе "JavaScript", создана пользователем pingwinec, 10 авг 2012.

Модераторы: ZiX
  1. pingwinec

    pingwinec Постоялец

    Регистр.:
    29 июн 2008
    Сообщения:
    103
    Симпатии:
    14
    Нужно стилизовать форму выбора количества как здесь http://demo.mintthemes.com/armonico/convert-to-revert-tee/ . Видел у Попова на сайте реализацию но там все менее красиво реализовано.
     
  2. d0ublezer0

    d0ublezer0

    Регистр.:
    21 май 2009
    Сообщения:
    151
    Симпатии:
    79
    Если речь идет именно о выборе количества (а не вариантов размеров, к примеру) - то там JS используется только для изменения значений. Реально вам достаточно скопировать код сверстанных элементов и стили к ним. Поправить названия полей под свой сайт.
    Код:
    HTML:
    <div class="qty">
                                                    <input value="1" class="text numvalue" name="item_quantity" id="Cart66UserQuantityInput_1">
                                                    <ul class="link">
                                                        <li><a class="upbtn"><img width="18" height="15" alt="image" src="http://demo.mintthemes.com/armonico/wp-content/themes/Armonico/css/images/ico-up.gif"></a></li>
                                                        <li><a class="downbtn"><img width="18" height="16" alt="image" src="http://demo.mintthemes.com/armonico/wp-content/themes/Armonico/css/images/ico-down.gif"></a></li>
                                                    </ul>
                                                </div>
    Стили:
    Код:
    .qty {
        background: url("css/images/bg-qty.gif") no-repeat scroll 0 0 transparent;
        float: left;
        height: 35px;
        margin: 0 10px 0 0;
        padding: 0 0 0 6px;
        width: 54px;
    }
    .qty .text, #viewCartTable tbody td .qty .text {
        background: none repeat scroll 0 0 transparent;
        border: 0 none;
        color: #666666;
        float: left;
        font: 12px/15px 'HelveticaNeueBold';
        margin: 9px 0 0;
        padding: 0;
        text-align: center;
        width: 30px;
    }
    .qty .link, #viewCartTable tbody td .qty .link {
        float: right;
        font-size: 0;
        line-height: 0;
        list-style: none outside none;
        margin: 0;
        padding: 1px;
        width: 18px;
    }
    .qty .link li, #viewCartTable tbody td .qty .link li {
        padding: 0 0 1px;
    }
    .qty .link li img, #viewCartTable tbody td .qty .link li img {
        display: block;
    }
    Ну и картинки потаскать с того сайта.
    А дальше только прикрутите на нажатия "кнопок" + и - скрипты, увеличивающие/уменьшающие значение в поле "количество".

    Надеюсь, понятно изложил.
     
    pingwinec нравится это.