<!DOCTYPE html>
<html>
<!--
Copyright 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 separate 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>
Codebase Browser
chromium