5

我有这组单选按钮，其中每个单独的按钮都有自己的位置，通过样式属性设置。我想如何使用 drupal form 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>

这是我坚持的drupal代码 -

$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=>radio 的存在。但是，在这方面，我不知道如何将我所有的单选按钮组合在一起。如果我对它们都使用相同的数组键，它们会相互碰撞。如果我不这样做，他们就不会被视为同一组的一部分。我提前谢谢你。

4

2 回答 2

3

如果您使用 Drupal 6.x 表单 API 和#type=>radios( http://api.drupal.org/api/function/theme_radios/6 ) 每个单选元素将有其唯一的 id，您可以使用它来应用适当的 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;
  }
于 2010-05-18T14:46:58.463 回答
1

答案是将 CSS 与您已有的 html 一起使用。看起来您只想将单选按钮的显示更改为具有 10px 边距的“内联”，您可以这样做。（如果您确实将无线电分解为字段集中的单独元素，它们将不再相互交互。）

于 2010-05-18T03:41:57.573 回答