Your SlideShare is downloading. ×
0
Drupal, JavaScript
                
 
 
 
 
 
 és



                           SZTE Drupal kurzus, 2009/2010 őszi félév

...
Bemutatkozás
                    • Zsemlye Ernő, Drupal és Web fejlesztő
                    • SZTE Programtervező Matemat...
Miről lesz szó?

                    • Drupal és JavaScript
                    • JS Drupal sminkből
                    •...
JavaScript
                    • Minden modern (szabványos) böngésző
                           támogatja (Pl. Google Chro...
Drupal és JavaScript




Friday, November 6, 2009
A Drupal Objektum




Friday, November 6, 2009
JS Drupal Sminkből

                • Legegyszerűbben a sminken keresztül
                           adhatunk az oldalunkh...
JS Drupal Modulból - 1

                    • Saját modulunkból is van lehetőség egyéni
                           JavaScr...
JS Drupal Modulból - 2

                    • $type lehetséges értékei:
                           core, module, theme, in...
•          Rendkívül kényelmesen használható JavaScript
                           library, számos szolgáltatással:

     ...
“jQuery is putting the fun back to JavaScript”
                           — Jeff Robbins, Lullabot




                   ...
Előnyök
                • CSS szabályokhoz hasonló DOM elérés
                • Alap XPath szelektorok
                • K...
Hátránya


                    • Túl egyszerű a használata, ezért könnyű
                           hülyeséget csinálni :)...
Drupal, a jQuery előtt




Friday, November 6, 2009
...és utána




                                         “Write less, do more.”



Friday, November 6, 2009
jQuery dióhéjban
      • A $ jel egy speciális objektum, az ún. jQuery
             objektum rövidítése
      • jQuery kód...
Szelektorok - CSS
                    • $('a') // select all 'a' elements

                    • $('#container') //select ...
Szelektorok - XPath

                    • $('a[title]') // select all 'a'
                      elements that have a titl...
Szelektorok - jQuery

                    • $('li:eq(1)') // select the second
                      'li' element

       ...
