javascript

Drupal Alters and Overrides: Drupal.theme.prototype

Submitted by Brenda Boggs
on September 7th, 2010 at 11:30:41 PM

Recently I ran into a situation where I needed to alter the alt text of a link while using the Node relationships module. On mouse hover, it popped up the words "Search and reference..." while I wanted it to say something else, let's say, just "Search". Looking around the module's files, I found that it was embedded in a JavaScript file, node_form.js:

// Install the "Search and reference" button.
    if (fieldOptions.searchUrl) {
      var $searchButton = $(Drupal.theme('nodeRelationshipsReferenceButton', 'search', Drupal.t('Search and reference...')));
      $buttonsWrapper.append($searchButton);
...

You may notice the Drupal.theme namespace above. What Drupal.theme is doing is passing a few parameters; the first, nodeRelationshipsReferenceButton, is the name of our actual theme function:

/**
 * Theme the specified button for an autocomplete widget.
 */
Drupal.theme.prototype.nodeRelationshipsReferenceButton = function(type, title) {
  return '<a href="javascript:void(0)" class="noderelationships-nodereference-'+ type +'-button" title="'+ title +'"></a>';
};

The other parameters being passed are type and title.

Drupal.theme.prototype was introduced in Drupal 6, meant for any modules producing HTML content within their JavaScript, so that this content could be overridden properly.

In the Node relationships module, each dynamically generated button has it's alt tags created in this way. So in order to change things, I would simply add this to my custom JavaScript file:

Drupal.theme.nodeRelationshipsReferenceButton = function(type, title) {
  if (type == 'search') {
    title = 'Search';
  }
  return '<a href="javascript:void(0)" class="noderelationships-nodereference-'+ type +'-button" title="'+ title +'"></a>';
};

Note that the only real different between these functions is the removal of the prototype namespace.

You can read more about Drupal's JavaScript coding standards at http://drupal.org/node/172169

Tags: 
drupal
theming
javascript

jQuery Tabs: Creating "Continue" and "Previous" Buttons

Submitted by Brenda Boggs
on July 7th, 2007 at 3:19:53 PM

jQuery is neat, and so is the jQuery tabs plugin. This is a method I used to add "continue" and "previous" buttons to some jQuery tabs, essentially giving it a "wizard-like" look and feel. While I am also using a version of the JS Tools tabs module for Drupal, this should hopefully work for the stand-alone plugin, too.

Despite the tabs being assigned anchor IDs, simply trying to skip to the next one only seems to work in Firefox. Let's break this down and say I have a page with 3 tabs. The tabs are named #section-1, #section-2, and #section-3.

In #section-1, I want a "Continue" button going to #section-2. This is the code I add directly to my tabs page at the bottom of #section-1.

I also added some similar links on #section-2 for a previous AND continue button, like so:

Now I need to add some stuff to the tabs javascript file (in my case, tabs.js). 

$function() {
  $('
Continue<\/a><\/p>').prependTo('#first-continue').find('a').click(
function() {
    $('#container').triggerTab(2);
    return false;
  });
  $('
Continue<\/a><\/p>').prependTo('#second-continue').find('a').click(function() {
    $('#container').triggerTab(3);
    return false;
  });
  $('
Previous<\/a><\/p>').prependTo('#first-previous').find('a').click(function() {
    $('#container').triggerTab(1);
    return false;
  });
});

Note that container is the main ID of the whole tabs structure. These names are similar to what you'll find at the jQuery tutorial. If you're using the Drupal JS Tools tabs module, you may need to change this to .drupal-tabs.

That's it. Tested in IE6, IE7, Safari3, and Firefox. You can style the look of them to appear more like buttons using the continue class with CSS.

Tags: 
drupal
javascript
jQuery
tabs