Каково действие onClick по умолчанию для переключателя формы? - PullRequest
Новая
       14

Каково действие onClick по умолчанию для переключателя формы?

0 голосов
/ 14 июля 2011

У меня есть приложение, которое сидит на IE. Полицейские используют его в своих транспортных средствах для запуска меток, получения информации о событиях и т. Д. Я делаю очень необходимые обновления для этого приложения и столкнулся с проблемой с переключателем.

Для удобства использования офицеры хотели, чтобы текст и поля ввода были больше. Когда я сделал их больше, кнопки Radio, очевидно, не выросли. Я нашел альтернативу jQuery на http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/label-only.html Я использую формат только для меток. Вместо отображения реальной кнопки-переключателя она подсвечивает метку, если выбрана эта опция.

Во всяком случае, у меня это работает на моей странице, однако, когда я нажимаю кнопки, они фактически просто исчезают. Приложение является мешаниной Javascript, VBScript, форм, XML и XSL, и до сих пор я не смог найти явный вызов сценария или иным образом, который бы заставил кнопки исчезнуть.

Итак, мой последний вопрос: каково действие по умолчанию для переключателя? Я надеюсь, что смогу создать новую функцию и вызвать ее с помощью действия onClick. Это своего рода последнее средство, и если это не сработает, мне придется найти альтернативу, но у меня есть ощущение, что я могу столкнуться с подобными проблемами.

Я разместил демо на http://www.myvigilanttechs.com/Radio/mobInfPA_vehicleinq.htm Это фактическая страница в приложении. Первый набор кнопок Radio - это настоящая вещь, второй набор внизу - моя попытка исправить с помощью лучшего отформатированного кода.

Кто-нибудь хочет нанести удар этому?

Ответы [ 2 ]

0 голосов
/ 15 июля 2011

Хорошо, я понял это. Я был уверен, что это проблема со всеми другими скриптами на странице, и я был частично прав.

Сначала я использую 2 разные библиотеки jQuery. Один для всплывающих подсказок, а другой для кнопок радио. Используя оператор noConflict (true), я смог решить эту часть. Тем не менее, так как оба были инициализированы в одном и том же операторе функции, я обнаружил, что оператор всплывающей подсказки выполняет поиск в широком смысле. Он искал все элементы управления формы ввода. Когда я уменьшил это до текста для элементов управления, переключатели начали работать правильно.

У меня нет доступа к тестовому ноутбуку сейчас, но когда я это сделаю, я опубликую код.

Спасибо всем за их предложения.

0 голосов
/ 14 июля 2011

Редактировать

На основе комментариев к OP переключатели могут быть скрыты с помощью видимость: скрыто .Добавление правила стиля для .bigButton input в приведенной ниже демонстрации работает как требуется.

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

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

<style type="text/css">

.bigButton {
  border: 1px solid blue;
  padding: 20px;
  display: inline-block;
  font-size: 200%;
}

.bigButton input {
  visibility: hidden;
}

</style>

<form action="">
  <label for="radio0" class="bigButton">Option 0
    <input type="radio" id="radio0" name="option0" onclick="bigFocus(this);">
  </label>
  <br>
  <label for="radio1" class="bigButton">Option 1
    <input type="radio" id="radio1" name="option0" onclick="bigFocus(this);">
  </label>
</form>


<script type="text/javascript">

function bigFocus(el) {
  var els = document.getElementsByName(el.name);
  var i = els.length;
  var node;
  while (i--) {
    node = els[i];
    node.parentNode.style.backgroundColor = node.checked? 'red' : '';
  }
}
</script>

Конечно, вам нужно привести это в порядок, просто показать общую стратегию.

...