jQuery UI module Q.
Hey everyone,
I've been working on my theme and wanted to try out some jQuery UI Effects. So quickly found the jQuery UI module and then the jQuery update module, both are enabled, but jQuery UI isn't working for the bit of code:
$('#tabContent').show("slide", { direction: "down" }, 1000);
I know jQuery works because the $(document).ready( . . . part of the code is working all ok as it should do.
But on the jQuery_ui module page (http://drupal.org/project/jquery_ui) it says "This is a utility module that won't do anything on its own. See README.txt for how your module can use it to add jQuery UI effects to your pages."
So what I'm wondering is how to I get this into my theme? I thought the jQuery UI was just a .js file which needs to be included in the scripts, so should I be adding in a custom module to include the jQuery UI into my theme?
Sorry if this is a stupid question - I'm still getting my head around blocks, modules and just drupal in general.
Many thanks,
Matt
_
You mention the readme, but nothing about the additional installation instructions. Did you follow all of the installation instructions in the readme.txt (this module requires more than just enabling to properly install it)?
_
Don't be a Help Vampire - read and abide the forum guidelines.
If you find my assistance useful, please pay it forward to your fellow drupalers.
Yeah I read through the
Yeah I read through the readme.txt and I've copied it below, but it just goes on to talk about the API for developers wanting to use it in a module, so for the part of the page which I want to make use of the effects it seems like I need to move the code into a module.
// $Id: README.txt,v 1.3 2008/06/21 22:58:43 webchick Exp $
CONTENTS OF THIS FILE
---------------------
* Introduction
* Installation
* API
INTRODUCTION
------------
Authors:
* Jeff Robbins (jjeff)
* Angela Byron (webchick)
* Addison Berry (add1sun)
This Module Made by Robots: http://www.lullabot.com
jQuery UI (http://ui.jquery.com/) is a set of cool widgets and effects that
developers can use to add some pizazz to their modules.
This module is more-or-less a utility module that should simply be required by
other modules that depend on jQuery UI being available. It doesn't do anything
on its own.
INSTALLATION
------------
1. Copy the jquery_ui module directory to your sites/SITENAME/modules
directory.
2. Download the "Development bundle" of jQuery UI from
http://ui.jquery.com/download.
3. Extract it as a sub-directory called 'jquery.ui' in the jquery_ui folder:
/sites/all/modules/jquery_ui/jquery.ui/
4. Enable the module at Administer >> Site building >> Modules.
5. If desired, configure the module at Administer >> Site configuration >>
jQuery UI. Here you may select which level of compression the jQuery library
should use. It defaults to 'minified' compression, which strips comments and
white space.
API
---
Developers who wish to use jQuery UI effects in their modules need only make
the following changes:
1. In your module's .info file, add the following line:
dependencies[] = jquery_ui
This will force users to have the jQuery UI module installed before they can
enable your module.
2. In your module, call the following function:
jquery_ui_add($files);
For example:
jquery_ui_add(array('ui.draggable', 'ui.droppable', 'ui.sortable'));
jquery_ui_add('ui.sortable'); // For a single file
See the contents of the jquery.ui-X.X sub-directory for a list of available
files that may be included, and see http://ui.jquery.com/docs for details on
how to use them. The required ui.core file is automatically included, as is
effects.core if you include any effects files.
If you wish to override the compression type selected in the settings
screen, you may do so by passing in an optional $type parameter. Possible
values are 'none', 'minified', and 'packed'.
jquery_ui_add(array('ui.draggable', 'ui.droppable', 'ui.sortable'), 'none');
Basically all I wanted to do
Basically all I wanted to do was add a drop down tab to contain some social networking info but using this effect to create the nice little slide effect (http://docs.jquery.com/UI/Effects/Slide), so if I wanted to add this in via a module (which it seems like a I have to) how would I go about adding it in a module such that it outputs the right HTML code?
I've started going through the Pro Drupal Development book which creates a Module from scratch which adds forms to a page, but how do I make it add content with HTML?
The only issue I have with this whole thing is realistically I would of seen this as more of a theming issue rather than needing to move to a module.
So any input or ideas would be great otherwise I'll just start going down a route which code potentially be the wrong way to go about this problem.
_
You actually don't need a module to add jquery to your site. The jquery_ui module is aimed at developers who generally create modules, but you can just as easily do it in the theme layer.
First, you don't need the added overhead and complexity of a huge collection of plugins like jquery_ui to add a simple slide effect to an element. Base jquery, which is part of core drupal, includes some simple effects -- including a slide.
Similar to style.css, a default script.js file is included with every theme. If your theme doesn't have one, you can just create a script.js file in the directory for your theme and add any jquery/js you wish there. No extra module, no muss, no fuss. ;-)
So, to add a simple slide effect you could do something like the following (in the script.js file):
if (Drupal.jsEnabled) {$(document).ready( function () {
$('#clicker').click(function() {
$('#clicker-content').slideToggle();
return false;
});
});
}
Totally untested, but should be close to functional.
EDIT: also, if you simply want to be able to use any of the plethora of jquery plugins:
_
Don't be a Help Vampire - read and abide the forum guidelines.
If you find my assistance useful, please pay it forward to your fellow drupalers.
Cheers for the reply. I was
Cheers for the reply.
I was using the original jQuery slide effect but wanted to try the jQuery UI one because it is different, however have playing around just doing it the normal way it didn't work as I wanted so im sticking with the original jQuery core effect.
For anyone interested to get jQuery UI working as normal I just downloaded the Dev Bundle of jQuery UI and then added in the correct js files i.e. for slide effect I needed to add
scripts[] = jQuery-ui/ui/effects.core.js
scripts[] = jQuery-ui/ui/effects.slide.js
If you look in the js files they tell you what dependency's exist etc.
Thanks for your help
Final Java Code
Hi Matt,
I was wondering about your final jquery ui code. I'm trying to do something similar and am having trouble with the java (I'm also fairly new to drupal and, while my css, xml, and some of my php are up to speed, java isn't something I'm particularly versed in.). In particular it looks like I'm having trouble passing parameters into the jquery ui function. Probably a syntax error on my part but I've been experimenting for hours now and I'm at a loss. . .
This is working:
<?php
drupal_add_js('$(document).ready(function()
{
$("#nice-menu-1").hide().show("slide");
});','inline'
);
?>
but this (calling show with additional parameters) breaks:
<?php
drupal_add_js('$(document).ready(function()
{
$("#nice-menu-1").hide().show("slide",{direction:"right"},5000);
});','inline'
);
?>
Any help would be most appreciated.
Regards,
Copper
update
That second code snippet turns out to be good, my error was in the scripts[] declaration.
Thanks!