Drupal, JavaScript és jQuery

Drupal, JavaScript

és

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

Friday, November 6, 2009

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

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

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

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 oldalunkhoz JavaScriptet

• Smink .info file-jába tegyünk egy-egy új sort, pl.:

scripts[] = js/jquery.cookie.jsscripts[] = js/scripts.jsscripts[] = carousel/carousel.js

Friday, November 6, 2009

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

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

• 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

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

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

Friday, November 6, 2009

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

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

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ó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

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

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

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

Próbáljuk ki

• Devel modul, ‘Execute PHP’ blokkba írjuk:

drupal_add_js('$(function() {

$("#logo").fadeOut("slow");});','inline');

Friday, November 6, 2009

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

Ajax demo - HTTP Getdrupal_add_js(

'$(function() {

$.get("admin/help/node", function(data) {

$("#footer").html(data);

});

});'

,'inline');

Friday, November 6, 2009

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

Hibakeresés

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

Friday, November 6, 2009

Hibakeresés

• Firebug

• Drupal for Firebug module

• console.log(data);

Friday, November 6, 2009

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

Köszönöm a figyelmet!

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

Friday, November 6, 2009