ฉันจะล้อมองค์ประกอบการเรนเดอร์สองตัวใน div ได้อย่างไร


12

รับอาร์เรย์ที่เรนเดอร์นี้:

$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'),
    ), 
  );

ฉันจะรวมองค์ประกอบทั้งสองนี้ไว้ใน DIV เดียวได้อย่างไร

คำตอบ:


29

คุณยังสามารถใช้#containerองค์ประกอบแบบฟอร์มและรหัสที่คล้ายกับองค์ประกอบต่อไปนี้:

$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'),
); 

ภาชนะ #องค์ประกอบ wraps เด็กองค์ประกอบที่มี<div>แท็กซึ่งคลาส CSS เป็นหนึ่งผ่านไปใน#attributesสถานที่ให้บริการ

คุณสามารถใช้คอนเทนเนอร์สำหรับองค์ประกอบ "twitter-icon" แต่นั่นไม่ได้ให้มืออาชีพใด ๆ ยกเว้นในกรณีที่คุณสามารถเพิ่มองค์ประกอบลงไปได้เช่นเดียวกับรหัสต่อไปนี้:

$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'),
); 

สำหรับฉันนี่คือคำตอบที่ดีที่สุดเนื่องจากใช้โครงสร้างอาร์เรย์แบบฟิสิคัลเพื่อแสดงสิ่งที่ถูกห่อจะคัดลอกและวางดีกว่า (การย้ายองค์ประกอบใน @ninjascorner คำตอบอาจทำให้ DIVs เปิด / ปิดไม่ทำงาน) ฟังก์ชั่นชุดรูปแบบ ขอบคุณ!
Justin

ถูกต้อง: คุณสามารถเพิ่มองค์ประกอบอื่นที่แสดงในคอนเทนเนอร์เดียวกันโดยไม่ย้าย#suffixคุณสมบัติจากองค์ประกอบสุดท้ายหรือ#prefixคุณสมบัติจากองค์ประกอบแรกไปยังองค์ประกอบใหม่ที่เพิ่มเข้ามา อย่างที่คุณพูดนี่เป็นข้อผิดพลาดน้อยกว่า
kiamlaluno

6

นี่คือสิ่งที่คุณกำลังมองหา?

$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>',
    ), 
);

หวังว่าจะช่วย!


@nija +1 แล้วคำตอบที่ดีฉันลืมคุณลักษณะเหล่านั้น โปรดอ่านคำตอบของฉันนี้สามารถทำได้ผ่านชุดรูปแบบขึ้นอยู่กับคำต่อท้ายและคำนำหน้าของคุณ
stefgosselin

@stefgosselin คุณหมายถึงคุณต้องการสร้างไฟล์ tpl เพื่อสร้างธีมหรือไม่?
ninjascorner

ขอบคุณสำหรับคำตอบนี้ ฉันรู้วิธีการทำสิ่งนี้ในองค์ประกอบเดียว แต่ฉันไม่ได้แยกคำต่อท้ายและคำนำหน้า น่าสนใจ ฉันรู้สึกยุ่ง แต่ฉันไม่สามารถพูดได้ว่าทำไมฉันจึงไม่มีปัญหาจริงๆ
Justin

@ninjascorner ขออภัยในความล่าช้าฉันไม่พบบันทึกที่ฉันมีในหัวข้อนี้ นอกจากนี้ฉันยังคิดว่าวิธีที่เป็นไปได้น้อยกว่าความสวยงามกว่าคำตอบอื่น ๆ ที่ใช้งานได้ในชุดรูปแบบหรือโมดูลที่ใช้ชุดรูปแบบตะขอtheme_render_example_add_div ดูapi.drupal.org/api/examples/ … )
stefgosselin

สิ่งนี้จะดีก็ต่อเมื่อคุณแน่ใจอย่างยิ่งว่าองค์ประกอบทั้งสองจะแสดงผลเสมอ มันง่ายที่จะลงเอยด้วย <div> ที่ไม่มีการแบ่งแยกเมื่อแยกเช่นนี้
kufeiko

2

คุณยังสามารถสร้างชุดรูปแบบสำหรับสิ่งนี้

$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'),
);

และในเบ็ดธีมของคุณ:

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

และในฟังก์ชั่นชุดรูปแบบ:

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;
}

ฉันใช้สิ่งนี้ใน Drupal 6 ฉันไม่แน่ใจว่าทำงานได้ใน D7 แต่ฉันหวังเช่นนั้น


ใช่ฉันคิดว่าวิธีนี้หลังจากโพสต์ (ดีฉันคัดลอกโมดูลตัวอย่าง) มันใช้งานได้ดี แต่ฉันไม่คิดว่ามันเป็นวิธีที่ดีที่สุดเพราะ (ถ้าฉันเข้าใจถูกต้อง) คุณต้องใส่ชื่อคลาสของคุณลงในฟังก์ชั่นลดการใช้ซ้ำได้
Justin
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.