O'Reilly logo

Mastering jQuery UI by Vijay Joshi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Designing the page

For the page design, we will take inspiration from the portlet script on the jQuery UI website. This script is a jQuery UI sortable example from the jQuery UI demo site. The original script can be found at http://jqueryui.com/resources/demos/sortable/portlets.html. It uses a three-column layout but we will modify it to make two columns with two widgets in each column and then create a widget in each of the columns.

Let us begin by writing the markup that we require. Open the index.html file in your favorite editor and write the following markup to create the page skeleton:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Dashboard</title> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required