8/8/2019 jQuery Views and View Themeing

1/19

jQuery, Views, and View Themeing

Jonathan Rowny

DrupalCon San FranciscoApril 20th, 2010

8/8/2019 jQuery Views and View Themeing

2/19

Please move to the center

So that we may escape quickly in the event of something.

8/8/2019 jQuery Views and View Themeing

3/19

Jonathan Rowny

I work at AboutWeb: www.aboutweb.comWe work with government, non-profit, and commercial

Blog/Projects: www.jrowny.com I work with Flex, AS3, jQuery, CF, PHP, Drupal, etc.

email me: jrowny@gmail.com

orjrowny@aboutweb.com

mailto:jrowny@aboutweb.commailto:jrowny@gmail.comhttp://jrowny.com/http://www.aboutweb.com/

8/8/2019 jQuery Views and View Themeing

4/19

The Agenda!

Intro to ViewsCustomizing a view with CSS and Template filesIntro to jQueryCustomizing a view using jQuery

8/8/2019 jQuery Views and View Themeing

5/19

YOU should know:

We ARE going to do programming (yay!?)XHTML/CSSPHPand JavaScript!

Basic HTML/CSS knowledge is assumedNo JavaScript experience necessary.No PHP experience is necessary

8/8/2019 jQuery Views and View Themeing

6/19

Views!

Install views like any other moduleCreate a new viewAdd some fieldsAdd a page view

View display typesTableUnformattedList

8/8/2019 jQuery Views and View Themeing

7/19

Some stylization

Unformatted's for each row, 's for each column

List's for each row, 's for each column

Table's for each row, 's for each column

Views adds some great classes! Use FireBug to help youidentify them.

8/8/2019 jQuery Views and View Themeing

8/19

Views classes

.view-[name]

.view-content

.views-row

.views-field-[fieldname]

8/8/2019 jQuery Views and View Themeing

9/19

Theme a view with PHP

Copy and paste from the "theme information" sectioUse devel themer, print_r(), or firebug for drupalMake sure to reload theme registry (rescan for templates)Make sure you can't accomplish what you're trying to do

with CSS.

Example: Date Parts

20APR

8/8/2019 jQuery Views and View Themeing

10/19

Demo - Date Tab Example

8/8/2019 jQuery Views and View Themeing

11/19

jQuery real quick!

Use a CSS selector to get to an element in the DOM and

modify itCSS selectors:

a {color:pink;}.views-row{border:2px dashed #ccc;}

#Content {text-transform:uppercase;}why are you yelling?

Now use $ or jQuery as a function jQuery('a')$('a') for short

8/8/2019 jQuery Views and View Themeing

12/19

jQuery real quick pt 2.

$('a').hide(); //now every link onthe page is gone!

$('a')._____ you can do everythingafter the dot...

Actions: click, hover, etc.Manipulation: css, attributes, toggle (show/hide)

Traverse: each, children, siblings, next, prev, etc, manymore

8/8/2019 jQuery Views and View Themeing

13/19

ready?

$(document).ready(someFunction())function someFunction(){//do something..

}

Inline functions anyone?

$(document).ready(function(){//do something

});

8/8/2019 jQuery Views and View Themeing

14/19

How to install jQuery

Built into Drupal, you don't have to.but, if you're curious, download from jquery.com and...

Although, you do need to make sure that jquery is running

drupal_add_js('misc/jquery.js','core');orscripts in your theme file

8/8/2019 jQuery Views and View Themeing

15/19

Example - Accordion View

8/8/2019 jQuery Views and View Themeing

16/19

Example 2, Cycle

There is already a cycle module.views-row

8/8/2019 jQuery Views and View Themeing

17/19

Demo -DataTables

8/8/2019 jQuery Views and View Themeing

18/19

Parting Tips!

Keep it accessible, 508 is awesome.Don't rely on jQuery, only use it to enhanceDon't get silly with long jQuery animations, I didn'tmention jQuery.animate() for a reason.

8/8/2019 jQuery Views and View Themeing

19/19

Questions?

Take the survey athttp://sf2010.drupal.org/conference/sessions/jquery-views-and-view-themeing