Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.04.2012, 13:59
Новичок на форуме
Отправить личное сообщение для xlebus Посмотреть профиль Найти все сообщения от xlebus
 
Регистрация: 16.04.2012
Сообщений: 2

Изменить цвет текста активной radio button
Здравствуйте,
сделал форму для выбора работ с помощью Drupal + Views (AJAX) + Better Exposed Filter (block) + Views hack (Autosubmit), но теперь никак не выходит применить стиль color к тэгу label, для помеченой кнопки. Провожу пример кода блока:

<div class="block block-views" id="block-views--exp-design-tapyba">
  <div class="content">
    <form action="/decor/painting"  accept-charset="UTF-8" method="get" id="views-exposed-form-design"><div>
      <div class="views-exposed-form">
        <div class="views-exposed-widgets clear-block">
          <div class="views-exposed-widget views-widget-filter-term_node_tid_depth">
            <div class="views-widget">
              <div class="form-radios"><div class="bef-select-as-radios">

<div class="form-item" id="edit-term-node-tid-depth-18-wrapper">
  <label class="option" for="edit-term-node-tid-depth-18"><input type="radio" id="edit-term-node-tid-depth-18" name="term_node_tid_depth" value="18"  checked="checked"  class="form-radio" /> Text1</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-20-wrapper">
  <label class="option" for="edit-term-node-tid-depth-20"><input type="radio" id="edit-term-node-tid-depth-20" name="term_node_tid_depth" value="20"   class="form-radio" /> Text2</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-21-wrapper">
  <label class="option" for="edit-term-node-tid-depth-21"><input type="radio" id="edit-term-node-tid-depth-21" name="term_node_tid_depth" value="21"   class="form-radio" /> Text3</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-19-wrapper">
  <label class="option" for="edit-term-node-tid-depth-19"><input type="radio" id="edit-term-node-tid-depth-19" name="term_node_tid_depth" value="19"   class="form-radio" /> Text4</label>
</div>
              </div></div>
			</div>
          </div>
<div class="views-exposed-widget views-submit-button">
  <input type="submit" id="edit-submit-design" value="Apply"  class="form-submit" />
  <input type="hidden" name="vfas" id="edit-vfas" value=""  />
</div>
        </div>
      </div>
    </div></form>
  </div>
</div>


C помощью стилей, никак не получается придать цвет надпиям (label), а изменить шаблон: "<label><input ...></label>" невыходит, так как используются много сторонних модулей, максимум что можно изменить, так это: "<div class='form-item' ...", думаю может прописать JavaScript параметр onClick и обратиться к "DIV#edit-term-node-tid-depth-18-wrapper label", что бы изменить цвет активной кнопки, но я не силён в JavaScript.

Может у вас есть идеи, как это осуществить?

Результат нужен такой:
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2012, 15:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,835

Сообщение от xlebus
Может у вас есть идеи, как это осуществить?
Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.on {
	color: green;
}
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('.bef-select-as-radios :radio:checked').each(function (){
		$(this).parent().addClass('on');
	});
	$('.bef-select-as-radios label').click(function (){
		$('.bef-select-as-radios label').removeClass('on'),
		$(this).addClass('on');
	});
});
</script>
</head>
<body>
<div class="block block-views" id="block-views--exp-design-tapyba">
  <div class="content">
    <form action="/decor/painting"  accept-charset="UTF-8" method="get" id="views-exposed-form-design"><div>
      <div class="views-exposed-form">
        <div class="views-exposed-widgets clear-block">
          <div class="views-exposed-widget views-widget-filter-term_node_tid_depth">
            <div class="views-widget">
              <div class="form-radios"><div class="bef-select-as-radios">

<div class="form-item" id="edit-term-node-tid-depth-18-wrapper">
  <label class="option" for="edit-term-node-tid-depth-18"><input type="radio" id="edit-term-node-tid-depth-18" name="term_node_tid_depth" value="18"  checked="checked"  class="form-radio" /> Text1</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-20-wrapper">
  <label class="option" for="edit-term-node-tid-depth-20"><input type="radio" id="edit-term-node-tid-depth-20" name="term_node_tid_depth" value="20"   class="form-radio" /> Text2</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-21-wrapper">
  <label class="option" for="edit-term-node-tid-depth-21"><input type="radio" id="edit-term-node-tid-depth-21" name="term_node_tid_depth" value="21"   class="form-radio" /> Text3</label>
</div>
<div class="form-item" id="edit-term-node-tid-depth-19-wrapper">
  <label class="option" for="edit-term-node-tid-depth-19"><input type="radio" id="edit-term-node-tid-depth-19" name="term_node_tid_depth" value="19"   class="form-radio" /> Text4</label>
</div>
              </div></div>
			</div>
          </div>
<div class="views-exposed-widget views-submit-button">
  <input type="submit" id="edit-submit-design" value="Apply"  class="form-submit" />
  <input type="hidden" name="vfas" id="edit-vfas" value=""  />
</div>
        </div>
      </div>
    </div></form>
  </div>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 16.04.2012, 17:24
Новичок на форуме
Отправить личное сообщение для xlebus Посмотреть профиль Найти все сообщения от xlebus
 
Регистрация: 16.04.2012
Сообщений: 2

ksa
Спасибо большое! Это как раз то, что мне нужно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение значения из двух групп radio button kristalmen Элементы интерфейса 2 21.11.2011 21:13
Проблема radio button с кроссбраузерностью shkarbatov Javascript под браузер 0 28.07.2011 09:55
Как изменить цвет текста в textarea Joshka Общие вопросы Javascript 4 04.05.2011 15:09
изменить цвет фона и запомнить его delias Элементы интерфейса 4 19.03.2010 16:34
цвет кнопки, цвет текста на кнопке, всплывающее окно matana Общие вопросы Javascript 8 26.05.2009 16:08