Tuesday, November 20, 2012

trunKit: how to deal with too much text...

As a UI developer, I'm sometimes given a visual spec to implement that doesn't really stretch: designs with elements that are fixed sized, regardless of the content meant to be lincluded inside (such as a long title or description.)

One solution for this is to show an abbreviated version of the title, possibly ending with a "...", and then let "hover" (in an increasingly touchscreen world, hover is often deprecated, though iOS tends to let a quick tap act as a hover) show the full title.  While refactoring our "activity tiles" at Alleyoop, I decided to wrap our solution to this issue as a jQuery plugin, So I introduce to you:
 trunKit.alienbill.com
I've posted an example of it in action below, but more information is there on the project site or its github repository.

Wrapping the functionality as a jQuery was easy: I'd recommend jMar's simple guide. The short of it is using a tiny bit of boilerplate, you're implementing an "each()" function (so your code can be daisy-chained) and then there's a nice method to allow for a hash of configuration options, but with sensible defaults.

Here it is in action:
 
This is the first example that I am placing here
My second example is not much different from the first
but by placing three examples, we will experiment with different colors.
But this is short.
There's likely dozens of similar plugins already out there, but this is mine, and I learned a bit from making it and packaging it as a plugin...

No comments:

Post a Comment