joequery
8/21/2011 - 7:22 AM

jLayout Implementation

jLayout Implementation

gistfile1.html
content_copyfile_download

<!DOCTYPE html

  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<title>jLayout Examples</title>

		<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


		<script type="text/javascript" src="jquery.sizes.min.js"></script>

		<script type="text/javascript" src="jlayout.grid.js"></script> 
		<script type="text/javascript" src="jquery.jlayout.min.js"></script>
<style type="text/css">

			#my-container div {

				background-color: rgb(220,220,220);

				border: 1px solid rgb(200,200,200);

				text-align: center;

				width: 100px;

				height: 100px;
				display: inline-block;

			}
 
</style>

   <script type="text/javascript">            
$(document).ready(function(){
            $('#my-container').layout({
                type: 'grid',
                columns: 2,
                rows: 2,
                items: [
                    $('#component-1'),
                    $('#component-2'),
                    $('#component-3'),
                    $('#component-4')
                ]
            });            

});
        </script>
    </head>
    <body>
        <div id="my-container">
            <div id="component-1">One</div>
            <div id="component-2">Two</div>
            <div id="component-3">Three</div>
            <div id="component-4">Four</div>
        </div>
    </body>
</html>