Skip to content

Instantly share code, notes, and snippets.

@joequery

joequery/gist:1160286

Created August 21, 2011 07:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joequery/1160286 to your computer and use it in GitHub Desktop.
Save joequery/1160286 to your computer and use it in GitHub Desktop.
Download ZIP
jLayout Implementation
Raw
gistfile1.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment