jQuery Projects

I am a huge fan of John Resig's incredible JavaScript library jQuery. I've written at length about using this library to make common DOM tasks and AJAX much quicker and easier to implement, and have just released a book about the jQuery UI library.

jMailer

jMailer is a plugin for jQuery I wrote that provides the visitor with a popup email form. It should be attached to a link element and when that link is clicked, the popup appears.

Within the popup is a form which let's the visitor enter an email address they want to send the email to, their email adress so that the recipient can reply directly to them, a subject box and a message box.

Why did I write this plugin? There are several reasons:

  • I wanted to write a plugin for jQuery that was completely unique
  • I wanted to write an article about how to write plugins for jQuery and this was a relatively simple example
  • Every single ecommerce site I build at work has a feature that allows visitors to send emails, such as a 'Look at this page I found' email, or a 'contact us' email. These email forms are coded as seperate popup pages, which I personally belive are a bad way of providing this feature for several reasons, including popup blockers, so I wanted to provide a clean way of doing this without using separate windows.
  • It was kinda fun

jMailer Example

The 'Contact Me' link in the footer of my site has the plugin attached click it to see the popup form and send me a message :D The To field has been mapped to my own mail address in the back-end so messages will only come to me.

You should also note that the plugin constitues just the front-end. A back-end of your choice (PHP, .NET, etc) can be attached to do the physical sending of mail.

jMailer Features

the current release (1.0) of jMailer has the following features:

  • Automatic modality
  • Automatic iFrame shim when IE6 is detected
  • A default message
  • A built-in method of styling the form buttons
  • AJAX sending of form data to the back-end

jMailer Usage

Using the plugin is simple: Download the source file and ensure you have a copy of the jQuery library to hand (min version 1.2.6).

Then attach the plugin to the link using standard jQuery syntax:

$("#mailerLink").jMailer()

This is all that's required for the default implementation

jMailer Configuration

A configuration object can be supplied in the constructor to configure various options:

var config = {
  modal: true | false //defaults to true
  id: "a string" //defaults to "mailer"
  message: "a string" //defaults to "Hi, check out this great page I found."
  shim: true | false //defaults to false unless IE6
  buttonImages: { //defaults to false
    cancel: "url(img/cancelSlice.gif) repeat-x"
    cancelOver: "url(img/cancelSlice_over.gif) repeat-x"
    send: "url(img/sendSlice.gif) repeat-x"
    sendOver "url(img/cancelSlice_over.gif) repeat-x"
  }
}

$("#mailerLink").jMailer(config)

Back to top