प्रपत्र तत्व के div आवरण पर वर्ग बदलें

Question

वहाँ एक फार्म आवरण (div) के रूप में एक वर्ग जोड़ने या बदलने के लिए एक तरीका है?

या यह सिर्फ थीम फ़ंक्शन के साथ किया जाता है?

यदि ऐसा है तो उसे बदलने के लिए किस थीम फ़ंक्शन का उपयोग किया जाता है?

Comments

मुझे पूरा यकीन है कि यह एक थीम फंक्शन है। किस थीम का उपयोग करना है यह प्रश्न है। :)

— अकलता

आह तुम वहीं हो।

— १.१५ बजे १.११ बजे क्रिसलीज

मुझे लगता है कि आप एक वर्ग को परिभाषित करने के लिए #attribute कुंजी का उपयोग भी कर सकते हैं

— Mika A.

@ मिका ए। यह केवल लागू होता है <इनपुट> टैग मैं आवरण के वर्ग (एक <div>) को बदलना चाहता हूं।

— चिरजाली

Answer 1

theme_form_element()यदि आप थीमिंग को विश्व स्तर पर बदलना चाहते हैं तो आप सामान्य रूप से ओवरराइड कर सकते हैं । यदि आप केवल एक विशिष्ट रूप तत्व को संशोधित करने में रुचि रखते हैं तो मुझे कुछ विकल्पों की जानकारी है।

1. आप जिस विशेष प्रकार के फार्म तत्व में रुचि रखते हैं (जैसे। टेक्स्टफील्ड) के लिए एक नया थीम फ़ंक्शन पंजीकृत कर सकते हैं। फिर आप इस थीम फ़ंक्शन (मूल, उदाहरण के आधार पर theme_textfield()) बनाते हैं, लेकिन वह theme('form_element', ...)अंत में कॉल नहीं करता है (आप या तो एक थीम फ़ंक्शन में आवरण और तत्व दोनों को संभाल सकते हैं, या आप एक अलग आवरण थीम फ़ंक्शन बना सकते हैं। और उस का उपयोग करें)। अंत में आप #themeएक विशेष रूप तत्व में एक संपत्ति जोड़ते हैं, और वह तत्व आपके कस्टम थीम को प्राप्त करेगा।

2. आप एक टेम्प्लेट फ़ाइल बना सकते हैं, form_element.tpl.phpजिसमें बस डिफ़ॉल्ट व्यवहार है theme_form_element()और फिर hook_preprocess_form_element()एक टेम्पलेट सुझाव जोड़ने के लिए उपयोग करें। फिर आप सुझाव से मेल खाने वाले नए टेम्पलेट को बनाते हैं। आपने अक्सर लोगों का उल्लेख करते हुए सुना है कि फ़ंक्शंस की तुलना में टेम्प्लेट थोड़े धीमे होते हैं, और इस तरह के अक्सर उपयोग किए जाने वाले थीम कॉल के लिए मैं एक टेम्प्लेट का उपयोग करके लोगों को गंजा होने की कल्पना कर सकता हूं। हालांकि मैंने इसके लिए कभी कोई माप नहीं किया है। इसके अलावा, आपको सुझाव देने में सक्षम होने के लिए प्रीप्रोसेस स्टेज पर पर्याप्त संदर्भ होना चाहिए।

Comments

क्या आप एक उदाहरण प्रदान कर सकते हैं?

— chrisjlee

@ क्रिस जे। क्या आप सभी तत्वों पर रैपर बदलना चाहते हैं, या सिर्फ एक विशेष?

— एंडी

बस एक ही।

— chrisjlee

@chrisjlee मैंने उत्तर अपडेट कर दिया है।

— एंडी

Answer 2

मुझे पता है कि यह एक सुपर पुराना धागा है, लेकिन मैं सीख रहा हूं कि फार्म तत्वों को कैसे बदलना है और कक्षाएं जोड़ना है। मुझे एक कस्टम मॉड्यूल बनाने के लिए मिला:

function yourtheme_custom_form_alter(&$form, &$form_state, $form_id) {
 case'webform_number_whatever':
   _yourtheme_form_add_wrapper($form['submitted']['yourfieldhere'], array('form-field-some-style', 'not-label', 'whatever-other-styles-you-want'));
 break;
}

function _yourtheme_form_add_wrapper(&$element, $classes = array(), $type = array('form-item', 'form-type-textfield'), $removeTitle = FALSE){
  $element['#prefix'] = '<div class="' . implode(" ", $classes) . '"><div class="' . implode(" ", $type) . '">';
  $element['#suffix'] = '</div></div>';
}

Comments

यह एक अच्छा वैकल्पिक उपाय है - रैपिंग डिव में एक वर्ग न जोड़ें, केवल रैपिंग डिव को अपने स्वयं के डिव में लपेटें और वे आप जो भी कक्षाएं चाहें लागू कर सकते हैं।

— फेलिक्स ईव

Answer 3

"आवरण" को बदलने के लिए आपको form_element को ओवरराइड करना होगा। मूल रूप से सभी फॉर्म तत्व फॉर्म_लेमेंट थीम theme_form_element($element,$value);(form.inc फ़ाइल) के साथ प्रदान किए जाते हैं

तो यह बदलने के लिए कि यह आपके फ़ॉर्म तत्वों को कैसे प्रस्तुत करता है, आप बस उस फ़ंक्शन को अपने टेम्पलेट में कॉपी कर सकते हैं। फ़ोल्डर को इसका नाम दें और उसका नाम बदलें: phptemplate_form_element($element,$value)

