acts_as_buffoon

On the project I mentioned yesterday, I created some really nice CSS “buttons”. The buttons were actually just links with some nice styling, but they’d become a distinctive feature of the UI. Unfortunately, your only options for submit buttons are a regular button or an image, which wouldn’t mesh well with the rest of my UI. You can submit a form via Javascript, but I’m not sure if you can send a commit message that way, and I happened to need the message.

The buttons look like this:

It’s just a link with a CSS3 gradient, border, and CSS3 drop shadow. Inside is an img tag, and some text.

Fortunately, I was able to come up with an unobtrusive JS solution that should degrade gracefully. The following code uses jQuery and Coffeescript.

Notice

This isn’t intended to be a plugin or a piece of code you can use without modification, but with a little tweaking it could be handy.

http://gist.github.com/552281

For example, say you have the following submit element:

The script iterates over all submit buttons, and checks to see if they have a class starting with ‘icon_’. If true, the script hides the submit button (but doesn’t delete it), and inserts a link after it. The script reads the class name (discarding the ‘icon_’ part) and uses that to attach an icon from my /public/images/icons/ directory. The script also uses the value of the original submit button as the text to insert in the new “button”.

When the user clicks the link/button, it triggers a click() event on the original submit button. This means that you still get the commit message. Additionally, if your user doesn’t have JS, they should just get the original button.

For the heathens among you who aren’t using Coffeescript, here’s the same code in plain Javascript:

http://gist.github.com/552300