jQuery idTabs - clean, simple, effective tabbing

by Jack K

I've used a few jQuery and javascript based tabbing solutions, but keep finding myself opting to use this one when faced with a UI that needs tabs. It's very flexible, simple to setup and, well, just a pretty elegant solution:

http://www.sunsean.com/idTabs/

There are a bunch of examples there, which of course you access via some tabs :-) . The examples show how versatile the plugin is (you can arrange your tabs pretty much any way you want). A code snippet for each example is visible via an expanding panel.

One thing you might want to is look at how the css is setup for the tabs, there are some nice hacks/workarounds to get rid of link edges (the border that can appear when clicking a tab).

Definitely one to reach for when you want to get some groovy tabs into place.


jQuery Validation plugin enhanced credit card validation extension

by Jack K

Today my company, iHwy, released an enhanced credit card validation extension for the jQuery Validation plugin. The extension provides a way for a developer to pass in the type of credit card being used (Amex, Visa, Mastercard and a bunch of others) so that the validation extension can check the numbers prefixing the credit card number and verify that the length of the card number is correct. It also does the mod-10 validation that the core creditcard validation routine does.

http://www.ihwy.com/labs/jquery-validate-credit-card-extension.aspx

That page shows some examples of card numbers that incorrectly pass the core creditcard validation routine, but do not pass when the extension is used. This extension should make it pretty easy for you to tighten up your credit card validation. The sample code we've provided shows a way to bind your credit card type dropdown selection to the validation extension.

jQuery Spy - streaming updates

by Jack K

OK, here's something I've always thought was cool and am seeking a project to use it on:

http://leftlogic.com/lounge/articles/jquery_spy2/

Basically, it shows a set of self-updating data with "older" items fading out of view as time goes by. Not sure what I mean? Check out one of the examples:

http://leftlogic.com/jquery/spy.html

Recently FriendFeed deployed something like this. Here's Robert Scobles, usually pretty active:

http://friendfeed.com/scobleizer/friends/realtime

No fade-out there, but you get the idea. And hey, they use jQuery, too!


Visual jQuery 1.2.6 - yay!

by Jack K

I used to use this all the time back in the jQuery 1.1 days.... then it kinda languished, but now it's back (thanks Remy and Yehuda!). This is a really nice looking, easy to drill into document for jQuery functions:

http://www.visualjquery.com/

If you're drilling down to find what you need, it helps if you know where to look, but if you're not, there's a very fast "filter" at the top that can help. I'd venture to guess it stemmed from this:

http://remysharp.com/jquery-api/

which I remember digging a few months ago. Here's the blog entry for that. It's got an Adobe AIR version, too:

http://remysharp.com/2008/07/04/jquery-api-update-offline-and-anywhere/

Handy stuff. Thanks guys!

jquery ActsAsTreeTable plugin: turn a table into a tree

by Jack K

This jQuery plugin lets you turn a table of data into an expandable/collapsible tree, allowing you to have a tree that has multiple columns of data:

http://ludo.cubicphuse.nl/jquery-plugins/acts_as_tree_table/doc/index.html

The examples show a typical use case scenario for something like a file browser. We're using it for an expand/collapse tree for an ajax-oriented product editor, where the tree table shows a hierarchy of products and categories and the user expands the tree to get to the levels/products that they want to work with.

By using a multi-column tree, the user gets a nice little subset of info for each product (SKU, amount available, etc) to help them decide whether to click on it and go into full edit mode (in another div on the screen) for the product.

Getting the CSS right is a little quirky: the expand/collapse icons keep wanting to appear outside the table, but we'll figure it out. There's a table row id/class naming convention that has to be adhered to so that the data knows parent/child relationships, which makes sense.

UPDATE 11/24: There's a new version of this plugin available:

http://blog.cubicphuse.nl/2008/11/12/jquery-treetable-2-0. This version adds options for drag and drop and gives the plugin a new name: jQuery treeTable 2.0.

<< 1 2 3 4 5 >>