[train simple Adobe AUTHORIZED Training Center] [This is an excerpt from trainsimple.com's Dreamweaver CC New Features] >> The jQuery UI framework provides a range of widgets such as accordion and tabs that are widely used in the web development world.
In an effort of supporting jQuery widgets in Dreamweaver, the spry widgets are being replaced with these newer jQuery widgets.
What we want do is use a jQuery widget to simplify the user's experience with this form.
Before we do that, I just want to quickly come over to widgets.html, which is an empty HTML document.
[Insert] Then I want you to come over to the Insert panel, [jQuery UI] and under this menu, you can choose jQuery UI, and it will list all the available jQuery UI widgets.
[Accordion] If you select something like Accordion, the widget will be placed within your document.
To modify the contents of that widget, simply select the blue border around the widget and you'll get all the appropriate options inside the Properties Inspector.
You can specify the number of panels, how it animates and other options such as icons that will appear within the Accordion.
As you experiment with these widgets, you'll find that they are very easy to use.
But let's come back to that form, if I go ahead and take a look at this page within a web browser, you can see that it's a fairly standard form.
There is some formatting applied to it in terms of CSS styling.
What I'd like to do instead of making the end-user type in a date is I'd like to use a jQuery widget that provides them a calendar that they can select a date from.
Now of course there is a Date Picker within HTML 5, but the jQuery implementation will work across a wide range of browsers and devices.
So we're gonna opt for the jQuery widget in this situation.
So I'll go ahead and close out that browser and what I'd like to do is select the Text field that's there currently within this form.
And once you select that Text field, you can delete it, [Date Picker] and then you can come over to the Insert panel and you'll find a Date Picker.
If you go ahead and select that, the Date Picker will be placed within the form and you'll notice that you have some basic options within the Properties panel.
Now because I'm gonna be delivering most of my content in United States, the Locale will be English.
Notice you have all the options to change the month, to change the year, you can have it displayed inline, you can also set a minimum date, in this case, I'll set it to one, and a maximum date, we'll have a range of a hundred days that the end-user could possibly pick from.
After doing that, we're gonna specify the number of months that we want to display.
We only want one to display, so we'll leave that default value there.
After establishing these settings, you can go ahead and save the document.
And now if we take a look at this within a web browser, you'll notice if we click inside what looks like a text field, a Date Picker actually shows up.
And if you select the date, it'll populate that text field.
So that's a much easier way for the end-user to enter date information into this form.
The jQuery UI widgets are brand new feature inside of Dreamweaver CC. [train simple Affordable and comprehensive technology training] [Adobe AUTHORIZED Training Center www.trainsimple.com]
