JQUERY Compatibility code (function ($) { // ... Your code here ...
. }(jQuery)); Execute code when DOM is loaded $(function() { // ... Your code here ... }); [Link] <?php drupal_add_js(array( 'my_module' => array('color' => 'green')), 'setting' ); ?> $('#id') .css({'color': [Link].my_module.color}); [Link] [Link] = { attach: function (context, settings) { $('#id', context) .once('mybehavior', function () { // ... Your code here ... }); } }; [Link](str) str! return ! String to be sanitised. Sanitised string
PHP drupal_add_js($data = NULL, $options = NULL) $data! le! inline! external! setting! $options! type! scope! group! every_page! weight! defer! cache! preprocess! Depending on option 'type': Relative path to le Javascript code Absolute path to le Array of settings Type or array of options: le, inline, external, setting header, footer Group: JS_LIBRARY, JS_DEFAULT, JS_THEME TRUE = Load on all pages. Sort order <script> defer attribute. TRUE = Cache this Javascript. JS aggregation enabled.
[Link](count, singular, plural, args) count! Number to be included in string. singular! Singular string plural! Plural string args! Replacement arguments. See Drupal.t() return! Translated string. [Link](count, 'One string', '@count strings'); [Link] [Link] = function (str) { return '<em class="placeholder">' + [Link](str) + '</em>'; }; [Link](func, args) func! Theme function. args! Arguments for theme function. return! HTML output. [Link]('placeholder', 'Hello!'); [Link](context, settings) context! settings! Context for the attach() method. Default: 'document' Settings for the attach() method. Default: [Link]
drupal_add_js('misc/[Link]'); drupal_add_js(array('myModule' => array ('my_setting' => 'my value')), 'setting'); drupal_add_js( 'jQuery(document).ready( function () { alert("Hello!"); });', array('type' => 'inline', 'scope' => 'footer', 'weight' => 5, ), ); drupal_add_js('[Link] 'external'); hook_js_alter(&$javascript) $javascript! Array of JavaScript (les) to be added to the page.
Drupal.t(str, args) str! String to be translated. args! Replacement arguments. !arg! Unchanged @arg! Sanitized %arg! Sanitized + em tag return! Translated string. Drupal.t('@lang string', {'@lang': language});
August 2011!
Drupal 7 jQuery !
[Link]/drupal/cheat-sheets
STATES #states <state>! State to be applied when conditions are met. See drupal_process_states(). For all form element types: enabled, disabled, required. optional, visible, invisible, checked, unchecked, expanded, collapsed. For some form element types: relevant, irrelevant, valid, invalid, touched, untouched, readwrite, readonly. '#states' => array( // Show the form element if 'bar' has been selected for 'foo'. 'visible' => array( ':input[name="foo"]' => array('value' => 'bar'), ), ), AJAX #ajax callback! effect! event! keypress! method! path! prevent! progress! trigger_as! wrapper! Callback function which can return HTML, renderable array, or array of AJAX Commands. Effect used when adding content none, fade, slide Event at which the HTTP request occurs. Optional. TRUE: Event is triggered when Enter key is pressed. Manipulation method of the 'wrapper' content. replace, after, append, before, prepend. Callback path. Default: system/ajax Event(s) that should not trigger the ajax call. Progress bar settings: 'type', 'message', 'url', 'interval'. Form element to handle the event trigger. Id attribute of DOM element to be replaced by callback. (no '#')
'#weight' => 1, '#submit' => array('poll_more_choices_submit'), '#ajax' => array( 'callback' => 'poll_choice_js', 'wrapper' => 'poll-choices', 'method' => 'replace', 'effect' => 'fade', ), ); ... } function poll_choice_js($form, $form_state) { return $form['choice_wrapper']['choice']; } [Link]() $.ajax({ url: [Link] + 'jquery_demo/ajax/' + string, success: function(data) { alert([Link]); } error: function (xmlhttp) { alert([Link](xmlhttp, [Link])); } }); DRUPAL JS LIBRARIES drupal_add_library($module, $name, $every_page = NULL) $module! $name! $every_page! return! Module that registered a library. Library name. TRUE: add to every page. TRUE on succes. jQuery UI Effects libraries: effects, [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link]. Other libraries: once, form, jquery-bbq, vertical-tabs, cookie. hook_library() $libraries['[Link]'] = array( 'title' => 'jQuery UI: Tabs', 'website' => '[Link] 'version' => '1.8.7', 'js' => array( 'misc/ui/[Link]' => array(), ), 'css' => array( 'misc/ui/[Link]' => array(), ), 'dependencies' => array( array('system', '[Link]'), ), ); DOCUMENTATION jQuery UI libraries: ui, [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link]. jQuery: [Link], [Link], [Link] Drupal jQuery: Javascript startup guide
Drupal system libraries: [Link], [Link], [Link], [Link], [Link], [Link], [Link], [Link]. jQuery libraries: jquery, [Link], [Link], [Link], [Link]-tabs, farbtastic, [Link].
function poll_form(&$node, $form_state) { ... $form['choice_wrapper']['poll_more'] = array( '#type' => 'submit', '#value' => t('More choices'), '#description' => t("Add more choices."),
August 2011!
Drupal 7 jQuery !
[Link]/drupal/cheat-sheets
