JQuery Layout Integration

Yii 1.1 General Discussion
1

Hi,

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….

php_content_two

Thx! Cheers Phil

2

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.

/youtheme/views/layout/main.php:


	<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 */

        	}

    	</style>


    	<?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 () {

            	$('#container').layout();            	

        	});

    	</script>

	</head>

	<body>

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

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

  		...

  		...

        	</div>


        	<?php echo $content; ?>

    	</div>

	</body>

/youtheme/views/layout/layout.php:


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

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

  ...

</div>


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

</div>

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

</div>

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

</div>

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