VPF::Как сверстать? - Форум программистов

Ctulhy

Дата 2.3.2011, 21:41 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: 2
Всего: 2

Мне необходимо сверстать форму голосования (см. вложение).
При клике на кнопку фон, окружающий цифру меняется с серого на пурпурный. Посоветуйте, как лучше решить данную задачу.

Это сообщение отредактировал(а) Ctulhy - 2.3.2011, 21:44

Присоединённый файл ( Кол-во скачиваний: 22 )

_________2.png 20,18 Kb

--------------------

скучно в Москве и дождливо в Крыму.

Ctulhy

Дата 2.3.2011, 22:54 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: 2
Всего: 2

http://usecom.ru/articles/view/16/22/ - можно сделать так.
Еще варианты?

--------------------

скучно в Москве и дождливо в Крыму.

SelenIT

Дата 4.3.2011, 00:12 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Как вариант:

Код


<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Модные радиокнопки</title>
<style>

body { font: normal .75em/1 sans-serif; }

table { border-collapse: collapse; }

td, p { padding: .25em; }

label {
    font: bold 1.333em/1 sans-serif;
    display: block;
    color: #888;
    background-color: #ccc;
    border-radius: 1em;
    width: 2em;
    padding: .5em 0;
    text-align: center;
    position: relative;
}

label:hover { color: #fff; background-color: #888; }
label.chosen { color: #fff;    background-color: #c48; }

label input { position: absolute; top: -999em; }

</style>

<script>
    function decorate(tr, e) {
        var tgt = e.target||e.srcElement;
        if (tgt.tagName == 'LABEL') {
            if (tr.chosen) tr.chosen.className = '';
            tgt.className = 'chosen';
            tr.chosen = tgt;
        }
    }
</script>

<form action="" method="get">
    
    <h2>Оцените ресторан</h2>
    
    <table>
        <tr onclick="decorate(this, event)">
            <td>Кухня</td>
            <td><label>1<input type="radio" name="q1" id="q1_1" value="1"></label></td>
            <td><label>2<input type="radio" name="q1" id="q1_2" value="2"></label></td>
            <td><label>3<input type="radio" name="q1" id="q1_3" value="3"></label></td>
            <td><label>4<input type="radio" name="q1" id="q1_4" value="4"></label></td>
            <td><label>5<input type="radio" name="q1" id="q1_5" value="5"></label></td>
            
        </tr>
        <tr onclick="decorate(this, event)">
            <td>Напитки</td>
            <td><label>1<input type="radio" name="q2" id="q2_1" value="1"></label></td>
            <td><label>2<input type="radio" name="q2" id="q2_2" value="2"></label></td>
            <td><label>3<input type="radio" name="q2" id="q2_3" value="3"></label></td>
            <td><label>4<input type="radio" name="q2" id="q2_4" value="4"></label></td>
            <td><label>5<input type="radio" name="q2" id="q2_5" value="5"></label></td>
        </tr>
        <tr onclick="decorate(this, event)">
            <td>Обслуживание</td>
            <td><label>1<input type="radio" name="q3" id="q3_1" value="1"></label></td>
            <td><label>2<input type="radio" name="q3" id="q3_2" value="2"></label></td>
            <td><label>3<input type="radio" name="q3" id="q3_3" value="3"></label></td>
            <td><label>4<input type="radio" name="q3" id="q3_4" value="4"></label></td>
            <td><label>5<input type="radio" name="q3" id="q3_5" value="5"></label></td>
        </tr>
    </table>

    <p><input type="submit" value="Оценить"></p>
</form>

Суть в том, что визуальный эффект ложится на label-ы, которые передают нажатие обычным (хотя невидимым) радиобаттнонам. Для старых IE можно поэкспериментировать с закругляторами углов типа PIE либо использовать вместо круголков старые добрые фоновые картинки. Но совсем без скрипта, насколько я в курсе, никак...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »