jQuery UI in Drupal 7              Darren Mothersele @mothersele             http://www.darrenmothersele.comIvan Sutherlan...
jQuery UI in Drupal 7• Using Javascript to improve UI• Javascript in Drupal 7• jQuery UI widgets• Building complex interac...
HTML + Javascript• HTML defines a set of standard form elements• Javascript allows us to build new interactive widgets• jQu...
Javascript widgets• Reduce errors in data entry• Quicker/more efficient• More engaging/fun• ...
Progressive Enhancement • Create widget using jQuery • Hide old widget • Fill in value in the background • Transparent to ...
Before Active Tags• Multiple tagging methodologies• Some people just expect to use spaces• http://drupal.org/node/91074• C...
Active Tags•   Action-delimited system•   Autocomplete•   Original widget hidden•   http://drupal.org/project/active_tags
Javascript in Drupal 7• Theme or Module?• Scope?• Module specific or reuseable?  (Javascript Library)• How and where to inc...
theme.infoname = My themedescription = Theme developed by me.core = 7.xengine = phptemplatescripts[] = my_script.js
drupal_add_js($data, $options) $data is either:  • path to Javascript file to include  • Javascript code to include ‘inline...
hook_preprocess_page()function mytheme_preprocess_page(&$vars, $hook) {    if (true) {        drupal_add_js(          drup...
hook_library()• Used in Core for jQuery UI• Use to include other third-party plugins• Define your own reusable Javascript
jQuery UI Buttons
Dialog Examplefunction dproj_form_user_login_block_alter(&$form, $form_state) {    drupal_add_library(system, ui.dialog); ...
id="edit-field-issue-type-und"$("#edit-field-issue-type-und").buttonset();
drupal_add_library()function dproj_form_issue_node_form_alter(&$form, $form_state,$form_id) {    $language = $form[#node]-...
https://github.com/padolsey/jQuery.fn.autoResize
hook_library()function dproj_library() {    $path = drupal_get_path(module, dproj);    return array(autoresize =>     arra...
id="edit-field-project-desc-und-0-value"$("#edit-field-project-desc-und-0-value").autoResize();
function dproj_form_project_node_form_alter(&$form,$form_state, $form_id) {    $language = $form[#node]->language;    $for...
Building a more  complex interaction• Drupal Behaviors• jQuery ui.draggable• jQuery ui.droppable• jQuery AJAX• Contrib mod...
Behaviors• Replacement for $(document).ready();• Use attach function:   (function ($) {     Drupal.behaviors.exampleModule...
Drag and DropDraggable                          Droppable               $.ajax()    Callback
.dproj-draggable              .dproj-droppable$(.dproj-draggable).draggable();$(.dproj-droppable).droppable();
path1 =      add-attendee/[uid]           path2 =            /[nid]     callback = path1 + path2callback = add-attendee/[u...
Callback argumentinserted into header
<span class=callback>  add-attendee/1</span>   <span class=callback>/20</span>callback = add-attendee/1/20
Drupal.behaviors.dprojdrag = {  attach: function (context, settings) {    $(.dproj-draggable, context).draggable({revert: ...
Resources•   jQuery UI                 •   Contrib Modules    http://jqueryui.com/    demos                         •   Vi...
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript
Prochain SlideShare
Chargement dans…5
×

jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript

17 180 vues

Publié le

These are the slides from my presentation at the London Drupal Drop In December 2011. I have posted more information to go along with these slides on my <a>Drupal blog</a>.

Publié dans : Technologie
1 commentaire
12 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
17 180
Sur SlideShare
0
Issues des intégrations
0
Intégrations
66
Actions
Partages
0
Téléchargements
89
Commentaires
1
J’aime
12
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

jQuery UI Widgets, Drag and Drop, Drupal 7 Javascript

  1. 1. jQuery UI in Drupal 7 Darren Mothersele @mothersele http://www.darrenmothersele.comIvan Sutherlands Sketchpad system is demonstrated on the console of the TX-2 at MIT (1963)
  2. 2. jQuery UI in Drupal 7• Using Javascript to improve UI• Javascript in Drupal 7• jQuery UI widgets• Building complex interactions
  3. 3. HTML + Javascript• HTML defines a set of standard form elements• Javascript allows us to build new interactive widgets• jQuery UI provides widgets, interactions and effects
  4. 4. Javascript widgets• Reduce errors in data entry• Quicker/more efficient• More engaging/fun• ...
  5. 5. Progressive Enhancement • Create widget using jQuery • Hide old widget • Fill in value in the background • Transparent to Drupal, nice and safe • Non-js friendly
  6. 6. Before Active Tags• Multiple tagging methodologies• Some people just expect to use spaces• http://drupal.org/node/91074• Character-delimited system
  7. 7. Active Tags• Action-delimited system• Autocomplete• Original widget hidden• http://drupal.org/project/active_tags
  8. 8. Javascript in Drupal 7• Theme or Module?• Scope?• Module specific or reuseable? (Javascript Library)• How and where to include code?
  9. 9. theme.infoname = My themedescription = Theme developed by me.core = 7.xengine = phptemplatescripts[] = my_script.js
  10. 10. drupal_add_js($data, $options) $data is either: • path to Javascript file to include • Javascript code to include ‘inline’ • absolute path to external JS code • array of settings for Javascript $options includes type, location, caching, ...
  11. 11. hook_preprocess_page()function mytheme_preprocess_page(&$vars, $hook) { if (true) { drupal_add_js( drupal_get_path(theme, mytheme) . /scriptname.js, theme); $vars[scripts] = drupal_get_js(); }}
  12. 12. hook_library()• Used in Core for jQuery UI• Use to include other third-party plugins• Define your own reusable Javascript
  13. 13. jQuery UI Buttons
  14. 14. Dialog Examplefunction dproj_form_user_login_block_alter(&$form, $form_state) { drupal_add_library(system, ui.dialog); $dialog_js = $("#block-user-login").dialog({title: "User login"});; $dialog_js = jQuery(document).ready(function () { (function ($) { . $dialog_js . }(jQuery)); });; drupal_add_js($dialog_js, array(type => inline, scope => footer, weight => 5));}
  15. 15. id="edit-field-issue-type-und"$("#edit-field-issue-type-und").buttonset();
  16. 16. drupal_add_library()function dproj_form_issue_node_form_alter(&$form, $form_state,$form_id) { $language = $form[#node]->language; $form[field_issue_type][$language][#after_build][] = _dproj_button_helper;}function _dproj_button_helper($element, &$form_state) { $button_js = $("#. $element[#id] .").buttonset();; $button_js = JS_PREFIX . $button_js . JS_SUFFIX; drupal_add_library(system, ui.button); drupal_add_js($button_js, array(type => inline, scope =>footer, weight => 5)); return $element;}
  17. 17. https://github.com/padolsey/jQuery.fn.autoResize
  18. 18. hook_library()function dproj_library() { $path = drupal_get_path(module, dproj); return array(autoresize => array( title => AutoResize, website => https://github.com/... version => 1.14, js => array( $path ./jquery.autoresize.js => array(), ), ));}
  19. 19. id="edit-field-project-desc-und-0-value"$("#edit-field-project-desc-und-0-value").autoResize();
  20. 20. function dproj_form_project_node_form_alter(&$form,$form_state, $form_id) { $language = $form[#node]->language; $form[field_project_desc][$language][#after_build][] = _dproj_autoresize_helper;}function _dproj_autoresize_helper($element, &$form_state) { $id = $element[0][value][#id] $autoresize_js = $("#. $id .").autoResize();; $autoresize_js = JS_PREFIX . $autoresize_js . JS_SUFFIX; drupal_add_library(dproj, autoresize); drupal_add_js($autoresize_js, array(type => inline, scope => footer, weight => 5)); return $element;}
  21. 21. Building a more complex interaction• Drupal Behaviors• jQuery ui.draggable• jQuery ui.droppable• jQuery AJAX• Contrib modules: Page manager (ctools), Rules, Relation
  22. 22. Behaviors• Replacement for $(document).ready();• Use attach function: (function ($) { Drupal.behaviors.exampleModule = { attach: function (context, settings) { $(.dproj, context).draggable(); } }; }(jQuery));• AJAX safe• Detachable
  23. 23. Drag and DropDraggable Droppable $.ajax() Callback
  24. 24. .dproj-draggable .dproj-droppable$(.dproj-draggable).draggable();$(.dproj-droppable).droppable();
  25. 25. path1 = add-attendee/[uid] path2 = /[nid] callback = path1 + path2callback = add-attendee/[uid]/[nid]
  26. 26. Callback argumentinserted into header
  27. 27. <span class=callback> add-attendee/1</span> <span class=callback>/20</span>callback = add-attendee/1/20
  28. 28. Drupal.behaviors.dprojdrag = { attach: function (context, settings) { $(.dproj-draggable, context).draggable({revert: invalid}); $(.dproj-droppable, context).droppable({ hoverClass: drop-hover, accept: .dproj-draggable, drop: function (e, ui) { $(ui.draggable).hide(); $(e.target).fadeTo(fast, 0.5); var view_id = . + $(e.target).attr(class).match(/view-dom-id-d+/)[0]; var href = Drupal.settings.basePath + $(.callback, ui.draggable).html() + $(.callback, e.target).html(); $.ajax({ url: href, success: function (data) { $(view_id).html($(view_id, $(data))); $(view_id).fadeTo(fast, 1);}});}});}};
  29. 29. Resources• jQuery UI • Contrib Modules http://jqueryui.com/ demos • Views• Managing Javascript in • Relation Drupal 7 http://drupal.org/node/ 756722 • Page manager • Rules

×