Tôi có một biểu mẫu và tôi đang sử dụng Drupal 7. Tôi cần hiển thị biểu mẫu này trong cửa sổ bật lên khi người dùng nhấp vào liên kết. Sau đó, người dùng sẽ có thể hoàn thành biểu mẫu trong khi trong cửa sổ bật lên. Tôi có thể sử dụng bất cứ thứ gì như Colorbox hoặc modals hoặc bất cứ thứ gì. Tôi chỉ muốn biết đâu là lựa chọn tốt hơn và tôi có những lựa chọn nào cho Drupal.
Câu trả lời:
Hiện tại có 2 tùy chọn tốt mà tôi biết: iframe (ví dụ trong hộp màu) và CTools. Lựa chọn nào để sử dụng tùy thuộc vào hoàn cảnh. Tôi đoán thông tin này tôi tìm thấy trong tệp CTools modal.html mang đến sự khác biệt chính:
CTools cung cấp một phương thức đơn giản có thể được sử dụng như một cửa sổ bật lên để đặt các biểu mẫu. Nó khác với các khung phương thức thông thường ở chỗ nó không thực hiện công việc của mình thông qua iframe. Đây là cả một lợi thế và bất lợi. Khung nội tuyến chỉ đơn giản hiển thị các trang bình thường trong trình duyệt phụ và họ có thể thực hiện việc của mình. Điều đó làm cho việc đặt các trang và biểu mẫu tùy ý dễ dàng hơn nhiều. Tuy nhiên, iframe không thực sự tốt trong việc truyền đạt các thay đổi đến trang chính, vì vậy bạn không thể mở phương thức, để nó thực hiện một số công việc và sau đó sửa đổi trang.
Tôi không có kinh nghiệm cá nhân với CTools về chủ đề này vì vậy tôi không thể thêm bất cứ điều gì khác vào đó, nhưng tôi đã triển khai phương pháp iframe trong một vài dự án. Trong lần gần đây nhất, tôi đã sử dụng plugin Colorbox để hiển thị một vài biểu mẫu được tạo bằng mô-đun Webform trong cửa sổ bật lên. Tôi sẽ thêm một số mã ví dụ ở đây trong trường hợp có một số quan tâm.
Liên kết đến mẫu:
<a class="colorbox_form" href="'.url('node/5').'">'.t('Send message').'</a>Mã Javascript để mở địa chỉ được liên kết trong cửa sổ bật lên:
if ($('a.colorbox_form').length > 0) {
var link = $("a.colorbox_form").attr('href');
link = link.concat('?colorbox=true');
// colorbox=true is attached for later use (read below).
$("a.colorbox_form").attr('href', link);
$("a.colorbox_form").colorbox({iframe:true, width:500, height:450});
}Trong tệp mẫu chủ đề:
function mytheme_preprocess_page(&$variables) {
// Different template and additional stylsheet for colorbox content.
if (isset($_GET['colorbox']) && $_GET['colorbox'] == TRUE) {
$variables['theme_hook_suggestions'] = array('page__iframe'); // page--iframe.tpl.php
drupal_add_css(path_to_theme() .'/iframe.css');
$variables['styles'] = drupal_get_css();
}
}Tôi đã đính kèm 'colorbox = true' vào các liên kết bằng cách sử dụng javascript để người dùng tắt javascript sẽ nhìn thấy biểu mẫu với mẫu bình thường. Mẫu iframe chỉ có thông điệp, tiêu đề và nội dung được in.
Điều này đã hoạt động, nhưng tôi gặp phải một vấn đề với Webforms: 'colorbox = true' không được bảo tồn khi biểu mẫu được gửi. Tôi cố gắng sửa nó:
function mymodule_form_alter(&$form, &$form_state, $form_id) {
if (isset($_GET['colorbox']) && $_GET['colorbox'] == TRUE) {
// The id-s of the forms that are possibly shown within a popup.
$form_ids = array('webform_client_form_2', 'webform_client_form_4');
if (in_array($form_id, $form_ids)) {
$form['#submit'][] = 'mymodule_webform_submit';
}
}
}
function mymodule_webform_submit(&$form, &$form_state) {
//drupal_set_message('<pre>'.var_export($form_state['redirect'], TRUE).'</pre>');
if (!isset($form_state['redirect'])) {
$form_state['redirect'] = array($_GET['q'], array('query' => array('colorbox' => 'true')));
}
else {
$form_state['redirect'][1]['query'] = array('colorbox' => 'true');
}
}Sử dụng CTools có thể chèn một biểu mẫu vào một phương thức khi người dùng nhấp vào một liên kết.
Vui lòng kiểm tra hướng dẫn sau: Chèn một biểu mẫu vào một phương thức bật lên với CTools và Drupal 7 để đơn giản hóa quy trình này trong vài bước.
Về cơ bản, bạn cần xác định hook_menu()cuộc gọi lại cho hình thức phương thức của mình:
$items['mymodule/%ctools_js'] = array(
'page callback' => 'mymodule_callback',
'page arguments' => array(1),
'access callback' => TRUE,
'type' => MENU_CALLBACK,
);sau đó tạo một trình tạo liên kết trả về mã HTML:
/**
* Helper function to make a link.
*/
function _mymodule_make_link($link_text = '') {
// Set a default value if no text in supplied.
if (empty($link_text)) {
$link_text = 'Magical Modal';
}
return '<div id="magical-modal-link">' . l($link_text, 'mymodule/nojs', array('attributes' => array('class' => 'ctools-use-modal'))) . '</div>';
}vì vậy nó có thể được sử dụng trong cuộc gọi lại trang của bạn, vd:
/**
* An example page.
*/
function mymodule_page() {
// Load the modal library and add the modal javascript.
ctools_include('modal');
ctools_modal_add_js();
return _mymodule_make_link('Magical modal');
}Khi người dùng nhấp vào liên kết, nó sẽ yêu cầu /mymodule/ajaxhoặc /mymodule/nojs(trong trường hợp nojs), do đó, hàm gọi lại sau đây sẽ tạo ra một phương thức:
/**
* Ajax menu callback.
*/
function mymodule_callback($ajax) {
if ($ajax) {
ctools_include('ajax');
ctools_include('modal');
$form_state = array(
'ajax' => TRUE,
'title' => t('MyModule Modal Form'),
);
// Use ctools to generate ajax instructions for the browser to create
// a form in a modal popup.
$output = ctools_modal_form_wrapper('mymodule_form', $form_state);
// If the form has been submitted, there may be additional instructions
// such as dismissing the modal popup.
if (!empty($form_state['ajax_commands'])) {
$output = $form_state['ajax_commands'];
}
// Return the ajax instructions to the browser via ajax_render().
print ajax_render($output);
drupal_exit();
}
else {
return drupal_get_form('mymodule_form');
}
} Bây giờ bạn chỉ cần tạo một biểu mẫu và trình xử lý trình của nó như dưới đây:
/**
* Drupal form to be put in a modal.
*/
function mymodule_form($form, $form_state) {
$form = array();
$form['new_link_text'] = array(
'#type' => 'textfield',
'#title' => t('Link text'),
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Submit'),
);
return $form;
}
/**
* Drupal form submit handler.
*/
function mymodule_form_submit(&$form, &$form_state) {
// Generate the new link using the submitted text value.
$link = _mymodule_make_link($form_state['values']['new_link_text']);
// Tell the browser to close the modal.
$form_state['ajax_commands'][] = ctools_modal_command_dismiss();
// Tell the browser to replace the old link with the new one.
$form_state['ajax_commands'][] = ajax_command_replace('#magical-modal-link', $link);
}Để kiểm tra điều đó, hãy đi tới: /mymodule/pagenơi bạn sẽ thấy liên kết 'Phương thức huyền diệu' sẽ hiển thị cho bạn hình thức phương thức sau khi nhấp vào.
Tôi sẽ bắt đầu nhìn vào dạng Modal , thay vì Colorbox. Nó đặc biệt tồn tại bởi vì sử dụng Colorbox với các hình thức hoạt động thực sự xấu.
Ở dạng phương thức, Ctools thực hiện tất cả các công việc ở chế độ nền, có hỗ trợ phù hợp để xử lý biểu mẫu không thuộc về Colorbox. Điều đó cũng có nghĩa là nếu bạn cần "sửa đổi" một hình thức không được hỗ trợ thì bạn luôn biết rằng nhờ vào Ctools, có một API vững chắc đằng sau nó mà bạn có thể chuyển sang thay thế.
Điểm thưởng cho việc nộp một bản vá với sự hỗ trợ mẫu mới nếu bạn viết nó. ;)
Tôi thấy rằng Hộp thoại Đơn giản là một cách tuyệt vời để cung cấp các biểu mẫu trong Phương thức. Nó có lợi thế là sử dụng jQuery UI trong lõi.
Tất cả bạn cần làm là cung cấp một liên kết đến biểu mẫu với một số thông tin bổ sung. Nó cung cấp một phương thức đơn giản dựa trên các lớp và thẻ rel hoặc phương thức chủ đề để kiểm soát tốt hơn. Tôi đã làm điều này theo hai cách:
Mô-đun bạn cần là https://drupal.org/project/popup_forms , nhưng bạn cần thực hiện một số chương trình để áp dụng nó (tức là không thể chỉ định cấu hình qua giao diện quản trị).