10 jQuery Page ayout Plugins to help you create and manage web pages look and feel with ease and keep your page components happy! The Layout of a website plays a vital role in user comfort. The better the layout, the more the users stick to your site. Layout of text, images, widgets and menus affect the site the most. This handpicked collection of best jQuery Layout Plugins will help you design user friendly and attractive websites.

1. jQuery pageSlide

This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of JavaScript. By attaching the method to an anchor tag, pageSlide wraps the original body content into a wrapper and creates an additional block for the secondary content load. The slide is animated whenever the click event is invoked.

2. jMetronome: Using jQuery to keep typographic rhythm

The technique is fairly straightforward, requiring some basic math to ensure consistent margins and leading across all page elements. Here’s some jQuery code that you can use in order to make sure your document keeps its rhythm.

3. scale9grid

This plugin adds support for scaling background images using a 9-grid. Developers can specify a grid for selected elements which causes the background-image to be scaled selectively, depending on what part of the grid the background lays.

4. jPolite v2 – Lightweight jQuery Portal

You can use JPolite as a base for creating complex / customizable websites quickly by separating content, appearance and behavior. JPolite provides the ease of turning an HTML content block into tabbed or accordion control without extra code.

5. Align With

A simple plugin to re-position one or more HTML elements to be aligned with another element. Elements can be aligned by corners, edges and centre-points – ideal for dynamic content such as menus and tooltips.

6. jScrollHorizontalPane

Plugin based off of Kevin Luck’s jScrollPane which override’s the browsers default horizontal on any block level element with an overflow:auto style. It’s built on top of the jQuery library and uses both the dimensions plugin and the mouse wheel plugin. Provided with the download of the plugin there is a default jScrollHorizontalPane.css which can be used as a basis to edit the styling on the scroll bar.

7. LCARS Website System jQuery Plugin v2

Learn LCARS Website System in this tutorial.

8. ConteinersPlus jQuery Plugin

This is a useful plug in to build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsible and minimizable.

9. Tabset jQuery Plugin

A plugin that lets you choose your content and sort your tabs.

10. Background canvas drawing jQuery Plugin

The BackgroundCanvas jQuery Plugin automates the insertion of the canvas object behind the content (z-order). It also provides higher level drawing functions for round corners and tabs.

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.