The button theme function

While looking at Drupal.behaviors.editor(), we saw the Drupal.theme. prototype.button() theme get called. That theme is responsible for taking a button object and turning it into an HTML button. In Simple Editor, this was handled by some very generic string concatenation and a little bit of jQuery. We haven't gained much sophistication in moving to themes. The code is simple:

Drupal.theme.prototype.button = function (button) { var tag = $('<div class="editor-button"></div>');


return tag.html(;

The button object is passed in. We create a jQuery object with the base <div></div> tag. If the button object has a style property, we add a style attribute to the div tag. For example, with the B button, we add style='text-weight: bold' to the div tag.

Finally, we run one last jQuery chain, adding the button name as the text content of the div tag. We then returning the whole thing as a string containing HTML.

Every button is passed through this theme function. Together, all of the buttons are handed over to the Drupal.theme.prototype.buttonBar() function for additional theming.

Was this article helpful?

0 0

Post a comment