Выключатели HTML
Быстрое решение - использовать inflect.py для создания словаря для перевода.
Функция inflect.py имеет функцию number_to_words(), которая превратит число (например, 2) в его текстовую форму (например, 'two'). К сожалению, его обратное (что позволит вам избежать маршрута словаря перевода) не предлагается. Тем не менее, вы можете использовать эту функцию для создания словаря перевода:
>>> import inflect
>>> p = inflect.engine()
>>> word_to_number_mapping = {}
>>>
>>> for i in range(1, 100):
... word_form = p.number_to_words(i) # 1 -> 'one'
... word_to_number_mapping[word_form] = i
...
>>> print word_to_number_mapping['one']
1
>>> print word_to_number_mapping['eleven']
11
>>> print word_to_number_mapping['forty-three']
43
Если вы хотите посвятить некоторое время, возможно, будет возможно изучить внутреннюю работу inflect.py number_to_words() и построить свой собственный код, чтобы сделать это динамически (я не пытался это сделать).
2 ответа
Все браузеры Вы говорите? В этом случае однако Вы принимаете решение представить его визуально, убедиться использовать aria-pressed, таким образом, состояние переключателя подвергнуто доступности API (и таким образом вспомогательная технология). Одна хорошая вещь об этом состоит в том, что можно затем использовать этот атрибут в селекторе CSS такой как
button[aria-pressed="true"] {
border: 2px solid #000;
}
, Который сохранит Вас имеющий необходимость придумать имя класса - существует стандартный!
n.b. строго говоря, эти aria-pressed атрибут должен только использоваться с <button> элементы или элементы с role=button
Поскольку вы представляете один элемент управления с состоянием истина / ложь, вы действительно хотите использовать флажок в качестве базового элемента формы для обеспечения совместимости с браузерами нижнего уровня, программами чтения с экрана и т. Д. Один из подходов заключается в том, чтобы связать элемент управления меткой с флажком, а затем использовать комбинацию CSS и jQuery, чтобы сделать сам фактический флажок невидимым, отобразить метку как кнопку и изменить свойство границы метки, когда флажок установлен. или не отмечен.
Этот код работает в Chrome, Safari, Opera, Firefox и IE (благодаря взлому с условным комментарием, поскольку IE обрабатывает скрытые элементы формы иначе, чем другие браузеры). Если вы отправляете прилагаемую форму, вы получаете обычное поведение флажка HTML в итоговой отправке формы.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Toggle Button </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
/* Style the label so it looks like a button */
label {
border: 2px outset #cccccc;
background-color: #cccccc;
position: relative;
z-index: 3;
padding: 4px;
}
/* CSS to make the checkbox disappear (but remain functional) */
label input {
position: absolute;
visibility: hidden;
}
</style>
<!--[if IE]>
/* Conditional styles applied in IE only to work around cross-browser bugs */
<style>
label input#myCheckbox {
visibility: visible;
z-index: 2;
}
</style>
<![endif]-->
<script type="text/javascript">
$(function() {
$("#toggleCheckbox").click(function() {
$(this).closest("label").css({ borderStyle: this.checked ? 'inset' : 'outset' });
});
});
</script>
</head>
<body>
<form action="http://www.w3schools.com/html/html_form_action.asp" method="get">
<label for="toggleCheckbox">
<input type="checkbox" name="toggled" id="toggleCheckbox" value="1" />
Toggled?</label>
<input type="submit" name="verb" value="Submit Form" />
</form>
</body>
</html>