Атрибут radiogroup тега <menuitem> — група перемикачів
Атрибут radiogroup вказує ім'я групи команд, які будуть перемикатися, коли елементи команд/меню переключаються.
Загальний опис
автор: NagarD
- Нотатка
-
Цей атрибут може бути використаний тільки якщо type="radio".
автор: с3с
Синтаксис
<menuitem radiogroup="groupname">Атрибут radiogroup може отримувати єдине значення:
-
groupname -
Задає ім'я групи команд, які будуть перемикатися, коли сама команда активується або переключається (тільки якщо type="radio").
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| - | 8+ | - | - | - | - |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| - | - | 8+ | - |
Приклади
+ запропонувати свій приклад у пісочниці
Зверху — те, що справді шукають: група перемикачів, зібрана спільним name, з рамкою <fieldset>, підписами <label> і виділенням через :checked. Знизу — три перемикачі з РІЗНИМИ іменами: спробуйте позначити всі три одразу, вони не вимикають одне одного. У самому кінці — рядок <menuitem radiogroup="...">, який браузер показує як звичайний текст, бо такого елемента більше немає.
HTML
<fieldset class="ok">
<legend>Спосіб доставки — спільне ім'я, справжня група</legend>
<p><label><input type="radio" name="dostavka" value="pickup" checked> <span>Самовивіз</span></label></p>
<p><label><input type="radio" name="dostavka" value="courier"> <span>Кур'єром</span></label></p>
<p><label><input type="radio" name="dostavka" value="post"> <span>Поштою</span></label></p>
</fieldset>
<fieldset class="bad">
<legend>Та сама розмітка, але імена різні — групи немає</legend>
<p><label><input type="radio" name="a1" value="pickup"> <span>Самовивіз</span></label></p>
<p><label><input type="radio" name="a2" value="courier"> <span>Кур'єром</span></label></p>
<p><label><input type="radio" name="a3" value="post"> <span>Поштою</span></label></p>
<p class="why">Позначте всі три — вони не заважають одне одному.</p>
</fieldset>
<p class="dead">Мертвий елемент, як його бачить браузер сьогодні:
<menuitem radiogroup="dostavka" label="Самовивіз">Самовивіз</menuitem>
— це просто текст без будь-якої поведінки.</p>CSS
fieldset {
max-width: 460px;
margin: 0 0 18px;
padding: 8px 12px;
border: 2px solid #b9c6d8;
}
fieldset.bad {
border-color: #d64545;
border-style: dashed;
}
legend {
padding: 0 6px;
font-weight: 600;
}
fieldset p {
margin: 6px 0;
}
label {
cursor: pointer;
}
input:checked + span {
padding: 1px 8px;
border-radius: 4px;
background: #e7f6ea;
box-shadow: 0 0 0 2px #3a9a4f;
}
.bad input:checked + span {
background: #fdeaea;
box-shadow: 0 0 0 2px #d64545;
}
.why {
color: #5a6472;
font-size: .9em;
}
.dead {
max-width: 460px;
padding: 8px 10px;
background: #f2f4f7;
border-left: 6px solid #8a94a6;
color: #5a6472;
}
menuitem {
padding: 1px 6px;
background: #fff;
border: 1px dashed #8a94a6;
font-family: ui-monospace, monospace;
}Найпростіший приклад використання HTML атрибута radiogroup теґа <menuitem>
<div contextmenu = "testmenu">
Клікни по мені правою кнопкою мишки
<menu type = "context" id = "testmenu">
<menuitem label = "like" type="radio" radiogroup="groupname"></menuitem>
<menuitem label = "dislike" type="radio" radiogroup="groupname"></menuitem>
<menuitem label = "Name" type="radio" radiogroup="groupname"></menuitem>
<menuitem label = "LastName" type="radio" radiogroup="groupname1"></menuitem>
</menu>
</div>Різниця між HTML 4.01 та HTML5
Атрибут <menuitem> є новим у HTML5. </menuitem>
Коментарі
Коментарів ще немає — будьте першим!