Làm thế nào để tôi bọc hai phần tử kết xuất trong một div?


12

Đưa ra mảng kết xuất này:

$output = array(
    'twitter-icon' => array(
      '#type' => 'markup',
      '#markup' => '<div class="twitter-icon"></div>'
    ),
    'twitter-link' => array(
      '#type' => 'markup',
      '#markup' => l('follow us on Twitter', 'https://twitter.com/#!/zujava'),
    ), 
  );

Làm cách nào để bọc cả hai yếu tố này trong một DIV?

Câu trả lời:


29

Bạn cũng có thể sử dụng #containerphần tử biểu mẫu và mã tương tự như phần sau:

$wrapper = array(
  '#type' => 'container',
  '#attributes' => array(
    'class' => array('class-name'),
  ),
);

$wrapper['twitter-icon'] => array(
  '#type' => 'markup',
  '#markup' => '<div class="twitter-icon"></div>'
);

$wrapper['twitter-link'] => array(
  '#type' => 'markup',
  '#markup' => l(t('follow us on Twitter'), 'https://twitter.com/#!/zujava'),
); 

Phần tử #container bao bọc các phần tử con của nó bằng một <div>thẻ, có lớp CSS là lớp được truyền trong thuộc #attributestính.

Bạn thậm chí có thể sử dụng một thùng chứa cho phần tử "biểu tượng twitter", nhưng điều đó không cung cấp cho bạn bất kỳ pro nào, ngoại trừ trong trường hợp bạn có thể thêm một phần tử vào đó, như với đoạn mã sau:

$wrapper = array(
  '#type' => 'container',
  '#attributes' => array(
    'class' => array('class-name'),
  ),
);

$wrapper['twitter-icon'] => array(
  '#type' => 'container',
  '#attributes' => array(
    'class' => array('twitter-icon'),
  ),
);

if ($condition) {
  $wrapper['twitter-icon']['twitter-icon-text'] => array(
    '#type' => 'markup',
    '#markup' => t('Icon text'),
  );
}

$wrapper['twitter-link'] => array(
  '#type' => 'markup',
  '#markup' => l(t('follow us on Twitter'), 'https://twitter.com/#!/zujava'),
); 

Đối với tôi đây là câu trả lời tốt nhất, vì nó sử dụng cấu trúc mảng vật lý để thể hiện những gì đang được bọc, sẽ sao chép và dán tốt hơn (di chuyển một phần tử trong câu trả lời @ninjascorner có thể phá vỡ các DIV mở / đóng) và không cần thêm chức năng chủ đề. Cảm ơn!
Justin

Điều đó là chính xác: Bạn có thể thêm một phần tử khác được hiển thị trong cùng một vùng chứa mà không di chuyển thuộc #suffixtính từ phần tử cuối cùng hoặc thuộc #prefixtính từ phần tử đầu tiên sang phần tử được thêm mới. Như bạn đã nói, điều này ít xảy ra lỗi.
kiamlaluno

6

Đây có phải là những gì bạn đang tìm kiếm?

$output = array(
    'twitter-icon' => array(
      '#type' => 'markup',
      '#markup' => '<div class="twitter-icon"></div>'
      '#prefix' => '<div class="test">',
    ),
    'twitter-link' => array(
      '#type' => 'markup',
      '#markup' => l('follow us on Twitter', 'https://twitter.com/#!/fdgf'),
      '#suffix' => '</div>',
    ), 
);

Mong rằng sẽ giúp!


@nija + 1ed, Câu trả lời tuyệt vời Tôi đã quên những thuộc tính đó. Xin vui lòng đọc câu trả lời của tôi, điều này có thể đạt được thông qua thay thế dựa trên chủ đề cho hậu tố và tiền tố của bạn.
stefgosselin

@stefgosselin, ý bạn là bạn muốn tạo một tập tin tpl theo chủ đề đó?
ninjasc Corner

Cảm ơn câu trả lời này. Tôi biết làm thế nào để làm điều này trên một yếu tố, nhưng nó đã không xảy ra với tôi khi tách hậu tố và tiền tố. Hấp dẫn. Nó cảm thấy lộn xộn với tôi, nhưng tôi không thể nói rõ tại sao vì vậy tôi thực sự không có vấn đề gì.
Justin

@ninjascorner Xin lỗi vì sự chậm trễ, tôi không thể tìm thấy ghi chú tôi có về chủ đề này. Ngoài ra tôi cũng nghĩ rằng một cách có thể kém thanh lịch hơn các câu trả lời khác, có thể sử dụng trong chủ đề hoặc mô-đun đang sử dụng móc chủ đề theme_render_example_add_div Xem api.drupal.org/api/examples/ trộm )
stefgosselin

Điều này chỉ tốt nếu bạn siêu chắc chắn rằng cả hai yếu tố sẽ luôn được hiển thị. Thật dễ dàng để kết thúc với <div> không được tiết lộ khi chia tách như thế này.
kufeiko

2

Bạn cũng có thể tạo một chủ đề cho việc này.

$form['twitter']['#theme'] = 'my_twitter_theme';

$form['twitter']['icon'] = array(
'twitter-icon' => array(
  '#type' => 'markup',
  '#markup' => '<div class="twitter-icon"></div>'
);

$form['twitter']['link'] = array(
  '#type' => 'markup',
  '#markup' => l('follow us on Twitter', 'https://twitter.com/#!/zujava'),
);

Và trong hook hook theme của bạn:

function my_hook_theme(){
  return array(
    'my_twitter_theme' => array('form' => NULL)
  );
} 

Và trong chức năng chủ đề:

function theme_my_twitter_theme($form){
  $output = "";

  $output .= "<div class=\"twitter\">";
  $output .= drupal_render($form['icon']);
  $output .= drupal_render($form['link']);
  $output .= "</div>";    

  $output .= drupal_render($form);
  return $output;
}

Tôi sử dụng cái này trong Drupal 6, tôi không chắc là nó có hoạt động trong D7 không nhưng tôi hy vọng vậy


Có, tôi đã tìm ra phương pháp này sau khi đăng (tốt, tôi sao chép mô-đun ví dụ). Nó hoạt động rất tốt, nhưng tôi không coi đó là phương pháp tốt nhất bởi vì (nếu tôi hiểu chính xác), bạn phải đặt tên lớp của mình trong hàm, làm giảm khả năng sử dụng lại.
Justin
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.