Стилизация отдельных радиокнопок в друпальной форме - PullRequest
Новая
       18

Стилизация отдельных радиокнопок в друпальной форме

5 голосов
/ 18 мая 2010

У меня есть эта группа переключателей, в которой каждая отдельная кнопка имеет свою собственную позицию, установленную через атрибут style. Я хотел бы, как я могу заархивировать то же самое, используя друидную форму API. Я нашел, как стилизовать как единое целое, но не как индивидуальный контроль внутри группы. Вот как выглядит мой HTML-код - 

<input type="radio" name="base_location" checked="checked" value="0" style="margin-left:70px;float:left;"/><span style="float:left;">District</span>
  <input type="radio" name="base_location" value="1" style="margin-left:50px;float:left;"/><span style="float:left;">MRT</span>
  <input type="radio" name="base_location" value="2" style="margin-left:60px;float:left;"/><span style="float:left;">Address</span>

И это код друпа, в котором я застрял - 

$form['base_location'] = array(
   '#type' => 'radios',
   '#title' => t('base location'),
   '#default_value' => variable_get('search_type', 0),
   '#options' => array(
'0'=>t('District'),
'1'=>t('MRT'),
'2'=>t('Address')),
   '#description' => t('base location'),

Мне известно о # type => существовании радио. Тем не менее, я не знаю, как сгруппировать все мои переключатели в этом отношении. Если бы я использовал один и тот же ключ массива для всех них, они столкнулись бы друг с другом. Если я этого не сделаю, они не будут рассматриваться как часть одной группы. Заранее благодарю.

Ответы [ 2 ]

3 голосов
/ 18 мая 2010

Если вы используете Drupal 6.x Form API и #type=>radios (http://api.drupal.org/api/function/theme_radios/6), у каждого радиоэлемента будет свой уникальный идентификатор, который вы можете использовать для применения правильного CSS.

Пример, который вы предоставили 

$form['base_location'] = array(
  '#type' => 'radios',
  '#title' => t('base location'),
  '#default_value' => variable_get('search_type', 0),
  '#options' => array(
  '0'=>t('District'),
  '1'=>t('MRT'),
  '2'=>t('Address')),
  '#description' => t('base location'),
);

должен выводить разметку так: 

<div id="base-location-0-wrapper" class="form-item">
  <label for="base-location-0" class="option"><input type="radio" class="form-radio" value="0" name="base_location" id="base-location-0"> District</label>
</div>
<div id="base-location-1-wrapper" class="form-item">
  <label for="base-location-1" class="option"><input type="radio" class="form-radio" value="1" name="base_location" id="base-location-1"> MRT</label>
</div>
<div id="base-location-2-wrapper" class="form-item">
  <label for="base-location-2" class="option"><input type="radio" class="form-radio" value="2" name="base_location" id="base-location-2"> Address</label>
</div>

Примените следующий CSS, и вы должны быть установлены. 

  #base-location-0-wrapper,
  #base-location-1-wrapper,
  #base-location-2-wrapper {
    display:inline;
    margin-left:50px;
  }
1 голос
/ 18 мая 2010

Ответ заключается в использовании CSS с HTML, который у вас уже есть. Похоже, вы просто хотите изменить отображение переключателей на «встроенный» с полями 10px, что вы можете сделать. (И если бы вы разбили радио на отдельные элементы внутри набора полей, они больше не взаимодействовали бы друг с другом.)

...