Testing out jQuery Tools…pure awesome

jQuery Tools 1.2I’ve seen this site before, jQuery Tools – The missing UI Library for the Web, and I got a tweet about it again this morning. I was sick of getting links to it, so I decided what the hell, lets try this thing out and see what it does. It does some cool ass stuff, THAT is what it does!

And to make it even better, it is extremely easy to get things up and running. I tried out the Tabs – UI Tool, and the Tooltip (which you will see on the second pane). I have created a demo just to show you how easy it really is. They have demos of all of their tools on their site, with really easy to follow instructions for each to get them going. Go to the link above to check out all that it has available. But just to show you how freakin’ simple it is, here is a demo I did with the Tabs tool…took me less than 5 minutes.

Click here for the demo.

Take a look at the source code of my demo, and you can see what it consists of. You could literally copy the entire source, and it would work for you right now (exluding the tooltip png, which they provide in a zip file!). They provided the basic css, and the basic jQuery functions to get it going. You just need to include the jQuery js file, and their tools.min.js file. After doing just this basic demo, I am all about this awesome set of tools, and I can’t wait to start using them in some projects. Plus you can radically customize the css. They just had the base styles there, and I didn’t do anything to them. I’m already thinking of what I can do with it.

So take a look at them, and let me know what you think. I can honestly say, I was beyond surprised at what I found. hats of to the creators.

Coupon Code: webmachine

jQuery junkBox

.empty();
This method will remove all the child nodes of the matched element from the DOM. Below, anything within the element(s) with the class .sideContainer would be removed. Similar to remove(), but empty would be used when you want things out of the matched element, where as remove() would be use to remove the actual matched element (plus everything it contains). Very cool.

$('.sideContainer').empty();

Tags:

3 Responses to “Testing out jQuery Tools…pure awesome”

  1. Thanks for the reference, I’m definitely going to give it a whirl. Looks like it has a built in overlay also.

    I’m starting to change my mindset about some things. I used to feel “inferior” if you will when I used someone else’s packaged solution. I felt like if I was using a library or something similar, I wasn’t being a good programmer. Now I just accept that there will always be people better at programming than me, and instead of pouting and refusing to use their tools, I should be thankful. Afterall, the people who make these languages and library’s are the reason why we have jobs.

  2. jcDesigns says:

    First, let me just say, that if I was going to do an accordian, I would probably code it myself. One to stay in practice, and two, to see what it would take. I was also like you at the start. I don’t want a freakin’ plugin or anything else, I want to code it all! But, as Chris Coyier from css-tricks.com has pointed out numerous times, “Why reinvent the wheel?”

    The accordian aside, I would use this in a heartbeat for the tabs, the overlay, and the tool tips. Its already written, so why redo it. With jQuery Tools 1.2, you can download the js for only the tools you want. On my demo, I have the file that will do all of their tools. So if you just need the overlay, you just use the overlay script. I was very impressed with how flexible all of their tools actually were.

    I’m still going to write most of my code myself, but in some of these instances, there is just no point. I know how to write the jQuery for the tool tip, but theirs is already done, and looks great. So why waste my time on that?

    I see it as, if I know I could write it myself, then I’m fine using someone else’s script. If I can’t write it, I want to find out how and then figure it out.

  3. [...] this is a good option at all. If I were going to use a widget like what Wijmo offers, I would use jQuery Tools instead. Smaller and by the looks way easier to [...]

Leave a Reply to Joseph McCullough