Andreas Hocevar
244 lines
7.0 KiB
HTML
244 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Copyright 2010 The Closure Library Authors. All Rights Reserved.
|
|
|
|
Use of this source code is governed by the Apache License, Version 2.0.
|
|
See the COPYING file for details.
|
|
-->
|
|
<head>
|
|
<title>goog.ui.SplitPane</title>
|
|
<script src="../base.js"></script>
|
|
|
|
<script>
|
|
goog.require('goog.dom');
|
|
goog.require('goog.events');
|
|
goog.require('goog.ui.Component');
|
|
goog.require('goog.ui.Ratings');
|
|
goog.require('goog.ui.ServerChart');
|
|
goog.require('goog.ui.SplitPane');
|
|
goog.require('goog.ui.SplitPane.Orientation');
|
|
</script>
|
|
<link rel="stylesheet" href="css/demo.css">
|
|
<style class="text/css">
|
|
|
|
/* NOTE: A bug in Safari 3 requires these css definitions to be in here.
|
|
Do not move these to a seperate file without testing safari 3! */
|
|
|
|
/* These are recommended styles for the default splitpane */
|
|
.goog-splitpane {
|
|
height: 200px;
|
|
width: 300px;
|
|
}
|
|
|
|
.goog-splitpane-handle {
|
|
border-left: 1px solid gray;
|
|
border-right: 1px solid gray;
|
|
background: #ccc;
|
|
position: absolute;
|
|
}
|
|
|
|
.goog-splitpane-handle-horizontal {
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.goog-splitpane-handle-vertical {
|
|
cursor: row-resize;
|
|
}
|
|
|
|
.goog-splitpane-first-container,
|
|
.goog-splitpane-second-container {
|
|
border: 5px solid black;
|
|
overflow: auto;
|
|
position: absolute;
|
|
}
|
|
|
|
/* The rest of these styles are for the splitpane demo, splitpane.html */
|
|
|
|
/* Example of styling a particular handle */
|
|
#another-splitpane .goog-splitpane-handle {
|
|
background: gray;
|
|
}
|
|
|
|
/* The following styles are for the rating widget, which is used in the splipane
|
|
example. These have nothing to do with the splitpane! */
|
|
.goog-ratings {
|
|
display: block;
|
|
float: left;
|
|
height: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.goog-ratings-star {
|
|
display: block;
|
|
float: left;
|
|
padding-left: 13px;
|
|
height: 19px;
|
|
cursor: pointer;
|
|
background-image: url('../images/ratingstars.gif');
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.goog-ratings-firststar-off {
|
|
padding-left: 20px;
|
|
background-position: 0px 0px;
|
|
}
|
|
|
|
.goog-ratings-firststar-on {
|
|
padding-left: 20px;
|
|
background-position: 0px -20px;
|
|
}
|
|
|
|
.goog-ratings-midstar-off {
|
|
background-position: 0px -40px;
|
|
}
|
|
|
|
.goog-ratings-midstar-on {
|
|
background-position: 0px -60px;
|
|
}
|
|
|
|
.goog-ratings-laststar-off {
|
|
padding-left: 18px;
|
|
background-position: 0px -80px;
|
|
}
|
|
|
|
.goog-ratings-laststar-on {
|
|
padding-left: 18px;
|
|
background-position: 0px -100px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>goog.ui.SplitPane</h1>
|
|
Left Component Size: <input type='text' id='firstComponentSize' size='4' value=''>
|
|
Width: <input type='text' id='newWidth' size='5' value='300'>
|
|
Height: <input type='text' id='newHeight' size='5' value='200'>
|
|
<br>
|
|
<input type='radio' id='select1' name='selectSplitter' checked='true' value='first'>First One
|
|
<input type='radio' id='select2' name='selectSplitter' value='second'>Second One
|
|
<input type='button' value='Update Splitter' onclick='updatePane_()'>
|
|
<input type='button' value='Change Orientation' onclick='changeOrientation_()'>
|
|
<p>
|
|
<div class='goog-splitpane' id='anotherSplitter'>
|
|
<div class='goog-splitpane-first-container'>
|
|
Left Frame
|
|
</div>
|
|
<div class='goog-splitpane-second-container'>
|
|
<iframe style='z-index:10; width:100%; height:100%' src='http://www.google.com/'></iframe>
|
|
</div>
|
|
<div class='goog-splitpane-handle'></div>
|
|
</div>
|
|
First Component Width: <span id='componentOneWidth'></span>
|
|
|
|
<div id="test1">
|
|
<select name="sel">
|
|
<option>Aweful</option>
|
|
<option>Bad</option>
|
|
<option selected>Ok</option>
|
|
<option>Good</option>
|
|
<option>Excellent</option>
|
|
</select>
|
|
</div>
|
|
<p/>
|
|
|
|
|
|
<p/>
|
|
<div id="chart"></div>
|
|
|
|
<script>
|
|
|
|
/**
|
|
* Show the width of the first splitpane on event changes.
|
|
* @param {goog.events.Event} e The event
|
|
*/
|
|
var showWidth_ = function(e) {
|
|
var el = document.getElementById('componentOneWidth');
|
|
if (el) {
|
|
goog.dom.setTextContent(el, e.target.getFirstComponentSize());
|
|
}
|
|
}
|
|
|
|
var lhs = new goog.ui.Component();
|
|
var rhs = new goog.ui.Component();
|
|
|
|
// Set up splitpane with already existing DOM.
|
|
var splitpane1 = new goog.ui.SplitPane(lhs, rhs,
|
|
goog.ui.SplitPane.Orientation.HORIZONTAL);
|
|
|
|
// Listen for change events and call showWidth.
|
|
goog.events.listen(splitpane1, goog.ui.Component.EventType.CHANGE,
|
|
showWidth_);
|
|
|
|
|
|
splitpane1.setInitialSize(100);
|
|
splitpane1.setHandleSize(10);
|
|
splitpane1.decorate(document.getElementById('anotherSplitter'));
|
|
splitpane1.setSize(new goog.math.Size(600,300));
|
|
|
|
var rw1 = new goog.ui.Ratings();
|
|
rw1.decorate(document.getElementById('test1'));
|
|
|
|
// Create a barchart to put in a splitpane
|
|
bar = new goog.ui.ServerChart(goog.ui.ServerChart.ChartType.BAR, 180, 104);
|
|
bar.addDataSet([8,23,7], '008000');
|
|
bar.addDataSet([31,11,7], 'ffcc33');
|
|
bar.addDataSet([2,43,70,3,43,74], '3072f3');
|
|
bar.setLeftLabels(['','20K','','60K','','100K']);
|
|
bar.setXLabels(['O','N','D']);
|
|
bar.setMaxValue(100);
|
|
|
|
var splitpane2 = new goog.ui.SplitPane(rw1, bar,
|
|
goog.ui.SplitPane.Orientation.HORIZONTAL);
|
|
splitpane2.render();
|
|
|
|
splitpane2.setContinuousResize(false);
|
|
|
|
/**
|
|
* Change the left splitter size or size a split pane.
|
|
* This method reads the form fields to choose the splitter
|
|
* and get the new values.
|
|
*/
|
|
var updatePane_ = function() {
|
|
var componentSizeValue =
|
|
document.getElementById('firstComponentSize').value;
|
|
var width = document.getElementById('newWidth').value;
|
|
var height = document.getElementById('newHeight').value;
|
|
var s1Checked = document.getElementById('select1').checked;
|
|
// Which splitter to update.
|
|
var whichSplitter = (s1Checked) ? splitpane1 : splitpane2;
|
|
|
|
var componentSize;
|
|
if ('' != componentSizeValue) {
|
|
componentSize = parseInt(componentSizeValue, 10);
|
|
}
|
|
else {
|
|
componentSize = whichSplitter.getFirstComponentSize();
|
|
}
|
|
whichSplitter.setFirstComponentSize(componentSize);
|
|
whichSplitter.setSize(new goog.math.Size(width, height));
|
|
|
|
// If the first pane height is changed, force the second one to update
|
|
// so it moves up or down the page.
|
|
splitpane2.setFirstComponentSize();
|
|
}
|
|
|
|
/**
|
|
* Change the orientation of the splitter pane.
|
|
*/
|
|
var changeOrientation_ = function() {
|
|
var s1Checked = document.getElementById('select1').checked;
|
|
// Which splitter to update.
|
|
var whichSplitter = s1Checked ? splitpane1 : splitpane2;
|
|
var orientation = whichSplitter.getOrientation();
|
|
if (orientation == goog.ui.SplitPane.Orientation.VERTICAL) {
|
|
whichSplitter.setOrientation(goog.ui.SplitPane.Orientation.HORIZONTAL);
|
|
} else {
|
|
whichSplitter.setOrientation(goog.ui.SplitPane.Orientation.VERTICAL);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|