10 jQuery Page Layout Plugins

Sam Deering

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.
jQuery-pageSlide-.jpg
Source


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.
jMetronome-Using-jQuery-to-keep-typographic-rhythm-.jpg
Source


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.
scale9grid.jpg
Source


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.
jPolite-v2-–-Lightweight-jQuery-Portal-.jpg
Source


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.
align-with.jpg
Source


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.
jScrollHorizontalPane.jpg
Source


7. LCARS Website System jQuery Plugin v2

Learn LCARS Website System in this tutorial.
LCARS-Website-System-jQuery-Plugin-v2-–-.jpg
Source


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.
ConteinersPlus-jQuery-Plugin-.jpg
Source


9. Tabset jQuery Plugin

A plugin that lets you choose your content and sort your tabs.
Tabset-jQuery-Plugin-.jpg
Source


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.
Background-canvas-drawing-jQuery-Plugin-.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.