अब आप कोई भी परिवर्तन कर सकते हैं और मूल फ़ंक्शन के बजाय उनका उपयोग किया जाएगा

1. theme_form_element($element,$value);Form.inc से कॉपी करें
2. इसे (अपने विषय) टेम्पलेट में पेस्ट करें
3. इसका नाम बदलें: phptemplate_form_element($element,$value)
4. सभी विषय कैश को साफ़ करें
5. आप जो भी बदलाव चाहते हैं, वे करें और उनका उपयोग किया जाएगा।

Answer 4

आप संपत्ति में रैपर_एट्यूएंट्स का उपयोग कर सकते हैं।

$form['example'] = [
  '#type' => 'textfield',
  '#title' => $this->t('Example'),
  '#wrapper_attributes' => ['class' => ['wrapper-class']],
];

Comments

इस उत्तर ने मेरी मदद की, लेकिन ध्यान दें कि यह विशेष रूप से Drupal 8.x और बाद में लागू होता है।

— विल मार्टिन

Answer 5

महत्वपूर्ण रूप से, theme_form_element केवल प्रत्यक्ष अभिभावक आवरण div को संशोधित करेगा और यह CSS प्रभावों के लिए लक्षित लक्ष्य नहीं हो सकता है।

[हालांकि प्रोग्रामेटिक नहीं है, अगर कोई बस एक नोड क्षेत्र के शीर्ष-आवरण के लिए एक वर्ग को लागू करना चाहता है (यह आवरण, आवरण, आवरण) है तो क्या मैं मान सकता हूं कि किसी विशेष सामग्री प्रकार के लिए "फ़ील्ड प्रबंधित करें" का चयन करके "फ़ील्ड समूह" मॉड्यूल का उपयोग करें और एक साधारण DIV के रूप में "नया समूह जोड़ें" चुनें। फिर लेबल को हटा दिया जा सकता है और वांछित वर्गों को अतिरिक्त आवरण को सौंपा जा सकता है (लेकिन अब हमारे पास और भी आवरण हैं) - असीमित घोंसले के शिकार के साथ]

Answer 6

आप उपयोग कर सकते हैं

'#prefix' => '<div class="new_class">', '#suffix' => '</div>'

और यह इसे चारों ओर लपेट देगा

Answer 7

आवरण विशेषताओं को विन्यास योग्य बनाएं!

अपने विषय में अपने स्वयं के तत्व-तत्व थीम फ़ंक्शन बनाएं ... sites/all/themes/MY_THEME/theme/form-element.theme.inc

function my_theme_form_element($variables) {
  $element = &$variables['element'];

  $attributes = isset($element['#my_theme_wrapper_attributes']) ?
    $element['#my_theme_wrapper_attributes'] : array();

  ...

  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";

  ...
}

फिर आप इस तरह से सामान कर सकते हैं ...

function my_module_form_alter(&$form, &$form_state, $form_id) {
  $form['account']['mail']['#my_theme_wrapper_attributes']['class'][] = 'form-field--inline';
}

Answer 8

ऐसे मामले आते हैं जिनमें न तो वांछित परिणाम मिलते हैं #prefix/#suffixऔर न ही #attributes => array('class')। मेरा विशेष मामला ajax-wrapper div में एक प्रबंधित_फाइल तत्व के चारों ओर एक वर्ग जोड़ रहा है। #prefix/#suffixएक नया कंटेनर बनाता है और #attributes/'class'एक आंतरिक तत्व के वर्ग को संशोधित करता है, न कि सबसे बाहरी।

सामान्य बाहरी div सिर्फ है

<div id="edit-doc1--XX-ajax-wrapper">

जो सीएसएस में लक्षित करना मुश्किल है। मैं लक्ष्य [id^="edit-doc"]या [id$="-ajax-wrapper"]इन दोनों को लक्षित कर सकता हूं , केवल उन तत्वों से अधिक जो मैं चाहता था।

मैं जिस समाधान के साथ आया था वह #processतत्व को फॉर्म में जोड़ना है और तत्व के कोड को मैन्युअल रूप से जोड़ना है । यहाँ #processफॉर्म आइटम की घोषणा में जोड़ा गया गुण है:

$form['doc1'] = array(
  '#type' => 'managed_file',
  '#process' => array('mymodule_managed_file_process'),
);

और यहाँ mymodule_managed_file_process()समारोह है:

function mymodule_managed_file_process($element, &$form_state, $form) {

  // Call the original function to perform its processing.
  $element = file_managed_file_process($element, $form_state, $form);

  // Add our own class for theming.
  $element['#prefix'] = str_replace(
    'id=',
    'class="managed-file-wrapper" id=',
    $element['#prefix']
  );

  return $element;
}

स्ट्रिंग प्रतिस्थापन पर भरोसा बहुत पोर्टेबल नहीं है, इसलिए str_replaceअपने जोखिम पर उपयोग करें। हालाँकि, यह कोड वास्तव में आवश्यक वर्ग को जोड़ने के लिए सबसे बाहरी DIV को बदल देता है:

<div class="managed-file-wrapper" id="edit-doc1--XX-ajax-wrapper">

Answer 9

<?php
    $form['#attributes'] = array('class' => 'your-class-name');
?> 

आप फार्म तत्व पर एक वर्ग जोड़ने के लिए उपरोक्त तरीके का उपयोग कर सकते हैं।

Comments

फिर आप div के वर्ग को कैसे संशोधित करेंगे? उपरोक्त कोड <इनपुट /> टैग के वर्ग को बदलता है।

— चिरजाली

यहां पूछे गए विशिष्ट प्रश्न के लिए यह उत्तर गलत है।

— डबलजॉश