There are many many tutorials and plugins for the jQuery core, but not so many that focus on jQuery UI. jQuery UI has been criticized in the past for its lack of documentation and support, but times have changed. Accompanied by its content rich website, in-depth docs and, especially, support from the jQuery community as a whole, jQuery UI has become huge and has never been easier to use.
This post has been written as an introduction and reference for the amazing jQuery UI.
This post has been written as an introduction and reference for the amazing jQuery UI.
To quote the web site: “jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications“.
What is jQuery UI?
jQuery UI is a widget and interaction library built on top of the jQuery core that allows you to animate different elements giving you impressive front-end interactions, all with relative ease.The UI package is basically a collection of user interface-related functions that and can be broken into 3 main modules: the widgets, which contain prebuilt and customizable user interfaces; the effects, which are very simple and straightforward animations you can do to a page element (shake it, explode it, and so on); and expanded mouse interaction with page elements (for example, dragging and dropping)… and that doesn’t cover the half of it!
An Introduction to jQuery UI-Part 1
Steve Reynolds has written a fairly comprehensive introduction to jQuery UI, aimed at developers that have never used it and need something to bring you up to speed quickly.
Part 1 covers the Interaction element of the functionality, drag and drops, resizing and sorting. In part 2 he discusses with further depth the Widget elements, giving you home grown examples of usage and offering you jQuery-only alternatives.
View Part 2 Here>>>>
Intermediate JQuery: The UI project
If you found the articles above a little bit basic, then this article is for you. From IBM, they discuss in deep depth the jQuery UI package and how it aims to create a well-defined and reliable set of user interface widgets that you can reuse within your own Web applications. The article explains in detail how to install and how to use it effectively.
If you have the time, this is certainly worth a read.
Understanding jQuery UI widgets – A tutorial
"Widget" to most means a user-interface element, like a button or something more complicated like a popup date picker, but in jQuery UI terms it means a class, members of which are associated with HTML elements, things like Draggable and Sortable.
Beginners Guide to jQuery Sorting
Beginners might often steer away from trying to reorder lists by dragging and dropping, the thought of doing something like that may sound daunting. Thankfully, jQuery UI has made it relatively simple, and this tutorial shows you how.
jQuery UI Accordion Widget – Part 1
The accordion widget is another UI widget made up of a series of containers for your content, all of which are closed except for one. Therefore, most of its content is initially hidden from view. Each container has a heading element associated with it, which is used to open the container and display the content. When you click on a heading, its content is displayed. When you click on another heading, the currently visible content is hidden while the new content is shown.
This article, from jQuery Ui guru Dan Wellman, explains and shows you how to use the jQuery UI Accordion Widget.
Using Modal Window or Dialog Box in JQuery UI
Simple Draggable Element Persistence with jQuery
At some point you may need to create a draggable element within your web application. This is great functionality, however you may want or find that you need the element to stay in place after being dragged around. In this tutorial you will be show how to easily drag an element and make it stick, even after a page reload, by grabbing and storing its X and Y coordinates.
Using Multiple jQuery UI Themes on a Single Page
If you're using the jQuery UI CSS Framework to design an entire interface, you may find that one theme is not enough. This quick tutorial will highlight a new feature in the jQuery UI Download Builder which allows you to easily use multiple themes on a single page.
Using the jQuery UI Slider
In this tutorial you will learn how build a simple jQuery UI Slider, that changes the opacity of an element on the page.
Exactly How to Create a Custom jQuery Accordion
Accordions can be very useful for showing lots of different sections of data in a small amount of space. jQuery UI has a built in Accordion function, but according to the jQuery UI Build your Download, the size of the Core jQuery UI and Accordion scripts are 25kb and 16.6kb, respectively. In this tutorial, they will show you how to build a custom accordion that is more "bandwidth efficient".
Making a Google Wave History Slider
We’ve all seen the videos (and some even got access) of Google’s latest product – Wave. Maybe not as great as we’ve imagined, it still features some great UI that will surely inspire a few developers to implement some of it in their works.
In this tutorial, they will show you how to create a Google Wave-like history slider. Using it, it will enable your sites visitors to go back and forth in time to view the changes that take place within a comment thread.
Drag to Share with jQuery UI
We’ve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it. It’s both brilliant and intuitive, and in this article you will be shown how you can replicate this behavior with jQuery and jQuery UI.
Create Featured Content Slider Using jQuery UI
Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.
In this tutorial they will show you how to create a featured content slider for your website using the jQuery UI library.
Making a Content Slider with jQuery UI
In this tutorial you’'ll use the jQuery UI slider widget to create an attractive and functional content slider. You’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so you will use the slider to move the different content blocks in and out of view.
jQuery UI Tabs with Next/Previous
Tabbed areas are lovely, but when you start getting to more than 3 or 4 different tabs, they start to get a little crowded and it makes sense to provide alternative navigation for them. It makes sense to supply universally located Next/Previous buttons, so without even moving your cursor you can click through each of them.
jQuery UI makes creating tabbed areas very easy, the jQuery UI tabs does have a function that can be called to switch tabs.
jQuery tabs: Create HTML tabs using jQuery UI
Tabs are generally used to break content into multiple sections that can be swapped to save space. There are various implementations and methods for HTML Tabs available and, for this tutorial you will be using the jQuery UI library, which is quite possibly the easiest method.
Create A Tabbed Content Rotator Using jQuery
In this tutorial you are going to learn how to create a tabbed content rotator using the jQuery UI. This popular effect can be used effectively on your homepage to present customers with your products and services.
Combining Selectables And Draggables Using jQuery UI
There are two powerful and fun elements that the jQuery UI provides. When both of them work together you will be able to come up with some creative web application uses for them. The two that are covered in this tutorial are: UI Selectable and UI Draggable.
Build a simple cost estimator with jQuery UI Slider
While the author of this tutorial was in the process of building his online portfolio, he came up with the idea of having a simple cost estimator for potential clients. And in this article, he describes how he achieved it, using jQuery UI. Its very simple, definitely beginner level.
Custom 404 with jQuery and jQuery UI
This tutorial isn’t limited to only 404 error pages, you can use the animation technique illustarted in this tutorial on any page. Here’s the premise – a 404 page were the user actually sees the page breaking and cracking into bits.
jQuery UI – Getting Started with ThemeRoller
ThemeRoller is a web app that offers a fun and intuitive interface for designing and downloading custom themes for jQuery UI.
Using a simple web interface, a user can configure settings for colors, background textures, and fonts — including variations for default, hover and active states — for the component pieces of all jQuery UI widgets. The system lets users experiment, easily preview the custom settings, and quickly generate a ZIP containing everything necessary for a cohesive set of styled jQuery UI components.
Develop Your Own jQuery “ThemeRoller-Ready” Components
ThemeRoller not only allows you to style the official jQuery UI components, it also provides handy CSS hooks for designing your own ThemeRoller-Ready components. This article will introduce you to the ThemeRoller's CSS API and show you how to use it in your own projects.
The jQuery UI CSS Framework – Getting Started With Custom Themes
jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.
If you'd like to create a custom theme, you can either start by modifying the default ui.theme.css file and the individual stylesheets for each plugin, or create a stylesheet from scratch. In this tutorial they walk you through the process of how to create styles from scratch and how to create a custom look and feel that can't be achieved using the standard framework classes.
Styling Buttons and Toolbars with the jQuery UI CSS Framework
In this article, you are not only shown how to create and style a basic button with the jQuery UI CSS framework, they also offer some downloadable button examples, that demonstrate how to effectively incorporate the power of the CSS framework classes in a custom widget.
0 comments:
Post a Comment