mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-06-29 07:59:31 +02:00
MINOR Removed unnecessary jlayout examples
This commit is contained in:
Ingo Schommer
parent
253f90f018
commit
578f0ee30b
|
|
@ -1,82 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,157 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
<!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($)
|
||||
{
|
||||
var container = $('.layout');
|
||||
|
||||
function layout() {
|
||||
container.layout({resize: false, type: 'border', vgap: 8, hgap: 8});
|
||||
}
|
||||
|
||||
$('.north').resizable({
|
||||
handles: 's',
|
||||
stop: layout,
|
||||
resize: layout
|
||||
});
|
||||
|
||||
$('.south').resizable({
|
||||
handles: 'n',
|
||||
stop: layout,
|
||||
resize: layout
|
||||
});
|
||||
|
||||
$('.east').resizable({
|
||||
handles: 'w',
|
||||
stop: layout,
|
||||
resize: layout
|
||||
});
|
||||
|
||||
$('.west').resizable({
|
||||
handles: 'e',
|
||||
stop: layout,
|
||||
resize: layout
|
||||
});
|
||||
|
||||
$(window).resize(layout);
|
||||
|
||||
layout();
|
||||
layout();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout {
|
||||
height: 100%;
|
||||
background-color: rgb(220, 220, 220);
|
||||
}
|
||||
|
||||
.center, .east, .west, .north, .south {
|
||||
background-color: white;
|
||||
border: 1px solid rgb(200, 200, 200);
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.west, .east {
|
||||
width: 8%;
|
||||
}
|
||||
|
||||
.north, .south {
|
||||
height: 10%;
|
||||
}
|
||||
|
||||
/**
|
||||
* These styles are to create custom resize handles.
|
||||
*/
|
||||
.ui-resizable-w {
|
||||
left: -8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.ui-resizable-e {
|
||||
right: -8px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.ui-resizable-n {
|
||||
top: -8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.ui-resizable-s {
|
||||
bottom: -8px;
|
||||
height: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<div class="center">
|
||||
Center
|
||||
<h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
|
||||
<p>This example uses the <code>resize</code> callback on the jQuery UI resizable "widget" to resize the layout while dragging the borders. Combined with some custom CSS rules, this makes for a very elegant resizable border layout. Please take care while using the <code>resize</code> event handler as recalculating the layout every pixel is expensive and older browsers might not have smooth resizing as a result.</p>
|
||||
</div>
|
||||
<div class="east">
|
||||
East
|
||||
</div>
|
||||
<div class="west">
|
||||
West
|
||||
</div>
|
||||
<div class="north">
|
||||
North
|
||||
</div>
|
||||
<div class="south">
|
||||
South
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
<!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($)
|
||||
{
|
||||
var container = $('.layout');
|
||||
|
||||
function relayout() {
|
||||
container.layout({resize: false});
|
||||
}
|
||||
relayout();
|
||||
|
||||
$(window).resize(relayout);
|
||||
|
||||
$('.north').resizable({
|
||||
handles: 's',
|
||||
stop: relayout
|
||||
});
|
||||
|
||||
$('.south').resizable({
|
||||
handles: 'n',
|
||||
stop: relayout
|
||||
});
|
||||
|
||||
$('.east').resizable({
|
||||
handles: 'w',
|
||||
stop: relayout
|
||||
});
|
||||
|
||||
$('.west').resizable({
|
||||
handles: 'e',
|
||||
stop: relayout
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout {
|
||||
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%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout {layout: {type: 'border', hgap: 3, vgap: 3}}">
|
||||
<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>
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Toggle-able Border Layout example</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; 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($)
|
||||
{
|
||||
var container = $('.layout');
|
||||
|
||||
function relayout() {
|
||||
container.layout({resize: false});
|
||||
}
|
||||
relayout();
|
||||
|
||||
$(window).resize(relayout);
|
||||
|
||||
$('#toggle-west').click(function () {
|
||||
$('.west').animate({width: 'toggle'}, {duration: 500, complete: relayout, step: relayout});
|
||||
});
|
||||
|
||||
$('#toggle-east').click(function () {
|
||||
$('.east').animate({width: 'toggle'}, {duration: 500, complete: relayout, step: relayout});
|
||||
});
|
||||
|
||||
$('#toggle-north').click(function () {
|
||||
$('.north').animate({height: 'toggle'}, {duration: 500, complete: relayout, step: relayout});
|
||||
});
|
||||
|
||||
$('#toggle-south').click(function () {
|
||||
$('.south').animate({height: 'toggle'}, {duration: 500, complete: relayout, step: relayout});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.layout {
|
||||
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%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout {layout: {type: 'border', hgap: 3, vgap: 3}}">
|
||||
<div class="center">
|
||||
Center
|
||||
<h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
|
||||
<button id="toggle-north">Toggle North</button>
|
||||
<button id="toggle-west">Toggle West</button>
|
||||
<button id="toggle-south">Toggle South</button>
|
||||
<button id="toggle-east">Toggle East</button>
|
||||
</div>
|
||||
<div class="east">
|
||||
East
|
||||
</div>
|
||||
<div class="west">
|
||||
West
|
||||
</div>
|
||||
<div class="north">
|
||||
North
|
||||
</div>
|
||||
<div class="south">
|
||||
South
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
<!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>Border Layout example</title>
|
||||
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
|
||||
<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 relayout() {
|
||||
container.layout({resize: false});
|
||||
}
|
||||
relayout();
|
||||
|
||||
$(window).resize(relayout);
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layout {
|
||||
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%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout {layout: {type: 'border', hgap: 3, vgap: 3}}">
|
||||
<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>
|
||||
60
admin/thirdparty/jlayout/examples/columns.html
vendored
60
admin/thirdparty/jlayout/examples/columns.html
vendored
|
|
@ -1,60 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<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.grid.js"></script>
|
||||
<script type="text/javascript" src="jlayout.flexgrid.js"></script>
|
||||
<script type="text/javascript" src="jlayout.column.js"></script>
|
||||
<script type="text/javascript" src="jquery.jlayout.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(function ($) {
|
||||
$('.section').width(800).layout({type: 'column', columns: 2, resize: false, maxHeight: 400});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
h1, h2, p {
|
||||
outline: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="content">
|
||||
<div class="section">
|
||||
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
|
||||
<p>Mauris mollis magna mauris, in commodo magna. Suspendisse potenti. Ut consequat semper dui quis tristique. Suspendisse sit amet diam vitae tortor sodales varius. Integer tristique faucibus pharetra. Fusce accumsan nisi sed ipsum laoreet nec consectetur mauris tristique. Curabitur viverra orci eget arcu bibendum viverra. Donec in nulla risus. Vestibulum viverra orci vitae ipsum sollicitudin auctor. Donec eget gravida nisl. </p>
|
||||
<p>Morbi vehicula congue fringilla. Nulla facilisi. Donec non sapien elit, eget dapibus ipsum. Sed sit amet urna in mauris convallis rutrum ac ac nisl. Mauris et augue sapien. Donec aliquam arcu vel sapien sagittis molestie. In a dolor metus. Cras nec nibh justo. Quisque augue urna, porta sed fringilla vel, accumsan id diam. Quisque leo nisi, pharetra a scelerisque in, vestibulum quis odio. </p>
|
||||
<h2>Mauris ac arcu nisl</h2>
|
||||
<p>Vestibulum felis nunc, aliquet consectetur eleifend sit amet, sodales eu dui. Duis a urna ac nunc fermentum venenatis nec nec tortor. Fusce consectetur scelerisque lectus nec suscipit. Donec purus ipsum, mattis eget luctus a, luctus sed risus. Phasellus euismod pretium nisi quis volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce et rutrum turpis. Praesent turpis quam, malesuada nec dignissim eu, ornare eget mauris. Cras vulputate augue sed sapien varius posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam id sapien turpis, nec pulvinar ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum varius sodales cursus. Aenean varius, metus eget euismod facilisis, metus dolor ultrices sem, a elementum nisl velit dapibus sapien. </p>
|
||||
<p>Sed semper dapibus risus at vulputate. Fusce at gravida eros. Sed vel justo neque, ac molestie eros. Sed tellus risus, accumsan in gravida laoreet, molestie eget tortor. Phasellus eget lorem id erat rutrum pharetra. Aliquam aliquam viverra magna, eu adipiscing arcu dignissim sit amet. Maecenas consectetur odio eu tellus malesuada pretium. Fusce sed metus dui. Etiam egestas velit sed quam molestie accumsan laoreet nibh tempus. Phasellus ac mi nec odio mollis sagittis nec ut mauris. Phasellus euismod massa non sapien malesuada quis rutrum nisi accumsan. Suspendisse aliquet eros a dui convallis eu ultrices felis faucibus. Suspendisse sit amet ante ut nulla condimentum condimentum. Nulla ac ullamcorper lacus. Phasellus ullamcorper luctus mauris in lacinia. Ut metus mi, pulvinar sit amet sodales non, condimentum sed enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec aliquam consectetur dapibus. Mauris in neque sem, eu bibendum dui. </p>
|
||||
<h1>Vivamus aliquam est quis purus laoreet lacinia</h1>
|
||||
<p>Nullam ut neque sed dolor sodales suscipit. Quisque auctor, ipsum id tempor hendrerit, elit massa pellentesque nunc, a pulvinar odio erat ac turpis. Vestibulum viverra bibendum sapien, ac posuere orci adipiscing ac. Maecenas ut bibendum dui. Donec a tellus nunc, quis hendrerit ipsum. Etiam tempus orci non erat egestas aliquet. Morbi quis mi et lacus interdum imperdiet et ac velit. Mauris vel velit neque, id sollicitudin tellus. In luctus, lectus non suscipit luctus, neque elit rutrum dui, quis sollicitudin urna purus eu est. Quisque aliquet consectetur laoreet. Nullam rutrum libero sed ipsum sagittis eu iaculis velit feugiat. Nulla pharetra ullamcorper purus, vel volutpat quam suscipit ut. Quisque sodales, lectus sit amet pellentesque ultrices, sem tortor mattis eros, sit amet condimentum eros diam sed mi. Vestibulum eu est a metus mollis cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
|
||||
<p>Morbi turpis magna, interdum id tincidunt ut, ultrices id nibh. Curabitur nec augue nisi. Proin lobortis nunc nec erat porttitor vehicula. Sed ultricies gravida leo, nec consectetur mauris auctor fermentum. Praesent ac justo diam, et vulputate orci. Donec lacinia erat eget purus auctor non sagittis nisl vehicula. Nulla eget viverra risus. Curabitur dignissim ornare nisi sit amet eleifend. Maecenas laoreet, turpis id faucibus viverra, mauris velit lacinia neque, et eleifend orci lorem ut nisi. Etiam auctor commodo elementum. Pellentesque eros ipsum, ultrices quis pellentesque nec, rutrum ut orci. Donec sit amet malesuada lacus. Ut consectetur vulputate enim id vulputate. Fusce luctus lectus a urna bibendum vitae iaculis quam euismod. Aenean in sapien et odio congue molestie id at nisl. Nunc dictum rutrum felis, quis rutrum dolor dictum vel. Sed ac molestie odio. Donec adipiscing purus vel massa ultrices quis lacinia augue condimentum. In blandit porta turpis, vel iaculis lacus molestie ac. Nunc pulvinar, libero et fringilla cursus, enim enim sollicitudin libero, vel imperdiet lectus orci ut velit. </p>
|
||||
<p>Donec sed lacus sit amet diam vehicula gravida quis a nunc. Vestibulum eu justo lorem, id molestie erat. Praesent vulputate porta urna et molestie. Cras mattis lorem quis sapien porttitor dictum. Nunc non felis risus, at viverra lectus. Praesent eu ipsum in lorem vestibulum molestie. Nulla est erat, fringilla ac tincidunt et, rhoncus ac quam. Curabitur eget diam eu eros laoreet elementum in quis quam. Nunc quis justo neque, a porttitor sapien. Quisque vel velit sapien. Ut pretium magna ut velit viverra laoreet. Nam dignissim facilisis dui nec ultrices. Proin consectetur, erat id pharetra faucibus, magna sem euismod justo, vitae feugiat odio orci non ante. Proin ornare risus quis enim congue at cursus orci suscipit. Quisque sed lectus non erat sodales ullamcorper. Sed egestas pretium nunc, ut rhoncus odio ornare id. Vestibulum hendrerit congue quam sit amet adipiscing. Quisque est leo, fringilla sit amet iaculis sed, iaculis molestie metus. </p>
|
||||
</div>
|
||||
<!--
|
||||
<div class="section">
|
||||
<h1>Donec ut libero magna, nec suscipit augue</h1>
|
||||
<p>Sed a neque eget neque pharetra iaculis ac id eros. Nam varius pretium urna, ut molestie mi malesuada sed. Aenean rutrum semper tellus, eu varius dui ultrices sed. Ut convallis eros nec sapien porta rutrum. In hac habitasse platea dictumst. Nulla quis elit in elit cursus iaculis eu id ipsum. Sed vestibulum cursus leo non euismod. Quisque accumsan lacinia dui, id feugiat augue volutpat a. Donec hendrerit tristique metus a imperdiet. </p>
|
||||
<p>Quisque suscipit purus eu ligula placerat egestas. Mauris fringilla egestas malesuada. Integer in neque nunc, nec mattis nisl. Pellentesque id tristique odio. Aenean sed orci sit amet nibh ornare malesuada. In a lacus elit. Aliquam eget justo turpis. Nam convallis ipsum ac nunc pretium eget vehicula odio condimentum. Suspendisse potenti. Nullam ornare consequat imperdiet. Nulla quis imperdiet dui. Proin rhoncus mollis iaculis. Morbi eget ultrices dolor. Aliquam ultricies placerat scelerisque. Nullam quis odio a orci elementum feugiat. Sed non arcu sed massa volutpat tincidunt in eu sapien. Etiam mi lacus, ultrices nec fermentum semper, volutpat eu odio. Quisque pretium lacus et mi luctus et aliquam lacus sagittis. </p>
|
||||
<p>Praesent ipsum ligula, rhoncus at feugiat sit amet, ultrices auctor libero. Nunc congue tortor id quam volutpat vel adipiscing mi dignissim. Vestibulum a enim a felis dignissim adipiscing in nec dui. Aenean eu luctus lectus. Donec congue libero ornare nibh adipiscing sit amet vulputate purus lacinia. Donec sed erat quam. Vestibulum faucibus congue eros ac sagittis. Nunc magna nunc, pharetra vitae suscipit nec, feugiat at mauris. Vivamus ut mi purus, vel vestibulum erat. Duis viverra consectetur congue. Nulla varius odio sit amet velit pharetra aliquam. </p>
|
||||
<p>Maecenas pretium aliquam orci, nec adipiscing enim laoreet nec. Integer felis nunc, convallis dictum viverra at, eleifend a nisi. Mauris vitae dolor id leo dapibus tempus id sit amet massa. Aenean mauris libero, sagittis vel ultricies ut, porta nec dui. Cras pellentesque sagittis faucibus. Suspendisse potenti. Phasellus mollis rutrum lacinia. Ut non tortor ac purus vulputate commodo. Etiam quis tortor nec eros fermentum tristique non non metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lobortis dapibus sem in hendrerit. Maecenas ullamcorper neque vitae felis facilisis eleifend a dapibus leo. Aliquam erat volutpat. Sed odio justo, pellentesque at molestie volutpat, elementum sed nulla. Sed ut metus lacus. Nullam hendrerit egestas lectus at scelerisque. Proin nulla sapien, blandit sed condimentum et, condimentum eu lectus. Cras id velit in leo elementum mollis in pellentesque ligula. </p>
|
||||
<h2>Nullam at velit ipsum, dapibus scelerisque dui</h2>
|
||||
<p>Integer eleifend est at odio elementum condimentum a at sem. Morbi sed ipsum ut nulla vehicula vestibulum mollis ac urna. Proin sit amet molestie risus. Proin in lorem vitae magna malesuada congue quis a est. Nunc porta, odio non pellentesque laoreet, justo felis ultricies dui, et volutpat ligula odio ac arcu. Etiam consequat imperdiet tortor. Quisque accumsan viverra justo, id luctus odio pharetra non. Fusce eget arcu vel diam pretium rhoncus non vitae felis. Nulla eget elit sit amet ante consectetur faucibus. Donec at tellus eget elit sagittis euismod. Vestibulum adipiscing leo a elit pellentesque congue. Pellentesque rutrum vulputate dui, non fringilla felis sollicitudin et. Nullam justo libero, commodo vitae adipiscing non, pharetra et dolor. Phasellus ac arcu ultricies nibh fermentum dictum vitae non lectus. Pellentesque porttitor tortor in odio tempor quis lacinia quam rhoncus. Aenean pharetra tempor leo, eget dignissim arcu vehicula vitae. </p>
|
||||
<p>Ut eu felis eu quam semper pellentesque. Nullam ultricies orci ut nunc pulvinar suscipit. Fusce tincidunt adipiscing elit, ac scelerisque nulla sollicitudin quis. Morbi euismod laoreet tortor, ut ultrices turpis fermentum ac. Maecenas venenatis sodales nisl id vulputate. Ut dapibus venenatis dui viverra viverra. Phasellus rutrum, enim in consectetur pharetra, tortor arcu pharetra odio, id malesuada sapien justo vel nisi. Nulla eu euismod risus. Nam ornare laoreet nisi vitae pretium. In in nunc urna. Duis accumsan nulla semper est aliquam vitae pharetra turpis volutpat. Quisque dignissim ante a felis pulvinar commodo. Pellentesque vel dictum odio. Ut dapibus venenatis elit vel venenatis. Pellentesque sed risus et massa dapibus interdum. Integer accumsan volutpat quam ac sollicitudin. Curabitur ac dui ac erat dignissim molestie. Nulla et tortor diam, sed ullamcorper nisl. Ut sollicitudin augue non nibh egestas tempor. Cras mattis, velit eu aliquet bibendum, justo augue gravida arcu, nec molestie eros nisi eu orci. </p>
|
||||
<p>Vivamus sed ante ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent diam justo, porttitor eget tincidunt vel, vulputate non nunc. Quisque lobortis suscipit mi, eu tincidunt nunc consequat quis. Aenean vestibulum ligula at dolor adipiscing sit amet luctus nunc feugiat. Aliquam vestibulum consequat lacus, et aliquet risus aliquam et. Mauris non sodales diam. Sed sed rutrum libero. Vestibulum mauris turpis, adipiscing eu facilisis eget, mollis ut metus. Vestibulum eu dui sem, at egestas mi. Cras dignissim cursus diam, in adipiscing neque pellentesque quis. Morbi porta gravida lectus, sit amet facilisis justo euismod at. Duis ante sapien, viverra et hendrerit sit amet, volutpat eu metus. In nec tellus leo, vestibulum dignissim dui. Maecenas eu cursus nibh. Maecenas et ipsum at urna gravida varius. Vestibulum eu nisi metus, eu bibendum erat. Pellentesque scelerisque gravida gravida. Maecenas eget enim in dolor fermentum venenatis tincidunt eu risus. </p>
|
||||
<p>Sed ultrices posuere porta. Vivamus neque dolor, consectetur eu euismod et, vulputate ut lorem. Praesent commodo nisi vel tortor lobortis et vulputate arcu ornare. Integer elementum hendrerit lectus a sollicitudin. Nulla facilisi. Pellentesque ut risus libero, ac commodo ligula. Fusce eget ligula eget enim mattis egestas sed a odio. Vestibulum placerat dolor ut elit interdum malesuada fermentum turpis dictum. Duis fringilla nibh sed diam aliquet quis vulputate turpis congue. Morbi rhoncus erat accumsan est euismod vitae molestie dui facilisis. Maecenas nec est urna. </p>
|
||||
<p>Donec feugiat egestas diam, eget sodales libero porta vel. Etiam in dolor a lacus commodo feugiat eget eget nisl. Integer sed quam risus. In viverra viverra eros, id vehicula justo gravida eu. Integer consequat velit ac tortor elementum ac viverra eros ultrices. Quisque in imperdiet dolor. Sed vel arcu sapien, non malesuada ante. Sed ornare fringilla faucibus. Pellentesque orci turpis, venenatis at dapibus nec, luctus sit amet augue. Pellentesque et justo elit. Fusce non augue felis. Curabitur a ante vitae justo consectetur vulputate. Maecenas ullamcorper vehicula risus nec rutrum. Integer eros augue, pretium sed euismod non, volutpat in libero. Aenean nec nisi nec nisl dictum feugiat eu at magna. Nam urna nisl, facilisis quis commodo convallis, malesuada sit amet nunc. Donec tincidunt faucibus nibh vitae cursus. Pellentesque eleifend leo facilisis nunc dignissim auctor. Donec leo eros, interdum eget dignissim et, sodales ut sapien. Aliquam vel odio nisi, ut laoreet lorem. </p>
|
||||
<p>Aliquam tempor arcu vel turpis sodales vitae facilisis elit pretium. Etiam a turpis augue. Curabitur at purus in libero ornare malesuada a id nibh. Curabitur arcu ligula, mattis at hendrerit et, porta at diam. Sed fringilla nibh et sem fermentum a blandit purus laoreet. Donec lectus nulla, commodo vel blandit non, semper ac metus. Mauris auctor, nisi nec lobortis pretium, lacus augue porta urna, eget placerat augue erat at turpis. Nullam sagittis rhoncus ullamcorper. Proin fringilla erat nec turpis laoreet ac auctor ante accumsan. Sed nibh massa, consequat ac ornare eget, facilisis ut libero. Donec lobortis imperdiet magna ut blandit. Praesent congue, diam non aliquam rhoncus, libero odio malesuada nisi, vitae feugiat ipsum nulla eu leo. Donec dui lacus, adipiscing id vehicula posuere, gravida eu metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut felis in erat cursus consequat ac in turpis. Phasellus mauris urna, tincidunt at aliquet et, facilisis at orci. </p>
|
||||
<h2>Sed et augue eu felis ornare blandit et eu mi</h2>
|
||||
<p>Duis sit amet diam eros. Sed elementum rhoncus pretium. Nam vestibulum turpis vitae ligula fermentum venenatis. Aliquam tincidunt dolor eget leo tristique scelerisque. Sed neque dui, pellentesque eu faucibus sed, ornare sed dui. Sed pharetra, mi vitae euismod lacinia, leo odio aliquet erat, id venenatis nulla odio vitae velit. Nunc id erat nec sapien lobortis malesuada. Morbi nec dapibus leo. Curabitur orci nisl, viverra in placerat a, semper eu sem. Etiam bibendum sodales magna ut varius. Praesent mattis, enim eget aliquam fermentum, arcu ligula scelerisque sem, eu ultrices lectus nunc a turpis. Aliquam molestie ornare ultricies. Praesent dictum tincidunt semper. Vestibulum vulputate mattis neque, et imperdiet nunc ullamcorper tincidunt. Sed sed risus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In arcu diam, tincidunt nec adipiscing eu, accumsan sed ipsum. Aenean dictum nunc sed sem posuere vitae ultrices dui ornare. </p>
|
||||
<p>Nulla facilisi. Pellentesque fermentum dapibus dolor, sed porttitor ipsum egestas ut. Donec dolor leo, fringilla in consectetur eu, bibendum nec justo. Pellentesque non sagittis ipsum. Fusce odio felis, ornare lobortis mattis vel, convallis ut lectus. In sed diam vitae ante sollicitudin consectetur. Pellentesque fringilla lacus dolor. Praesent sed ipsum erat. Pellentesque sit amet elit eget risus ullamcorper bibendum in et arcu. Vestibulum sed augue diam, a rhoncus sem. Quisque luctus est non ipsum venenatis ullamcorper. Aenean pulvinar, lectus ut ullamcorper feugiat, nulla tellus lobortis erat, ac consectetur metus risus non mi. Quisque a arcu vitae tellus sodales iaculis. Etiam scelerisque tincidunt dui quis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
<p>Mauris laoreet consectetur mauris, in cursus sapien sagittis a. Curabitur ornare volutpat mauris, vel ultrices leo dignissim sed. Sed malesuada, massa sed interdum tincidunt, mi quam euismod erat, at volutpat elit augue at lorem. Vivamus venenatis adipiscing augue, ut porttitor magna semper nec. Mauris rhoncus lobortis porta. Mauris tempus tellus in neque semper nec semper velit tristique. Maecenas eget felis eu justo varius convallis id nec neque. Aliquam non nisi sit amet risus viverra imperdiet. In quis nisi nisi. Mauris eros lectus, volutpat nec vestibulum sit amet, euismod non mauris. </p>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
<!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="../../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.grid.js"></script>
|
||||
<script type="text/javascript" src="jquery.jlayout.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(function($)
|
||||
{
|
||||
$('#columns').width(800).height(400).layout({
|
||||
resize: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#columns {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin-right: 2em;
|
||||
text-align: justify;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
|
||||
<div id="columns">
|
||||
<div class="col">
|
||||
<h2>Column 1</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque neque erat, fringilla id, pretium imperdiet, sagittis et, urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam consequat ullamcorper nulla. Nunc felis lacus, mollis in, mattis a, aliquam at, mi. Quisque laoreet vehicula felis. Nullam purus nulla, accumsan ut, tincidunt vitae, dapibus ac, ante. Proin at pede eget sem ullamcorper porta. Sed quis mauris. Vivamus interdum. Ut eu dolor vel nisi auctor tincidunt. Fusce adipiscing mollis augue. Cras a nunc a elit dictum tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam molestie, leo nec faucibus egestas, est sapien varius velit, vitae posuere enim mi et arcu. Sed facilisis est at urna.</p>
|
||||
|
||||
<p>Mauris at dolor. Nulla ultricies congue enim. Ut laoreet, ipsum id rutrum mattis, odio sem iaculis neque, eu gravida diam nulla ut nibh. Etiam cursus elementum libero. Suspendisse quis tellus id sapien elementum elementum. Mauris luctus orci eu lorem. Vivamus eu metus. Donec rhoncus porttitor massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean id tellus sed mauris lacinia hendrerit. Quisque ultrices. Donec a dui eget orci malesuada imperdiet.</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h2>Column 2</h2>
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eget dui. Sed at sem. Vestibulum pharetra suscipit sapien. Aliquam tortor lacus, consequat a, consectetuer quis, adipiscing sit amet, quam. Pellentesque id elit ut dolor iaculis tincidunt. Mauris pharetra, quam vitae pharetra viverra, metus nisi convallis diam, cursus rhoncus eros felis a enim. Duis aliquam molestie urna. In commodo cursus risus. Praesent sem nisi, commodo quis, egestas vel, auctor congue, magna. Nulla facilisi. Quisque facilisis, mauris sit amet semper sollicitudin, pede elit ultricies nunc, ac condimentum odio sapien id sem. In hac habitasse platea dictumst. Praesent rhoncus, neque eu dictum tristique, felis est aliquam est, in lobortis arcu justo non diam. Integer ligula pede, adipiscing at, mattis sit amet, aliquam vel, justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
|
||||
|
||||
<p>Duis urna. Donec porta, nisl vel egestas euismod, lorem ipsum suscipit ligula, nec venenatis leo lorem non dolor. Sed fringilla mauris at elit. Suspendisse potenti. Proin magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel arcu. Donec dapibus mi vitae metus. Ut vestibulum nunc id nisi. Nunc convallis, tellus at fringilla pulvinar, lacus dui gravida risus, id sollicitudin nibh urna sit amet purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="http://www.bramstein.com/projects/jlayout/">Back to the jLayout project homepage</a>
|
||||
</body>
|
||||
</html>
|
||||
303
admin/thirdparty/jlayout/examples/examples.html
vendored
303
admin/thirdparty/jlayout/examples/examples.html
vendored
|
|
@ -1,303 +0,0 @@
|
|||
<!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="../../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="jlayout.grid.js"></script>
|
||||
<script type="text/javascript" src="jlayout.flexgrid.js"></script>
|
||||
<script type="text/javascript" src="jlayout.flow.js"></script>
|
||||
<script type="text/javascript" src="jquery.jlayout.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(function($)
|
||||
{
|
||||
$('.grid').layout();
|
||||
$('.flex-grid').layout();
|
||||
$('.column').layout();
|
||||
$('.border').layout();
|
||||
$('.mpb').layout();
|
||||
|
||||
// we call the inner layout first
|
||||
$('.nested-center').layout();
|
||||
|
||||
// then we set the outer one to a fixed size, and turn resizing off
|
||||
$('.nested').width(600).height(400).layout({resize: false});
|
||||
|
||||
|
||||
// we can also specify everything in code; in this example
|
||||
// we create two columns of equal size.
|
||||
$('.code').layout({
|
||||
type: 'grid',
|
||||
items: [
|
||||
$('.col-1').width(400),
|
||||
$('.col-2').width(400)
|
||||
],
|
||||
vgap: 3,
|
||||
hgap: 3
|
||||
});
|
||||
|
||||
$('#flow-left').layout();
|
||||
|
||||
$('.horizontal').layout();
|
||||
$('.vertical').layout();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.grid, .flex-grid, .column, .border, .mpb, .nested-center, .nested, .code, .horizontal, .vertical {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.c {
|
||||
background-color: rgb(220,220,220);
|
||||
border: 1px solid rgb(200,200,200);
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.e {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.d {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.nested-center, .mpb {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mpb .center {
|
||||
margin-left: 5em;
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
.mpb .east {
|
||||
border-right: 2em solid green;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
.mpb .north {
|
||||
padding-top: 2em;
|
||||
height: 2em;
|
||||
width: 35em;
|
||||
}
|
||||
|
||||
.col-1, .col-2 {
|
||||
padding-right: 2em;
|
||||
text-align: justify;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#flow-left {
|
||||
overflow: auto;
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#flow-left div {
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.large {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
|
||||
<a name="simple-grid"></a>
|
||||
<h1>2x2 grid</h1>
|
||||
<div class="grid {layout: {type: 'grid', hgap: 3, vgap: 3, columns: 2, rows: 2}}">
|
||||
<div class="c">
|
||||
One
|
||||
</div>
|
||||
<div class="c">
|
||||
Two
|
||||
</div>
|
||||
<div class="c">
|
||||
Three
|
||||
</div>
|
||||
<div class="c">
|
||||
Four
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>3x2 flex-grid</h1>
|
||||
<div class="flex-grid {layout: {type: 'flexGrid', hgap: 3, vgap: 3, columns: 3, rows: 2}}">
|
||||
<div class="c">
|
||||
One
|
||||
</div>
|
||||
<div class="c d">
|
||||
Two
|
||||
</div>
|
||||
<div class="c">
|
||||
Three
|
||||
</div>
|
||||
<div class="c">
|
||||
Four
|
||||
</div>
|
||||
<div class="c d">
|
||||
Five
|
||||
</div>
|
||||
<div class="c">
|
||||
Six
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a name="columns"></a>
|
||||
<h1>Automatic columns</h1>
|
||||
<div class="column {layout: {type: 'grid', hgap: 3, vgap: 3}}">
|
||||
<div class="c">
|
||||
One
|
||||
</div>
|
||||
<div class="c">
|
||||
Two
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a name="border"></a>
|
||||
<h1>Border</h1>
|
||||
<div class="border {layout: {type: 'border', hgap: 3, vgap: 3}}">
|
||||
<div class="c center">
|
||||
Center
|
||||
</div>
|
||||
<div class="c east">
|
||||
East
|
||||
</div>
|
||||
<div class="c west">
|
||||
West
|
||||
</div>
|
||||
<div class="c north">
|
||||
North
|
||||
</div>
|
||||
<div class="c south">
|
||||
South
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a name="mpb"></a>
|
||||
<h1>Margin, Padding & Border</h1>
|
||||
<div class="mpb {layout: {type: 'border', hgap: 3, vgap: 3}}">
|
||||
<div class="c center">
|
||||
Center + Margin-Left
|
||||
</div>
|
||||
<div class="c north">
|
||||
North + Padding-Top
|
||||
</div>
|
||||
<div class="c east">
|
||||
East + Border-Right
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a name="nested"></a>
|
||||
<h1>Nested layouts</h1>
|
||||
<div class="nested {layout: {type: 'border', hgap: 3, vgap: 3}}">
|
||||
<div class="center nested-center {layout: {type: 'grid', hgap: 3, vgap: 3, columns: 2, rows: 2}}">
|
||||
<div class="c">
|
||||
One
|
||||
</div>
|
||||
<div class="c">
|
||||
Two
|
||||
</div>
|
||||
<div class="c">
|
||||
Three
|
||||
</div>
|
||||
<div class="c">
|
||||
Four
|
||||
</div>
|
||||
</div>
|
||||
<div class="c east">
|
||||
East
|
||||
</div>
|
||||
<div class="c west">
|
||||
West
|
||||
</div>
|
||||
<div class="c north">
|
||||
North
|
||||
</div>
|
||||
<div class="c south">
|
||||
South
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a name="code"></a><h1>Programmatic grid (columns)</h1>
|
||||
<div class="code">
|
||||
<div class="col-1">
|
||||
<h2>Column 1</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque neque erat, fringilla id, pretium imperdiet, sagittis et, urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam consequat ullamcorper nulla. Nunc felis lacus, mollis in, mattis a, aliquam at, mi. Quisque laoreet vehicula felis. Nullam purus nulla, accumsan ut, tincidunt vitae, dapibus ac, ante. Proin at pede eget sem ullamcorper porta. Sed quis mauris. Vivamus interdum. Ut eu dolor vel nisi auctor tincidunt. Fusce adipiscing mollis augue. Cras a nunc a elit dictum tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam molestie, leo nec faucibus egestas, est sapien varius velit, vitae posuere enim mi et arcu. Sed facilisis est at urna.</p>
|
||||
|
||||
<p>Mauris at dolor. Nulla ultricies congue enim. Ut laoreet, ipsum id rutrum mattis, odio sem iaculis neque, eu gravida diam nulla ut nibh. Etiam cursus elementum libero. Suspendisse quis tellus id sapien elementum elementum. Mauris luctus orci eu lorem. Vivamus eu metus. Donec rhoncus porttitor massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean id tellus sed mauris lacinia hendrerit. Quisque ultrices. Donec a dui eget orci malesuada imperdiet.</p>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<h2>Column 2</h2>
|
||||
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla eget dui. Sed at sem. Vestibulum pharetra suscipit sapien. Aliquam tortor lacus, consequat a, consectetuer quis, adipiscing sit amet, quam. Pellentesque id elit ut dolor iaculis tincidunt. Mauris pharetra, quam vitae pharetra viverra, metus nisi convallis diam, cursus rhoncus eros felis a enim. Duis aliquam molestie urna. In commodo cursus risus. Praesent sem nisi, commodo quis, egestas vel, auctor congue, magna. Nulla facilisi. Quisque facilisis, mauris sit amet semper sollicitudin, pede elit ultricies nunc, ac condimentum odio sapien id sem. In hac habitasse platea dictumst. Praesent rhoncus, neque eu dictum tristique, felis est aliquam est, in lobortis arcu justo non diam. Integer ligula pede, adipiscing at, mattis sit amet, aliquam vel, justo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
|
||||
|
||||
<p>Duis urna. Donec porta, nisl vel egestas euismod, lorem ipsum suscipit ligula, nec venenatis leo lorem non dolor. Sed fringilla mauris at elit. Suspendisse potenti. Proin magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vel arcu. Donec dapibus mi vitae metus. Ut vestibulum nunc id nisi. Nunc convallis, tellus at fringilla pulvinar, lacus dui gravida risus, id sollicitudin nibh urna sit amet purus.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h1>Flow layout (left)</h1>
|
||||
|
||||
<div id="flow-left" class="{layout: {type: 'flow', resize: false, alignment: 'left'}}">
|
||||
<div class="c small">
|
||||
One
|
||||
</div>
|
||||
<div class="c medium">
|
||||
Two
|
||||
</div>
|
||||
<div class="c medium">
|
||||
Three
|
||||
</div>
|
||||
<div class="c large">
|
||||
Four
|
||||
</div>
|
||||
<div class="c small">
|
||||
Five
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Horizontal layout</h1>
|
||||
<div class="horizontal {layout: {type: 'flexGrid', rows: 1, hgap: 5, vgap: 5}}">
|
||||
<div class="c">
|
||||
One
|
||||
</div>
|
||||
<div class="c d">
|
||||
Two
|
||||
</div>
|
||||
<div class="c">
|
||||
Three
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>Vertical layout</h1>
|
||||
<div class="vertical {layout: {type: 'flexGrid', columns: 1, hgap: 5, vgap: 5}}">
|
||||
<div class="c">
|
||||
One
|
||||
</div>
|
||||
<div class="c e">
|
||||
Two
|
||||
</div>
|
||||
<div class="c">
|
||||
Three
|
||||
</div>
|
||||
</div>
|
||||
<a href="http://www.bramstein.com/projects/jlayout/">Back to the jLayout project homepage</a>
|
||||
</body>
|
||||
</html>
|
||||
104
admin/thirdparty/jlayout/examples/flowlayout.html
vendored
104
admin/thirdparty/jlayout/examples/flowlayout.html
vendored
|
|
@ -1,104 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Flow Layout example</title>
|
||||
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
|
||||
<script type="text/javascript" src="../../lib/jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../lib/jquery-ui-1.7.2.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.flow.js"></script>
|
||||
<script type="text/javascript" src="jquery.jlayout.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(function($) {
|
||||
var flow = $('#flow'),
|
||||
align = 'left';
|
||||
|
||||
function layout() {
|
||||
flow.layout({alignment: align});
|
||||
}
|
||||
|
||||
// Note the "appendTo" and "helper" options. The "appendTo" options is necessary
|
||||
// because otherwise the layout would also lay out the dragged item. The
|
||||
// "appendTo" option only works when "helper" has been set to 'clone', so we
|
||||
// need to set that too.
|
||||
flow.sortable({
|
||||
appendTo: 'body',
|
||||
helper: 'clone',
|
||||
update: layout,
|
||||
change: layout
|
||||
});
|
||||
|
||||
$('#left').click(function () {
|
||||
align = 'left';
|
||||
layout();
|
||||
});
|
||||
|
||||
|
||||
$('#right').click(function () {
|
||||
align = 'right';
|
||||
layout();
|
||||
});
|
||||
|
||||
$('#center').click(function () {
|
||||
align = 'center';
|
||||
layout();
|
||||
});
|
||||
|
||||
layout();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#flow {
|
||||
border: 1px solid red;
|
||||
overflow: none;
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.c {
|
||||
background-color: rgb(220,220,220);
|
||||
border: 1px solid rgb(200,200,200);
|
||||
text-align: center;
|
||||
font-size: 3em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.ui-sortable-placeholder {
|
||||
border: 1px solid red;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.d {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
|
||||
.e {
|
||||
font-size: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1><a href="http://www.bramstein.com/projects/jlayout/">jLayout project homepage</a></h1>
|
||||
<button id="left">Left</button><button id="center">Center</button><button id="right">Right</button>
|
||||
<div id="flow" class="{layout: {type: 'flow', resize: false}}">
|
||||
<div class="c e">
|
||||
One
|
||||
</div>
|
||||
<div class="c">
|
||||
Two
|
||||
</div>
|
||||
<div class="c">
|
||||
Three
|
||||
</div>
|
||||
<div class="c d">
|
||||
Four
|
||||
</div>
|
||||
<div class="c e">
|
||||
Five
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
327
admin/thirdparty/jlayout/examples/jquery-ui.html
vendored
327
admin/thirdparty/jlayout/examples/jquery-ui.html
vendored
|
|
@ -1,327 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>jLayout jQuery UI integration</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<script type="text/javascript" src="../../lib/jquery-1.4.2.js"></script>
|
||||
<script type="text/javascript" src="../../lib/jquery-ui-1.7.2.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="jlayout.grid.js"></script>
|
||||
<script type="text/javascript" src="jlayout.flexgrid.js"></script>
|
||||
<script type="text/javascript" src="jlayout.flow.js"></script>
|
||||
<script type="text/javascript" src="jquery.jlayout.js"></script>
|
||||
<script type="text/javascript">
|
||||
jQuery(function($) {
|
||||
var container = $('body'),
|
||||
west = $('body > .west'),
|
||||
east = $('body > .east'),
|
||||
center = $('body > .center');
|
||||
|
||||
|
||||
function layout() {
|
||||
container.layout();
|
||||
$('#accordion').accordion('resize');
|
||||
|
||||
// This ensures that the center is never smaller than 400 pixels.
|
||||
east.resizable('option', 'maxWidth', (center.width() + east.width()) - 400);
|
||||
west.resizable('option', 'maxWidth', (center.width() + west.width()) - 400);
|
||||
}
|
||||
|
||||
// Make the west and east panels resizable
|
||||
west.resizable({
|
||||
handles: 'e',
|
||||
stop: layout,
|
||||
helper: 'ui-resizable-helper-west',
|
||||
minWidth: 200
|
||||
});
|
||||
|
||||
east.resizable({
|
||||
handles: 'w',
|
||||
stop: layout,
|
||||
helper: 'ui-resizable-helper-east',
|
||||
minWidth: 200
|
||||
});
|
||||
|
||||
// Lay out the west panel first
|
||||
west.layout();
|
||||
|
||||
// Then do the main layout.
|
||||
layout();
|
||||
|
||||
// Hook up the re-layout to the window resize event.
|
||||
$(window).resize(layout);
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Below here is all demo code, which has no relation to the layout.
|
||||
*/
|
||||
$('#accordion').accordion({header: 'h3', fillSpace: true});
|
||||
|
||||
// Set up the tabs in the center panel and remove the unwanted corners class
|
||||
center.tabs();
|
||||
center.children('ul').removeClass('ui-corner-all');
|
||||
|
||||
$.extend($.ui.slider.defaults, {
|
||||
range: "min",
|
||||
animate: true,
|
||||
orientation: "vertical"
|
||||
});
|
||||
|
||||
$("#eq > span").each(function() {
|
||||
var value = parseInt($(this).text());
|
||||
$(this).empty();
|
||||
$(this).slider({
|
||||
value: value
|
||||
});
|
||||
});
|
||||
|
||||
$("#progressbar").progressbar({
|
||||
value: 59
|
||||
});
|
||||
|
||||
$('#datepicker').datepicker();
|
||||
});
|
||||
</script>
|
||||
<link type="text/css" href="../../lib/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
|
||||
<style>
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
font-size: 0.9em;
|
||||
font-family: Verdana, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.north, .south, .west, .east, .center {
|
||||
display: inline-block;
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
.north {
|
||||
height: 3em;
|
||||
background-color: #3F3F3F;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.south {
|
||||
height: 2em;
|
||||
background-color: #3F3F3F;
|
||||
border-top: 1px solid black;
|
||||
font-size: 0.65em;
|
||||
color: rgb(200, 200, 200);
|
||||
padding: 0.5em 2em;
|
||||
}
|
||||
|
||||
.east {
|
||||
width: 25em;
|
||||
height: 100%;
|
||||
font-size: 0.78em;
|
||||
}
|
||||
|
||||
.west {
|
||||
width: 20em;
|
||||
font-size: 0.78em;
|
||||
}
|
||||
|
||||
.ui-resizable-handle {
|
||||
background-color: #BBBBBB;
|
||||
border-left: 1px solid #9A9A9A;
|
||||
border-right: 1px solid #9A9A9A;
|
||||
}
|
||||
|
||||
.ui-resizable-handle:hover {
|
||||
background-color: #bbbbcd;
|
||||
border-left: 1px solid #afafc0;
|
||||
border-right: 1px solid #afafc0;
|
||||
}
|
||||
|
||||
.ui-resizable-e {
|
||||
right: -6px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.ui-resizable-helper-west {
|
||||
border-right: 6px solid #bbbbcd;
|
||||
}
|
||||
|
||||
.ui-resizable-helper-east {
|
||||
border-left: 6px solid #bbbbcd;
|
||||
}
|
||||
|
||||
.ui-resizable-w {
|
||||
left: -6px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.ui-resizable-e {
|
||||
right: -6px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.ui-resizable-helper-east {
|
||||
border-right: 6px solid #bbbbcd;
|
||||
}
|
||||
|
||||
.center {
|
||||
font-size: 0.9em;
|
||||
overflow: auto;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.ui-tabs {
|
||||
padding: 0em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.ui-tabs-nav {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.west .panel {
|
||||
width: 15em;
|
||||
display: inline-block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.panel p {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: lightblue;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.north h1 {
|
||||
font-size: 1em;
|
||||
color: white;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
#eq span {
|
||||
font-size: 0.6em;
|
||||
height: 120px;
|
||||
float: left;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
#progressbar {
|
||||
font-size: 0.6em;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
#datepicker {
|
||||
margin: 0.5em;
|
||||
font-size: 0.78em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="{layout: {type: 'border', resize: false, hgap: 6}}">
|
||||
<div class="north">
|
||||
<h1><span class="highlight">jLayout</span> & jQuery UI Integration Demo</h1>
|
||||
</div>
|
||||
<div class="center">
|
||||
<ul>
|
||||
<li><a href="#tabs-1">Nunc tincidunt</a></li>
|
||||
<li><a href="#tabs-2">Proin dolor</a></li>
|
||||
<li><a href="#tabs-3">Aenean lacinia</a></li>
|
||||
</ul>
|
||||
<div id="tabs-1">
|
||||
<h2>jLayout & jQuery UI Integration Demo</h2>
|
||||
<p>Please visit the <a href="">jLayout website</a>, or the <a href="">jLayout jQuery plugin website</a> for more information.</p>
|
||||
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
|
||||
|
||||
</div>
|
||||
<div id="tabs-2">
|
||||
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
|
||||
</div>
|
||||
<div id="tabs-3">
|
||||
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
|
||||
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="west {layout: {type: 'grid', columns: 1, resize: false}}">
|
||||
<div class="panel">
|
||||
<div class="ui-state-default" style="padding:4px;">Panel 1</div>
|
||||
<div id="datepicker"></div>
|
||||
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="ui-state-default" style="padding:4px;">Panel 2</div>
|
||||
<div id="eq">
|
||||
<span>88</span>
|
||||
<span>77</span>
|
||||
<span>55</span>
|
||||
<span>33</span>
|
||||
<span>40</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="ui-state-default" style="padding:4px;">Panel 3</div>
|
||||
<div id="progressbar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="east">
|
||||
<div id="accordion">
|
||||
<h3><a href="#">Section 1</a></h3>
|
||||
<div>
|
||||
<p>
|
||||
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
|
||||
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
|
||||
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
|
||||
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
|
||||
</p>
|
||||
</div>
|
||||
<h3><a href="#">Section 2</a></h3>
|
||||
<div>
|
||||
<p>
|
||||
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
|
||||
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
|
||||
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
|
||||
suscipit faucibus urna.
|
||||
</p>
|
||||
</div>
|
||||
<h3><a href="#">Section 3</a></h3>
|
||||
<div>
|
||||
<p>
|
||||
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
|
||||
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
|
||||
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
|
||||
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
|
||||
</p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3><a href="#">Section 4</a></h3>
|
||||
<div>
|
||||
<p>
|
||||
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
|
||||
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
|
||||
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
|
||||
mauris vel est.
|
||||
</p>
|
||||
<p>
|
||||
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
|
||||
inceptos himenaeos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="south">Copyright 2009 - <a href="http://www.bramstein.com/">Bram Stein</a></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user