web-gelistirme-sc.com

Formları kalıcı bir pencerede göster

Bir form var ve ben kullanıyorum Drupal 7. Bir kullanıcı bir bağlantıyı tıkladığında bu formu bir pop-up göstermek gerekir.Kullanıcı daha sonra pop iken formu doldurmak gerekir Colorbox ya da modals ya da herhangi bir şey kullanabilirim.Drupal için hangisinin daha iyi bir seçenek olduğunu ve hangi seçeneklerin olduğunu bilmek istedim.

21
Hacker

Şu anda bildiğim 2 iyi seçenek var: iframe (örneğin renk kutusunda) ve CTools. Hangi seçeneğin kullanılacağı koşullara bağlıdır. CTools modal.html dosyasında bulduğum bu bilgilerin temel farkı ortaya çıkardığını tahmin ediyorum:

CTools, form yerleştirmek için açılır pencere olarak kullanılabilecek basit bir yöntem sağlar. İşini bir iframe yoluyla yapmaması nedeniyle normal modal çerçevelerden farklıdır. Bu hem bir avantaj hem de dezavantajdır. İframe bir alt tarayıcıda normal sayfaları oluşturur ve işlerini yapabilirler. Bu, rasgele sayfalar ve formlar kipine yerleştirmeyi çok daha kolay hale getirir. Bununla birlikte, iframe, değişiklikleri ana sayfaya iletme konusunda çok iyi değildir, bu nedenle modal'ı açamaz, biraz çalışmasını sağlayamaz ve sonra sayfayı değiştiremezsiniz.

Bu konuda CTools ile hiçbir kişisel deneyimim yok, bu yüzden başka bir şey ekleyemiyorum, ancak birkaç projede iframe yöntemini uyguladım. En sonuncusunda Colorbox eklentisini bir açılır pencerede Webform modülüyle oluşturulan birkaç formu göstermek için kullandım. Biraz ilgi olması durumunda buraya örnek bir kod ekleyeceğim.

Forma bağlantı:

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

Bağlantılı adresi bir açılır pencerede açmak için Javascript kodu:

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

Tema şablonu dosyasında:

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

Javascript kullanan kullanıcıların normal şablonu içeren formu görebilmesi için javascript kullanan bağlantılara 'colorbox = true' ekledim. İframe şablonunda yalnızca iletiler, başlık ve içerik yazdırılır.

Bu zaten çalışıyor, ancak Webforms ile ilgili bir sorunla karşılaştım: form gönderildiğinde 'colorbox = true' korunmadı. Düzeltme girişimim:

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

Bir kullanıcı bir bağlantıyı tıklattığında modun içine form ekleyebilen CTools kullanın.

Lütfen aşağıdaki öğreticiyi kontrol edin: CTools ve Drupal 7 ile açılır bir modda bir form ekleyin; bu işlem birkaç adımda basitleştirilir.

Temel olarak modal formunuz için hook_menu() geri aramanızı tanımlamanız gerekir:

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

ardından HTML kodunu döndüren bir bağlantı oluşturucu oluşturun:

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

sayfanızın geri aramasında kullanılabilir, örneğin:

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

Kullanıcı bağlantıyı tıkladığında, /mymodule/ajax veya /mymodule/nojs (nojs olması durumunda), bu nedenle aşağıdaki geri arama bir mod oluşturmayı işler:

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

Şimdi sadece bir form ve onun gönderen işleyicisini aşağıdaki gibi oluşturmanız gerekir:

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

Bunu test etmek için şu adrese gidin: /mymodule/page tıklandığında size modal formu göstermesi gereken 'Büyülü Modal' bağlantısını görmelisiniz.

8
kenorb

Colorbox yerine Modal form 'a bakmaya başladım. Formlarla birlikte Colorbox kullanmak gerçekten kötü çalıştığı için özellikle var.

Kalıcı biçimde, Ctools , yalnızca Colorbox'a ait olmayan form işleme için uygun desteği olan arka planda tüm işleri yapar. Bu ayrıca, desteklenmeyen bir formun "modlandırılması" gerektiğinde, Ctools sayesinde bunun yerine geçebileceğiniz katı bir API olduğunu her zaman bildiğiniz anlamına gelir.

Bir düzeltme ekini yazarsanız yeni form desteğiyle dosyalamak için bonus puanlar. ;)

6
Letharion

Basit İletişim Kutus , Modals'da formlar sağlamanın harika bir yolu olduğunu düşünüyorum. Çekirdekte jQuery UI kullanma avantajına sahiptir.

Tek yapmanız gereken bazı ek bilgiler içeren forma bağlantı sağlamaktır. Sınıflara ve rel etiketlerine dayalı basit bir yöntem veya daha hassas ayar için bir tema yöntemi sağlar. Bunu iki şekilde yaptım:

  1. Gerekli rel ve class etiketlerini sağlamak için Menu Attributes modülü.
  2. theme_menu_link menü bağlantısı oluşturma işlevlerini geçersiz kılmak için.
2
Queenvictoria

İhtiyacınız olan modül https://drupal.org/project/popup_forms , ancak uygulamak için biraz programlama yapmanız gerekiyor (yani, yalnızca yönetici arayüzü ile yapılandırılamaz).

2
Code Your Dream