Drupal+javascript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Drupal+javascript

on

  • 1,569 views

 

Statistics

Views

Total Views
1,569
Views on SlideShare
1,569
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Drupal+javascript Presentation Transcript

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