Change Page Layout Dynamically Using JQuery Layout Plug-In

In this post, we are going to see how we can change the layout of a page dynamically, without writing any CSS styles for the page. Sounds cool, right? Read on and see how it's done.

Sibeesh Venu

Mar. 11, 16 · Web Dev Zone · Tutorial

Like (4)

Save

6.46K Views

in this post, we are going to see how we can change the layout of a page dynamically, without writing any css styles for the page. sounds cool, right? are you afraid of writing the css styles which will suit for all screens like mobile, tablets, monitors, high resolution? as i am not a good designer, i', worried all the time about resolution issues whenever i use any custom styles. here we will be using a jquery plugin called jquery layout and we have options to set our footer, side bar, header, and many more. personally, i liked this plugin, which is why i am sharing some information about it.

download source code

you can always download the source code here:

change page layout dynamically

background

i came to know about this plugin when i was searching for some page layout for my application. then i just installed it and started using. it is pretty simple to use. you can always download the files from the plugin page here .

using the code

to start with this plugin, the first thing you are required to do is add the necessary references. we are going to use three references, jquery, jquery.layout-latest.js, layout-default-latest.css.

<link href="layout-default-latest.css" rel="stylesheet" />
 <script src="jquery-2.2.0.min.js"></script>
 <script src="jquery.layout-latest.js"></script>

the next thing we need are some div elements; we can set them as follows.

<div class="ui-layout-center">content area</div>
 <div class="ui-layout-north">header</div>
 <div class="ui-layout-south">footer</div>
 <div class="ui-layout-east">sidebar</div>
 <div class="ui-layout-west">sidebar</div>

now, we will add the scripts.

<script>
 $(function () {
 $("body").layout({
 applydefaultstyles:true
 });
 });
 </script>

here, we uses applydefaultstyles:true , this is for ensuring all the required default conditions/options are being applied automatically. now if you run your page, you will see a layout like the following.

change page layout dynamically

and, this is how your page will look like when you toggle panes.

change page layout dynamically when toggling

the following are the key features offered by the development team as they have mentioned in their plugin home page here .

simple to use: powerful but simple syntax is easy to learn
unlimited layout capabilities: 5 regions per layout – unlimited nesting
dozens of options: every aspect is customizable, globally and by region
total css control: dozens of auto-generated classes create any ui look
extensible: callbacks, methods, and special utilities provide total control
custom buttons: integrates with your own buttons for a custom ui look
collapsable: each pane can be closed, using any ui animation you want
hidable: panes can be completely hidden, either on startup or at any time
resizable: each pane can be resized, within automatic or specified limits
slidable: panes can also ‘slide open’ for temporary access
headers & footers: each region has unlimited headers or footers
hotkeys: can use the cursor-keys and/or define custom hotkeys
use any elements: use divs, iframes or any elements you want as a ‘pane’
compatible with ui widgets: integrates with jquery widgets and plug-ins
demo mode: set applydefaultstyles option for a fully functional layout

the developers have provided many demos of how we can use this plugin, you can always check those here .

that is all, now you can start using this plugin. see the complete code below.

complete code

<!doctype html>
<html>
<head>
 <title>change page layout dynamically using jquery layout plug in</title>
 <meta charset="utf-8" />
 <link href="layout-default-latest.css" rel="stylesheet" />
 <script src="jquery-2.2.0.min.js"></script>
 <script src="jquery.layout-latest.js"></script> 
 <script>
 $(function () {
 $("body").layout({
 applydefaultstyles:true
 });
 });
 </script>
</head>
<body>
 <div class="ui-layout-center">content area</div>
 <div class="ui-layout-north">header</div>
 <div class="ui-layout-south">footer</div>
 <div class="ui-layout-east">sidebar</div>
 <div class="ui-layout-west">sidebar</div>
</body>
</html>

conclusion

did i miss anything that you may think which is needed? have you ever wanted to do this requirement? could you find this post as useful? i hope you liked this article. please share me your valuable suggestions and feedback.

Topics:

jquery, responsive design, web dev, css

Published at DZone with permission of Sibeesh Venu, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Comments