Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal+javascript

1,356 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

Drupal+javascript

  1. 1. Drupal, JavaScript és jQuery Nagy Péter [email_address]
  2. 2. JavaScript <ul><ul><li>Könnyen használható kliens oldali nyelv
  3. 3. Minden modern böngésző támogatja
  4. 4. Gyengén típusos
  5. 5. Objektumorientáltan programozható
  6. 6. Eseményvezérelt
  7. 7. Nagyon elterjedt </li></ul></ul>
  8. 8. JavaScript Drupalban <ul><li>Sminkből </li><ul><li>A smink .info fájlba tegyükbe scripts[] = myjs1.js scripts[] = myjs2.js ....
  9. 9. Főleg desinghoz ajánlott így </li></ul><li>Modulból </li><ul><li>A Drupal API használatával
  10. 10. drupal_add_js() - Egy adott laphoz
  11. 11. hook_init() - Minden oldalhoz </li></ul></ul>
  12. 12. drupal_add_js() <ul><li>drupal_add_js($data, $type, $scope, $defer, $cache, $preprocess); </li><ul><li>$type – Az adat típusa </li><ul><li>Core, module, theme – A szkript elérési útvonala
  13. 13. Inline – JS forrás kód
  14. 14. Setting – Egy tömb, ami beállításokat tartalmaz </li><ul><li>Drupal JS object </li></ul></ul><li>$data – az adat attól függően, hogy milyen típusú
  15. 15. $scope – pl.: footer vagy header vagy más sminkben definiált </li><ul><li>Lehetőleg tegyük a footerbe </li></ul></ul><li>http://api.drupal.org/api/function/drupal_add_js/6 </li></ul>
  16. 16. <ul><li>Könnyen használható JavaScript framework
  17. 17. 2006-ban jelent meg, MIT és GNU kettős licensz
  18. 18. Nyílt forráskódú
  19. 19. Kicsi ~ 30k
  20. 20. Moduláris, plugin-okkal könnyen bővíthető
  21. 21. Elterjedt, rengeteg helyen használják
  22. 22. Az Drupal 5-től kezdve a core része
  23. 23. http://www.jquery.com </li></ul>
  24. 24. JQuery alapok <ul><li>$ a jQuery objektum rövidítése
  25. 25. Kódunkat tegyük a következő blokkba: </li><ul><li>$(document).ready(function(){ ..... });
  26. 26. Így csak az oldal betöltődése után fog a kódunk lefutni
  27. 27. A window.onload megfelelője </li></ul><li>A legtöbb jQuery függvény az őt meghívó objektummal tér vissza -> ”chaining” </li></ul>
  28. 28. jQuery szelektorok 1. <ul><li>Szelektorok a HTML DOM elemeinek ”megtalálásához”
  29. 29. A CSS szelektorok itt is működnek egészen a CSS3-ig </li><ul><li>pl.: $('#logo'), $('div.wrapper'), $('a') </li></ul><li>” Függvények” a szelektorokhoz a különbőző szűrésekre </li><ul><li>:not(), :first, :last, :first-child, :eq(), :checked
  30. 30. pl.: $('.menu li:last') $('.menu li:not(.leaf)') </li></ul><li>Ezekkel ekvivalens függvények: first(), not(), contains(), stb.
  31. 31. pl.: $('.block').first(); </li></ul>
  32. 32. jQuery szelektorok 2. <ul><li>Attribútumokat vizsgáló szelektorok </li><ul><li>[name], [name=value], [name^=value], [name$=value], [name!=value] </li></ul><li>A *-gal mindent ki lehet választani
  33. 33. Több szelektor egyben: </li><ul><li>$('sel1 + sel2'), $('sel1 ~ sel2')
  34. 34. $('sel1, sel2, sel3')
  35. 35. $('sel1 > sel2') </li></ul><li>Minden szelektor egy vagy több jQuery objektummal tér vissza </li></ul>
  36. 36. JQuery AJAX <ul><li>Sokkal egyszerűbb, böngészőfüggetlen AJAX framework
  37. 37. Nem kell használni az xmlHttpRequest objektumot
  38. 38. Függvények: $.ajax(), $.post(), $.get()
  39. 39. Példa AJAX kérésre: </li><ul><li>$.post('barmi.php', {p: ”adat”}, function(redata){ $('#data-wrapper').html(redata); }); </li></ul></ul>
  40. 40. AJAX Drupalban <ul><li>A modulunk ajax callback-jeinek címét elmentjük a Drupal settings objektumba:
  41. 41. jQuery-ből a következőképpen hívjuk:
  42. 42. A meghívott függvény: </li></ul>
  43. 43. jQuery UI <ul><li>Egy jQuery library hogy ne csak jó legyen, hanem szép is.
  44. 44. Egyszerűen használható
  45. 45. ”Professzionális hatású”
  46. 46. Könnyen témázható
  47. 47. http://jqueryui.com </li></ul>
  48. 48. Debug <ul><li>Firebug </li><ul><li>CSS szerkesztéshez
  49. 49. Javascript debughoz
  50. 50. Teljesítmény figyeléshez
  51. 51. HTML struktúra ellenőrzéshez </li></ul><li>Firebug for Drupal </li><ul><li>SQL lekérdezések
  52. 52. Debug üzenetek
  53. 53. Node, user, views, form objektumok ellenőrzése </li></ul></ul>
  54. 54. Drupal 7 változások 1. <ul><li>drupal_add_js() </li><ul><li>Weight paraméter, hogy szabályozni tudjuk, a szkriptek betöltődésének sorrendjét
  55. 55. Külső javascriptek használata: </li><ul><li>drupal_add_js('http://example.com/example.js', 'external'); </li></ul><li>Fájlban lévő JS-eket hozzáadása: </li><ul><li>drupal_add_js('mymodule/js/script.js', 'file'); </li></ul></ul></ul>
  56. 56. <ul><li>Library-k </li><ul><li>hook_library()
  57. 57. drupal_add_library() </li></ul><li>Névtér problémák </li><ul><li>Sok library lehetséges
  58. 58. Következéképpen írjuk a kódot: </li><ul><li>(function ($) { </li><ul><li>//Ide jön a kód </li></ul><li>}) </li></ul></ul></ul>Drupal 7 változások
  59. 59. Köszönöm a figyelmet!

×