Permalink
Browse files

MINOR Added jlayout dependency

  • Loading branch information...
1 parent ddb9478 commit 253f90f018c2446564d11b502a14fa6d4ae89ca2 @chillu chillu committed Apr 13, 2011
@@ -0,0 +1,8 @@
+---
+format: 1
+handler:
+ commit: b5ff32977e136f519236d29593433e87dadb74d0
+ branch: master
+lock: false
+repository_class: Piston::Git::Repository
+repository_url: https://github.com/bramstein/jlayout.git
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Resizing Border Layout example</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <style>
+ html, body {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ overflow: auto;
+ }
+
+ .center, .west, .north, .south {
+ background-color: white;
+ text-align: center;
+ display: inline-block;
+ overflow: hidden;
+ }
+
+ .west {
+ width: 200px;
+ min-width: 200px;
+ max-width: 200px;
+ }
+
+ .north, .south, .west {
+ background-color: rgb(240, 240, 240);
+ }
+
+ .center {
+ width: 100%;
+ }
+ </style>
+ <script type="text/javascript" src="../../lib/jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../lib/jquery.metadata.js"></script>
+ <script type="text/javascript" src="../jsizes/jquery.sizes.js"></script>
+ <script type="text/javascript" src="jlayout.border.js"></script>
+ <script type="text/javascript" src="jquery.jlayout.js"></script>
+ <script type="text/javascript">
+ jQuery(function($)
+ {
+ var container = $('.layout');
+
+ function layout() {
+ container.height($(document).height());
+ container.layout({resize: false, type: 'border', vgap: 0, hgap: 0});
+ }
+
+ $(window).resize(layout);
+
+ layout();
+ });
+ </script>
+ </head>
+ <body>
+
+ <div class="layout">
+ <div class="north">North</div>
+ <div class="west">West</div>
+ <div class="center">
+ Center
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ </div>
+ <div class="south">South</div>
+ </div>
+
+ </body>
+</html>
@@ -0,0 +1,157 @@
+<!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>Resizing Border Layout example</title>
+ <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
+ <link type="text/css" href="../../lib/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
+ <style>
+ html, body {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+ }
+
+ .layout {
+ height: 100%;
+ }
+
+ .center, .east, .west, .north, .south {
+ background-color: white;
+ text-align: center;
+ display: inline-block;
+ padding: 1em;
+ }
+
+ .west, .east {
+ width: 8%;
+ }
+
+ .north, .south {
+ height: 10%;
+ }
+
+ /**
+ * These styles are to create custom resize handles.
+ */
+ .ui-resizable-handle {
+ background-color: rgb(220, 220, 220);
+ text-align: center;
+ }
+
+ .ui-resizable-w, .ui-resizable-e {
+ width: 6px;
+ border-left: 1px solid rgb(210, 210, 210);
+ border-right: 1px solid rgb(210, 210, 210);
+ }
+
+ .ui-resizable-w {
+ left: -8px;
+ }
+
+ .ui-resizable-e {
+ right: -8px;
+ }
+
+ .ui-resizable-n, .ui-resizable-s {
+ height: 6px;
+ border-top: 1px solid rgb(210, 210, 210);
+ border-bottom: 1px solid rgb(210, 210, 210);
+ }
+
+ .ui-resizable-n {
+ top: -8px;
+ background:
+ }
+
+ .ui-resizable-s {
+ bottom: -8px;
+ }
+
+ .ui-resizable-helper-west {
+ border-right: 6px solid rgb(220, 220, 220);
+ }
+
+ .ui-resizable-helper-east {
+ border-left: 6px solid rgb(220, 220, 220);
+ }
+
+ .ui-resizable-helper-north {
+ border-bottom: 6px solid rgb(220, 220, 220);
+ }
+
+ .ui-resizable-helper-south {
+ border-top: 6px solid rgb(220, 220, 220);
+ }
+
+ .ui-icon {
+ }
+ </style>
+ <script type="text/javascript" src="../../lib/jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../lib/jquery-ui-1.7.1.custom.min.js"></script>
+ <script type="text/javascript" src="../../lib/jquery.metadata.js"></script>
+ <script type="text/javascript" src="../jsizes/jquery.sizes.js"></script>
+ <script type="text/javascript" src="jlayout.border.js"></script>
+ <script type="text/javascript" src="jquery.jlayout.js"></script>
+ <script type="text/javascript">
+ jQuery(function($)
+ {
+ var container = $('.layout');
+
+ function layout() {
+ container.layout({resize: false, type: 'border', vgap: 8, hgap: 8});
+ }
+
+ $('.north').resizable({
+ handles: 's',
+ stop: layout,
+ helper: 'ui-resizable-helper-north'
+ });
+
+ $('.south').resizable({
+ handles: 'n',
+ stop: layout,
+ helper: 'ui-resizable-helper-south'
+ });
+
+ $('.east').resizable({
+ handles: 'w',
+ stop: layout,
+ helper: 'ui-resizable-helper-east'
+ });
+
+ $('.west').resizable({
+ handles: 'e',
+ stop: layout,
+ helper: 'ui-resizable-helper-west'
+ });
+
+ $(window).resize(layout);
+
+ layout();
+ });
+ </script>
+ </head>
+ <body>
+ <div class="layout">
+ <div class="center">
+ Center
+ <h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
+ </div>
+ <div class="east">
+ East
+ </div>
+ <div class="west">
+ West
+ </div>
+ <div class="north">
+ North
+ </div>
+ <div class="south">
+ South
+ </div>
+ </div>
+ </body>
+</html>
@@ -0,0 +1,128 @@
+<!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>Resizing Border Layout example</title>
+ <meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
+ <link type="text/css" href="../../lib/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
+ <script type="text/javascript" src="../../lib/jquery-1.4.2.js"></script>
+ <script type="text/javascript" src="../../lib/jquery-ui-1.7.1.custom.min.js"></script>
+ <script type="text/javascript" src="../../lib/jquery.metadata.js"></script>
+ <script type="text/javascript" src="../jsizes/jquery.sizes.js"></script>
+ <script type="text/javascript" src="jlayout.border.js"></script>
+ <script type="text/javascript" src="jquery.jlayout.js"></script>
+ <script type="text/javascript">
+ jQuery(function($) {
+ // Just call the inner layout once to initialize it. This
+ // must happen before the outer layout is initialized. It
+ // will be automatically resized when the outer layout is
+ // resized.
+ $('.layout-inner').layout();
+
+ var outerContainer = $('.layout-outer');
+
+ function layout() {
+ outerContainer.layout({resize: false});
+ }
+ layout();
+
+ $(window).resize(layout);
+
+ // This selector is changed to only select the west and east
+ // components of the outer layout.
+ $('.layout-outer > .east').resizable({
+ handles: 'w',
+ stop: layout
+ });
+
+ $('.layout-outer > .west').resizable({
+ handles: 'e',
+ stop: layout
+ });
+ });
+ </script>
+ <style>
+ html, body {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+ }
+
+ .layout-outer {
+ height: 100%;
+ }
+
+ .center, .east, .west, .north, .south {
+ background-color: rgb(220,220,220);
+ border: 1px solid rgb(200,200,200);
+ text-align: center;
+ display: inline-block;
+ }
+
+ .west, .east {
+ width: 8%;
+ }
+
+ .north, .south {
+ height: 10%;
+ }
+
+ /**
+ * To get correct percentages widths and heights in the inner layout
+ * you have to set the container to take up all space that's left after
+ * the outer columns east, west, north and south components. In this case:
+ * width = 100% - 8% - 8% = 84%
+ * height = 100% - 10% - 10% = 80%
+ */
+ .layout-inner {
+ width: 84%;
+ height: 80%;
+ background-color: white;
+ border: 0px;
+ }
+
+ .layout-inner .west, .layout-inner .east {
+ width: 25%;
+ }
+
+ .layout-inner .south, .layout-inner .north {
+ height: 20%;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="layout-outer {layout: {type: 'border', hgap: 3, vgap: 3}}">
+ <div class="center layout-inner {layout: {type: 'border', hgap: 3, vgap: 3}}">
+ <div class="center">
+ inner center
+ </div>
+ <div class="east">
+ inner East
+ </div>
+ <div class="west">
+ inner West
+ </div>
+ <div class="north">
+ inner North
+ </div>
+ <div class="south">
+ inner South
+ </div>
+ </div>
+ <div class="east">
+ East
+ </div>
+ <div class="west">
+ West
+ </div>
+ <div class="north">
+ North
+ </div>
+ <div class="south">
+ South
+ </div>
+ </div>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit 253f90f

Please sign in to comment.