Próbáljuk ki


            • Devel modul, ‘Execute PHP’ blokkba írjuk:
                   drupal_add_js('$(function() {

 ...
Demo (olvasható)
              drupal_add_js(
                '$(function() {

                           var style =
    ...
Ajax demo - HTTP Get
                           drupal_add_js(
                            '$(function() {
               ...
Cukorkák
                    • http://jqueryui.com/
                    • http://dragoninteractive.com/
                  ...
Hibakeresés




                           http://www.flickr.com/photos/st3f4n/3578669329/

Friday, November 6, 2009
Hibakeresés

                    • Firebug
                    • Drupal for Firebug module
                    • console.l...
További források

                                                                  •   http://jquery.com

               ...
Köszönöm a figyelmet!




                           http://www.flickr.com/photos/st3f4n/3661446835/
Friday, November 6, 2009
Upcoming SlideShare
Loading in...5
×

Drupal, JavaScript és jQuery

1,105

Published on

SZTE Drupal kurzus, 2009/2010 őszi félév

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,105
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Drupal, JavaScript és jQuery"

  1. 1. Drupal, JavaScript és SZTE Drupal kurzus, 2009/2010 őszi félév Friday, November 6, 2009
  2. 2. Bemutatkozás • Zsemlye Ernő, Drupal és Web fejlesztő • SZTE Programtervező Matematikus - 2009 • Drupal: • 2007/10 - 2009/09 @Pronovix • 2009/10 - @CEU • http://twitter.com/zserno • zserno at gmail dot com Friday, November 6, 2009
  3. 3. Miről lesz szó? • Drupal és JavaScript • JS Drupal sminkből • JS Drupal modulból • jQuery dióhéjban • Példák jQuery használatára • Néhány szó a hibakeresésről Friday, November 6, 2009
  4. 4. JavaScript • Minden modern (szabványos) böngésző támogatja (Pl. Google Chrome, Safari, FF) • Apple Dashboard widgetek alapja • Adobe Photoshop JS-sel scriptelhető • Mozilla Firefox GUI-ját is JS hajtja • Egyszerűen használható(nak szánt), kliens- oldali scriptnyelv Friday, November 6, 2009
  5. 5. Drupal és JavaScript Friday, November 6, 2009
  6. 6. A Drupal Objektum Friday, November 6, 2009
  7. 7. JS Drupal Sminkből • Legegyszerűbben a sminken keresztül adhatunk az oldalunkhoz JavaScriptet • Smink .info file-jába tegyünk egy-egy új sort, pl.: scripts[] = js/jquery.cookie.js scripts[] = js/scripts.js scripts[] = carousel/carousel.js Friday, November 6, 2009
  8. 8. JS Drupal Modulból - 1 • Saját modulunkból is van lehetőség egyéni JavaScript file-ok vagy kódok hozzáadására • Használjuk a Drupal API-t! Friday, November 6, 2009
  9. 9. JS Drupal Modulból - 2 • $type lehetséges értékei: core, module, theme, inline, setting • Ha csak lehet, tegyük szépen a ‘footer’-be: • drupal_add_js(drupal_get_path('module', 'simple_cck') . '/simple_cck.js', 'module', 'footer'); • (Bővebben: http://api.drupal.org/api/function/drupal_add_js/6) Friday, November 6, 2009
  10. 10. • Rendkívül kényelmesen használható JavaScript library, számos szolgáltatással: • DOM elérés, eseménykezelés, animáció, Ajax kérések • Egyik fő célja, hogy leegyszerűsítse a JavaScript írást • John Resig, Mozilla Foundation, 2006 • Nyílt forrású, MIT és GNU kettős licensz • Drupal 5 óta az alapcsomag része Friday, November 6, 2009
  11. 11. “jQuery is putting the fun back to JavaScript” — Jeff Robbins, Lullabot http://www.flickr.com/photos/st3f4n/3430588301/ Friday, November 6, 2009
  12. 12. Előnyök • CSS szabályokhoz hasonló DOM elérés • Alap XPath szelektorok • Kis méret: ~30KB • Profik által készített és karbantartott • Moduláris, csakúgy, mint a Drupal Friday, November 6, 2009
  13. 13. Hátránya • Túl egyszerű a használata, ezért könnyű hülyeséget csinálni :) pl. nem hatékony szelektorok Friday, November 6, 2009
  14. 14. Drupal, a jQuery előtt Friday, November 6, 2009
  15. 15. ...és utána “Write less, do more.” Friday, November 6, 2009
  16. 16. jQuery dióhéjban • A $ jel egy speciális objektum, az ún. jQuery objektum rövidítése • jQuery kódot legtöbbször a DOM felépítése után akarjuk végrehajtani: $(function() {...}); • Drupal modulban ez egy kicsit másképp van: Drupal.behaviors.myModuleBehavior = function (context) {...}; http://www.flickr.com/photos/jeffeaton/416385443/ Friday, November 6, 2009
  17. 17. Szelektorok - CSS • $('a') // select all 'a' elements • $('#container') //select the element with the id 'container' • $('div.ajaxContainer') // select all elements with the class 'ajaxContainer' • $('li:first-child') // select all li elements that are the first child of their parent Friday, November 6, 2009
  18. 18. Szelektorok - XPath • $('a[title]') // select all 'a' elements that have a title attribute • $('a[href^="mailto:"]') // select all 'a' elements whose title attribute begins with 'mailto' Friday, November 6, 2009
  19. 19. Szelektorok - jQuery • $('li:eq(1)') // select the second 'li' element • $('tr:not([th]):odd') // select all odd 'tr' elements that don't contain a 'th' element Friday, November 6, 2009
  20. 20. Próbáljuk ki • Devel modul, ‘Execute PHP’ blokkba írjuk: drupal_add_js('$(function() { $("#logo").fadeOut("slow");});','inline'); Friday, November 6, 2009
  21. 21. Demo (olvasható) drupal_add_js( '$(function() { var style = "cursor:pointer; padding:5px 10px; background:#A2D714; color:#FFF; -moz-border-radius:14px;"; $("li").append("<span style=""+style+"">x</span>") .click(function() {$(this).fadeOut("slow")}); });', 'inline'); Friday, November 6, 2009
  22. 22. Ajax demo - HTTP Get drupal_add_js( '$(function() { $.get("admin/help/node", function(data) { $("#footer").html(data); }); });' ,'inline'); Friday, November 6, 2009
  23. 23. Cukorkák • http://jqueryui.com/ • http://dragoninteractive.com/ • http://www.sohtanaka.com/web-design/ examples/hover-over-trick/ • http://www.sohtanaka.com/web-design/ examples/mega-dropdowns/ • http://themeforest.s3.amazonaws.com/ 74_jquery/jquerygravitysource/index.html Friday, November 6, 2009
  24. 24. Hibakeresés http://www.flickr.com/photos/st3f4n/3578669329/ Friday, November 6, 2009
  25. 25. Hibakeresés • Firebug • Drupal for Firebug module • console.log(data); Friday, November 6, 2009
  26. 26. További források • http://jquery.com • http://drupal.org/node/301181 • http://api.drupal.org • http://drupal.org/project/devel • Writing better jQuery code http://www.flickr.com/photos/st3f4n/3951143570/ Friday, November 6, 2009
  27. 27. Köszönöm a figyelmet! http://www.flickr.com/photos/st3f4n/3661446835/ Friday, November 6, 2009
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×