Total Followers 132,503
The final version of jQuery UI 1.8 just got released a few days ago. I will go through all new features and also show you some examples with the new widgets.
Along with the hundreds of bug fixes and improvements, 5 new plugins and 1 new effect found the way into the bundle.
The jQuery UI team worked hard to make the framework even lighter, more modular and flexible. If you are a developer, it’s now even easier for you to build your own widgets or extend the pre-built ones.
To start right now, take a look at the new Widget-Factory and the jQuery UI CSS-Framework.
Also don’t forget about the ThemeRoller Firefox Developer Bookmarklet. This brings the ThemeRoller into any page on the web! To install it, simply drag the link into your Firefox toolbar. (or just click it right now to give it a try!).
With this, you can position any element relative to any other, or even relative to the parent window or your mouse. Like in the “Write Less. Do More”-fashion, you just have to select the element you want and configuring which part of it should be positioned relative to which part of another element. That’s all!
Take a look at the official documentation here.
You can also take a look at the two provided demos which are included.
You can use the form controls to configure the positioning or you can drag the positioned elements to modify the offsets.
Just drag around the orange parent element to see the collision detection in action!
This is a prototype of the photo-viewer using the Position Utility to place the images at the center, left and right of your parent and cycle them.
To cycle them, just click the “Previous” and “Next” links at the top or on the images on the left or right. Also take a look how the images are repositioned after you re-size the window.
With the button widget you can create a fully theme-able button from any imaginable element you want to use as a native button.
Use them right now in your dialog boxes or forms.
Take a look at the official documentation here.
They have also provided 6 different demonstrations there. Two of them I will show you now:
You can use any markup for create your buttons: An ordinary button element, a form-input element with the submit type or an anchor tag.
$("button, input:submit, a", ".demo").button();
$("a", ".demo").click(function() { return false; });
On this Demonstration you will see a (not functional) media player toolbar, filled with all types of buttons you can create with the new widget. Buttons with icons, checkbox-type buttons (“Shuffle”) and three radio-type buttons (“No Repeat”, “Once” and “All”).
Don’t forget to take a look at the source code. The setup/code is really very easy.
This is maybe the most requested feature, which made it into the latest release of jQuery UI – The Autocomplete. Now you are able to make any text input field pop up a menu to help the user in completing their search or entry, provide suggestions or show all allowed values.
You are able to provide static data using the source option, or provide a callback function as the data source which can get the data from a server via Ajax.
Also there are a lot of demonstrations on the official documentation page. You can take a look at it here: Official Autocomplete Documentation. I will again present you two of them:
This is the demonstration with the default functionality. When you start typing, you will get static suggestions on the pop up box. The data source is a simple JavaScript array.
var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
$("#tags").autocomplete({
source: availableTags
});
In this demonstration, the data source is a remote JSONP. In this case: geonames.org webservice. While you will end up with only the city name itself in the input box, more info is displayed in the suggestions box to help you find the correct entry.
This data is also available in callbacks, as you will get it illustrated in the results area below the text input field.
jQuery UI 1.8 – Final Changelog
Click the link above to take a look at the full list of changes between jQuery UI 1.7.2 and jQuery UI 1.8.
Of course, you have a few options again to get the latest build of jQuery UI.
With the jQuery UI 1.8 Starter Pack you will get all components and the default themes. Also it is optimized to use it along the Getting Started Guide, in case you’re new to this all.
Of course you can also get the full jQuery UI 1.8 Development Bundle, which also contains all components and the base theme. This package is optimized for development of jQuery UI itself or the redistribution of your own builds – not for the “Getting Started Guide”.
With the jQuery UI 1.8 Themes Pack you will get all of the 21 Themes of the ThemeRoller Gallery. You can just take one and use it, or take one as a starting point and tweak it to your wishes. For example you can use it along this bookmarklet.
If you know exactly what you want, you can go to the jQuery UI 1.8 Download Builder to customize your build and download it as a custom zip file. Of course it still takes care of plugin dependencies, so you don’t have to worry about that!
Now jQuery UI 1.8 is also hosted on Google’s AJAX Libraries API page. As Usual you can directly use them in your script sources so you disburden your server.
Of course you can still go to GitHub to get the latest version there too.
If you are ready for jQuery UI 1.8, make sure to use it along the latest jQuery build (1.4+) so you get the full performance and compatibility.
The Core of jQuery UI is now 71% smaller. They have achieved this optimization by pulling the already modular but bundled components mouse and widget.
The new mouse plugin file makes the average jQuery UI 14% smaller. This plugin is not new, but now it is moved to its own file, where before it was in the core.
If you’re upgrading from 1.7 to 1.8, be sure to take a look at their comprehensive Upgrade Guide here. If you’re coming from an even older version, take a look at the 1.7 Upgrade Guide first.
Most interesting links:
What can we expect from jQuery UI 1.9? I’m already very excited – Discuss in the comments and have fun trying out all new features and lets fill the web with some nice jQuery User Interfaces!
Happy developing! :)
Get The Only Freelancer crash course you will ever need to read!
Daniel Kurdoghlian is a freelance web designer, web developer and graphics artist living and working in Vienna (Austria). He is also founder of PushingPixels.at, a new media company specialized in web design, print design and photography. If you want to get in contact with him, you can visit his vCard or just drop him a line through Twitter.
Friday, December 30th, 2011 09:44
hey position utility demo 2 is realy realy amazing yar thanksssss.. for providing such information to us :)
Sunday, November 20th, 2011 14:44
Hello ,
Nice tutorial , Thanks for sharing !!
Tuesday, April 12th, 2011 16:31
Hi,
nice article, but the starting-image is the header of jQuery and not jQuery UI ;) first i was confused cause I only happed 1.8 and the logo ;)
Monday, July 19th, 2010 20:40
As usual, with virtually every company and product, free or otherwise:
New features were added, but old bugs were not fixed!
Saturday, April 3rd, 2010 13:37
Its just the same, ridiculously confusing to set up. What ever happened to “ease of use”?
Saturday, April 3rd, 2010 16:27
I guess the same what happens with Firefox – it is no more light weighted as it use to be, but don’t be harsh, maybe some good will come out of it at all :)
Wednesday, March 31st, 2010 18:32
Autocomplete is very much broken, any mouse click more than a split second long fails to fire the select event in Firefox and IE. Don’t put this on your site and have it broken for most of your visitors. This shouldn’t be in 1.8 in this state.
Try it with a longer mouse click (> 0.5 seconds) in either of these demos:
http://jqueryui.com/demos/autocomplete/remote-jsonp.html
http://www.danwellman.co.uk/demos/autocomplete.html
Wednesday, May 19th, 2010 08:04
Todd,
yes Autocomplete has a bug, but it is not “very much broken”. I have found a OK workaround for the issue you are describing. See http://dev.jqueryui.com/ticket/5469#comment:2
jQuery UI is a very nice piece of work! :-)
Best regards,
Eirik
Monday, March 29th, 2010 21:55
Wow! I didn’t know anything about a new UI release! It seems pretty interesting. Especially the new auto complete function. I think I will definitely use that one. Keep it up!
Sunday, March 28th, 2010 13:58
Nice post, now to try out some of those
Sunday, March 28th, 2010 02:55
Now that’s what I call help. jQuery making life way too easy for us. I got some more ideas like transition of columns from right to left using floats….
Friday, March 26th, 2010 12:03
Daniel Kurdoghlian was really fast I was thinking of this yesterday :) Even talked about it with Saad Bassi. Nice and thanks :)
Sunday, March 28th, 2010 21:27
You’re welcome and thank you too!
Next one is yours – But tell me, because I love to do anything jQuery related – and usually I do it fast ;)
Friday, March 26th, 2010 15:55
Nice post! How about split-buttons? Thought they would come with jquery-ui-1.8…
Sunday, March 28th, 2010 21:31
Thank you Falk!
What do you mean by split-buttons? Maybe drop-downs on buttons?
If yes, it’s not directly implemented as an option (as far as I know for now) – but you can easily make your own with the given functionality.
If you and others are interested, I can put it on my to-do list for tutorials! :)
Friday, March 26th, 2010 03:11
Now that’s what I call help. jQuery making life way too easy for us. I got some more ideas like transition of columns from right to left using floats….
Thursday, March 25th, 2010 23:31
Thank you for pulling out some of the highlights of jQuery UI 1.8! I am looking forward to using them.
Friday, March 26th, 2010 05:22
No Worries. Daniel is working on a new tut and experiment.:)
Sunday, March 28th, 2010 21:24
Yes, you’re right.
You can expect some more flash-effects soon – without Flash :)
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Beth McLain
Thursday, March 25th, 2010 23:31
Thank you for pulling out some of the highlights of jQuery UI 1.8! I am looking forward to using them.
Saad Bassi
Friday, March 26th, 2010 05:22
No Worries. Daniel is working on a new tut and experiment.:)
Daniel Kurdoghlian
Sunday, March 28th, 2010 21:24
Yes, you’re right.
You can expect some more flash-effects soon – without Flash :)
Andrew Conlan
Sunday, March 28th, 2010 13:58
Nice post, now to try out some of those
Dani
Sunday, March 28th, 2010 02:55
Now that’s what I call help. jQuery making life way too easy for us. I got some more ideas like transition of columns from right to left using floats….
djavupixel
Friday, March 26th, 2010 12:03
Daniel Kurdoghlian was really fast I was thinking of this yesterday :) Even talked about it with Saad Bassi. Nice and thanks :)
Daniel Kurdoghlian
Sunday, March 28th, 2010 21:27
You’re welcome and thank you too!
Next one is yours – But tell me, because I love to do anything jQuery related – and usually I do it fast ;)
Shikeb Ali
Friday, March 26th, 2010 03:11
Now that’s what I call help. jQuery making life way too easy for us. I got some more ideas like transition of columns from right to left using floats….
Daniel Kurdoghlian
Sunday, March 28th, 2010 21:25
Looking forward to your ideas!
Falk Pauser
Friday, March 26th, 2010 15:55
Nice post! How about split-buttons? Thought they would come with jquery-ui-1.8…
Daniel Kurdoghlian
Sunday, March 28th, 2010 21:31
Thank you Falk!
What do you mean by split-buttons? Maybe drop-downs on buttons?
If yes, it’s not directly implemented as an option (as far as I know for now) – but you can easily make your own with the given functionality.
If you and others are interested, I can put it on my to-do list for tutorials! :)
CuWeSo
Tuesday, April 12th, 2011 16:31
Hi,
nice article, but the starting-image is the header of jQuery and not jQuery UI ;) first i was confused cause I only happed 1.8 and the logo ;)
Milap
Sunday, November 20th, 2011 14:44
Hello ,
Nice tutorial , Thanks for sharing !!
Hardy
Friday, December 30th, 2011 09:44
hey position utility demo 2 is realy realy amazing yar thanksssss.. for providing such information to us :)
David
Monday, July 19th, 2010 20:40
As usual, with virtually every company and product, free or otherwise:
New features were added, but old bugs were not fixed!
reclamebureau meppel
Monday, March 29th, 2010 21:55
Wow! I didn’t know anything about a new UI release! It seems pretty interesting. Especially the new auto complete function. I think I will definitely use that one. Keep it up!
Todd
Wednesday, March 31st, 2010 18:32
Autocomplete is very much broken, any mouse click more than a split second long fails to fire the select event in Firefox and IE. Don’t put this on your site and have it broken for most of your visitors. This shouldn’t be in 1.8 in this state.
Try it with a longer mouse click (> 0.5 seconds) in either of these demos:
http://jqueryui.com/demos/autocomplete/remote-jsonp.html
http://www.danwellman.co.uk/demos/autocomplete.html
Eirik
Wednesday, May 19th, 2010 08:04
Todd,
yes Autocomplete has a bug, but it is not “very much broken”. I have found a OK workaround for the issue you are describing. See http://dev.jqueryui.com/ticket/5469#comment:2
jQuery UI is a very nice piece of work! :-)
Best regards,
Eirik
Andy
Saturday, April 3rd, 2010 13:37
Its just the same, ridiculously confusing to set up. What ever happened to “ease of use”?
Dainis Graveris
Saturday, April 3rd, 2010 16:27
I guess the same what happens with Firefox – it is no more light weighted as it use to be, but don’t be harsh, maybe some good will come out of it at all :)