it-swarm.asia

إظهار النماذج في نافذة مشروطة

لدي نموذج وأستخدمه Drupal 7. أحتاج إلى عرض هذا النموذج في نافذة منبثقة عندما ينقر المستخدم على رابط. يجب أن يكون المستخدم قادرًا بعد ذلك على إكمال النموذج أثناء وجوده في البوب في الأعلى ، يمكنني استخدام أي شيء مثل Colorbox أو مشروط أو أي شيء. أردت فقط أن أعرف ما هو الخيار الأفضل وما هي الخيارات المتوفرة لدي لدروبال.

21
Hacker

هناك خياران جيدان أعرفهما حاليًا: iframe (في colorbox على سبيل المثال) و CTools. يعتمد الخيار الذي يجب استخدامه على الظروف. أعتقد أن هذه المعلومات التي وجدتها في ملف CTools modal.html تبرز الاختلاف الرئيسي:

يوفر CTools شكلاً بسيطًا يمكن استخدامه كنافذة منبثقة لوضع النماذج. وهو يختلف عن الأطر المشروطة العادية في أنه لا يقوم بعمله عبر iframe. هذه ميزة وعيوب على حد سواء. يجعل iframe ببساطة الصفحات العادية في متصفح فرعي ويمكنهم القيام بعملهم. هذا يجعل من الأسهل بكثير وضع صفحات وأشكال عشوائية في مشروط. ومع ذلك ، فإن إطار iframe ليس جيدًا جدًا في توصيل التغييرات إلى الصفحة الرئيسية فعليًا ، لذلك لا يمكنك فتح النموذج ، والقيام ببعض الأعمال ، ثم تعديل الصفحة.

ليس لدي خبرة شخصية مع CTools في هذا الموضوع لذا لا يمكنني إضافة أي شيء آخر إلى ذلك ، لكنني طبقت طريقة iframe في بضعة مشاريع. في أحدثها ، استخدمت المكون الإضافي Colorbox لعرض بعض النماذج التي تم إنشاؤها باستخدام الوحدة Webform في نافذة منبثقة. سأضيف بعض الأمثلة البرمجية هنا في حالة وجود بعض الاهتمام.

رابط النموذج:

<a class="colorbox_form" href="'.url('node/5').'">'.t('Send message').'</a>

كود جافا سكريبت لفتح العنوان المرتبط في نافذة منبثقة:

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

في ملف قالب السمة:

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

أرفقت "colorbox = true" بالروابط التي تستخدم جافا سكريبت حتى يتمكن المستخدمون الذين تم إيقاف تشغيل جافا سكريبت من رؤية النموذج مع القالب العادي. يحتوي قالب iframe على رسائل وعناوين ومحتويات مطبوعة فقط.

هذا يعمل بالفعل ، ولكن واجهت مشكلة في نماذج الويب: لم يتم الاحتفاظ بـ 'colorbox = true' عند إرسال النموذج. محاولتي لإصلاحها:

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');
  }
}
10
Madis

استخدم CTools والتي يمكنها إدراج نموذج في مشروط عندما ينقر المستخدم فوق ارتباط.

يرجى التحقق من البرنامج التعليمي التالي: أدخل نموذجًا في مشروط منبثق باستخدام CTools و Drupal 7 مما يبسط هذه العملية في بضع خطوات.

تحتاج بشكل أساسي إلى تحديد رد الاتصال الخاص بك hook_menu() لنموذجك المشروط:

$items['mymodule/%ctools_js'] = array(
  'page callback' => 'mymodule_callback',
  'page arguments' => array(1),
  'access callback' => TRUE,
  'type' => MENU_CALLBACK,
);

ثم قم بإنشاء مولد ارتباط يعرض رمز 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>';
}

بحيث يمكن استخدامه في رد الاتصال بصفحتك ، على سبيل المثال:

/**
 * 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');
}

عندما ينقر المستخدم على الرابط ، فإنه يطلب إما /mymodule/ajax أو /mymodule/nojs (في حالة nojs) ، لذا فإن رد الاتصال التالي يعالج إنشاء مشروط:

/**
 * 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');
  }
} 

تحتاج الآن فقط إلى إنشاء نموذج ومعالج الإرسال الخاص به على النحو التالي:

/**
 * 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);
}

لاختبار ذلك ، انتقل إلى: /mymodule/page حيث يجب أن تشاهد رابط "Magical Modal" الذي يجب أن يعرض لك النموذج المشروط بمجرد النقر عليه.

8
kenorb

سأبدأ في النظر إلى نموذج مشروط ، بدلاً من Colorbox. إنه موجود على وجه التحديد لأن استخدام Colorbox مع النماذج يعمل بشكل سيء حقًا.

في شكل مشروط ، Ctools يقوم بكل العمل في الخلفية ، والذي يحتوي على دعم مناسب للتعامل مع النموذج الذي لا ينتمي إلى Colorbox. هذا يعني أيضًا أنه إذا كنت بحاجة إلى "تعديل" نموذج غير مدعوم ، فأنت تعلم دائمًا أنه بفضل Ctools ، هناك واجهة برمجة تطبيقات قوية وراءها يمكنك التبديل إليها بدلاً من ذلك.

نقاط إضافية لإيداع التصحيح مع دعم نموذج جديد إذا كتبته. ؛)

6
Letharion

أجد أن مربع حوار بسيط طريقة رائعة لتوفير النماذج في Modals. لديها ميزة استخدام jQuery UI وهو في الأساس.

كل ما عليك فعله هو توفير رابط للنموذج مع بعض المعلومات الإضافية. يوفر طريقة بسيطة تعتمد على الفئات وعلامات rel ، أو طريقة سمة لمزيد من التحكم الدقيق. لقد فعلت ذلك بطريقتين:

  1. سمات القائمة الوحدة النمطية لتوفير علامات rel و class المطلوبة.
  2. theme_menu_link لتجاوز وظائف عرض ارتباط القائمة.
2
Queenvictoria

الوحدة التي تحتاجها هي https://drupal.org/project/popup_forms ، ولكن عليك القيام ببعض البرمجة لتطبيقها (أي لا يمكن تكوينها فقط عبر واجهة المشرف).

2
Code Your Dream