JQuery Layout Integration


I need some help understand the layout system better;) I come from Pardo Coding and there you have a very strange PLACEHOLDER system, where you can define a central Layout and fill in those…

E.g. I want to create a jquery ui layout and I have layout containers for north, west, east, south, center…

Now I want to put content in center and from the same view in west as navigation (jqtree). Is there a way to make something like:

html code…

php content_one

html code….


Thx! Cheers Phil

yii-jquery.layout integration require container element instead of BODY for the Layout, please refer UI.Layout Demo page. Create new yii-layout and configure main.php & layout.php file as following snippet.


	<link type="text/css" rel="stylesheet" href="<?php echo Yii::app()->theme->baseUrl; ?>/css/layout-default-latest.css" />

    	<style type="text/css">

        	html, body {

            	background:	#666;

            	width:		100%;

            	height:		100%;					

            	padding:	0;

            	margin:		0;

            	overflow:	auto; /* when page gets too small */


        	#container {

            	background:	#999;

            	height:		100%;

            	margin:		0 auto;

            	width:		100%;

            	max-width:	900px;

            	min-width:	700px;

            	_width:		700px; /* min-width for IE6 */

            	margin-top: 5px;

            	margin-bottom: 5px;

            	background: white;

            	border: 1px solid #121c28;


        	.pane {

            	display:	none; /* will appear when layout inits */



    	<?php Yii::app()->clientScript->registerCoreScript('jquery') ?>            	

    	<script type="text/javascript" src="<?php echo Yii::app()->theme->baseUrl; ?>/js/jquery.layout-latest.js"></script>

    	<script type="text/javascript">

        	$(document).ready(function () {






    	<div id="container"  class="">

        	<div class="pane ui-layout-north">




        	<?php echo $content; ?>




<?php $this->beginContent('//layouts/main'); ?>

<div id="content" class="pane ui-layout-center span-16">    	



<div class="pane ui-layout-south container">


<div class="pane ui-layout-west container">


<div class="pane ui-layout-east container">


<?php $this->endContent(); ?>