Jquery has made developing javascript fun and enjoyable.  It is a fantastic library that essentially allows the creation of library extensions on top of it via plugins.  Jquery plugins are surprisingly easy to write and elegant to read and use.  Here are a few tips on where to find good plugin candidates, design principles for plugins, and an outline of the basic structure that I have found most useful when writing plugins.



<div style="width:425px" id="__ss_5423499"><strong style="display:block;margin:12px 0 4px"><a href="http://www.slideshare.net/rockycode/jake-trent-writingjqueryplugins-5423499" title="Writing Jquery Plugins">Writing Jquery Plugins</a></strong><object id="__sse5423499" width="425" height="355"><param name="movie" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=jaketrentwritingjqueryplugins-101012075852-phpapp02&rel=0&stripped_title=jake-trent-writingjqueryplugins-5423499&userName=rockycode" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed name="__sse5423499" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=jaketrentwritingjqueryplugins-101012075852-phpapp02&rel=0&stripped_title=jake-trent-writingjqueryplugins-5423499&userName=rockycode" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="355"></embed></object><div style="padding:5px 0 12px">View more <a href="http://www.slideshare.net/">presentations</a> from <a href="http://www.slideshare.net/rockycode">rockycode</a>.</div></div>

Plugins aren't magical or anything.  In fact, any code that you can produce that's delivered as a plugin can be written without a plugin.  Jquery itself is just a bunch of javascript code written in a way that is packaged nicely, ready for distribution, and has a cleaned up API.  That's one of the things that makes it a joy to use.  Compare that with seeing a .js file full of line after line of function() { ... } and either choosing to copy paste bits and pieces or having to sift through it to determine which methods you should or want to call.  Plugins provide an elegant way to create cohesive code and then distribute the idea so that others will be able to pick it up and use it more easily.

For the demo used in conjunction with this presentation, visit the <a href="http://bitbucket.org/jtsnake/jquery-photopeek">Bitbucket Jquery Photopeek</a> repo (hg).

Jquery has made developing javascript fun and enjoyable.  It is a fantastic library that essentially allows the creation of library extensions on top of it

Writing Jquery Plugins

Jquery plugins are a joy to use, and they are surprisingly easy to write.  Everyone that writes lots of Jquery code should seek to take potentially-resuable functionalities of code and put them into a nice, compact plugin.  In the app I've been working on, we have a lot of user-generated content that we don't limit the length on, so it can grow very large.  To combat this, there is the UI pattern on the site that there is a "read more" link available to show the remaining text for the long-winded texts, while just showing a snippet otherwise.  This exists everywhere, for lots of different content; hence, the "readmore" plugin was born.



So, let's use it.  If I have a bunch of answers to an online question submitted, looking like this on the page:

```html
<div class="answer">
  Imagine this is super long and goes on forever.
</div>
```

In your document ready area, you'd apply the readmore plugin:

```js
$(".answer").readmore();
```

This is going to go through your class answer div's and apply two things:

1. Abridge the shown text length (default is 500)
2. Setup the "read more" click event

So, you're dom will now look something like this (except the shown length is much less than 500 chars here):

```html
<div class="answer">
  Imagine this is super long...
  <span class="readm-continue">&#8230;</span>
  <span class="readm-hidden" style="display:none;"> and goes on forever.</span>
  <a class="readm-more">Read More</a>
</div>
```

As you can see even though the `readm-hidden` class is applied to the overflow/hidden text, the plugin still gives it an explicit `display: none` style so that the plugin functions for visibility toggling.

The `readm-more` class is only used internally in the plugin for the click event.

If you want to, you can modify the defaults per-invocation:

```js
$(".answer").readmore({ 
  substr_len: 250
});
```


It's simple; it's powerful; it's jQuery.  Kachow!

Download the plugin at the [Github repo](https://github.com/jtsnake/jquery-readmore).

Jquery plugins are a joy to use, and they are surprisingly easy to write.  Everyone that writes lots of Jquery code should seek to take potentially-resuable

Jquery Plugin: readmore

Jquery gives a great, easy-to-use mechanism for extending its API and creating your own plugins.  For stuff that looks like it could be useful generally, you should really try to put it into a nice little plugin package.  For submit buttons, there is a general thought that they shouldn't be clicked twice (especially for functions such as financial transactions), so I created a plugin that fits an app that I have been working on recently, where there are many, many submit buttons, saving very granual pieces of content through ajax requests.



The "safesubmit" plugin is going to disable submit buttons when clicked and, in most cases, re-enable them when the ajax request has completed.  On your app, if you had a class called "safe" on all the submit buttons that you wanted to exhibit this behavior, you could enable the plugin functionality with one line:

```javascript 
$(".safe").safesubmit();
```

And that's it.  It's simple and powerful.  It's likely, however, because this happened on my project as well that the client code is going to have more complicated business rules.  In our case, someone added extra form validation where the length of the submitted field was checked -- if it passed, it was submitted; otherwise, it was not.  In that case, the plugin never re-enabled the button to be again pressable.  So, I exposed the functions of the plugin to be public, allowing you to shortcircuit the normal flow, essentially notifying the plugin to the submit failure.  For example, here's a submit's onclick event snippet:

```javascript
if (valid()) {
  $.ajax ({ ... });
} else {
  $.fn.safesubmit.failsubmit($(this));
}
```

If you need, the "safe" and "unsafe" methods are also made public.  You can call them whenever needed.  "safe" is the state of having the click disabled.  "unsafe" means you can click the button. 

You can also change default settings.  For instance, by default when you put the button in "safe" mode, it adds disabled="disabled" attribute to the button and adds a class of "disabled".  You have the option of changing all 3 opts.  For instance, maybe you have a different class:

```css
.dead {
  background-color: #ababab;
}
```

and want to apply that class instead.  Try this:

```javascript
$.fn.safesubmit.defaults.disabled_class = "dead";
$(".safe").safesubmit();
```

Download the script on [Github](https://github.com/jtsnake/jquery-safesubmit).

Jquery gives a great, easy-to-use mechanism for extending its API and creating your own plugins.  For stuff that looks like it could be useful generally, yo