Радиокнопки в двух группах ограничений

Допустим, вам нужно разработать интерфейс, в котором пользователя надо ранжировать три категории по трем степеням оценки. С таким заданием вполне можно справиться с помощью радио кнопок.

Радио кнопки имеют исключительность в одной группе по умолчанию, и мы можем использовать ее для нашего решения. Плохая новость заключается в том, что нам нужно организовать взаимосвязь между группами, а способа решить задачу только средствами HTML нет. На рисунке ниже графически представлено, как должны взаимодействовать кнопки. Только одна кнопка может быть выделена в обведенной группе.

Создадим разметку HTML таким образом, чтобы по горизонтали кнопки были включены в одну группу, что обеспечит исключительность в данном направлении. Также зададим для них атрибуты HTML data-*, в которых укажем столбец для кнопки. А исключительность по вертикали будем имитировать в JavaScript.

<table>
<tr>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
</tr>
<tr>
    <td>РАЗ</td>
    <td><input type="radio" name="row-1" data-col="1"></td>
    <td><input type="radio" name="row-1" data-col="2"></td>
    <td><input type="radio" name="row-1" data-col="3"></td>
</tr>
<tr>
    <td>ДВА</td>
    <td><input type="radio" name="row-2" data-col="1"></td>
    <td><input type="radio" name="row-2" data-col="2"></td>
    <td><input type="radio" name="row-2" data-col="3"></td>
</tr>
<tr>
    <td>ТРИ</td>
    <td><input type="radio" name="row-3" data-col="1"></td>
    <td><input type="radio" name="row-3" data-col="2"></td>
    <td><input type="radio" name="row-3" data-col="3"></td>
</tr>
</table>

В примере используется простенький дизайн, который реализуется следующим кодом CSS:

table {
    border-collapse: collapse;
}
td, th {
    border: 1px solid #ccc;
    padding: 10px;
}
th:empty {
    border: 0;
}

Обратите внимание на удобный для нашего случая псевдо-класс :empty.

Теперь реализуем вертикальную исключительность с помощью jQuery.

var col, el;

$("input[type=radio]").click(function() {
   el = $(this);
   col = el.data("col");
   $("input[data-col=" + col + "]").prop("checked", false);
   el.prop("checked", true);
});

Когда радио кнопка нажимается, определяется столбец, и все кнопки в нем отключаются. Затем нажатая кнопка включается снова.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/BoHKz16muao/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Радиокнопки в двух группах ограничений | | 2012-06-19 12:03:12 | | Статьи Web-мастеру | | Допустим, вам нужно разработать интерфейс, в котором пользователя надо ранжировать три категории по трем степеням оценки. С таким заданием вполне можно справиться с помощью радио кнопок.Радио кнопки | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: