Andreas Hocevar
140 lines
4.4 KiB
HTML
140 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Copyright 2008 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.
|
|
-->
|
|
<!--
|
|
|
|
Demo file for goog.ui.RoundedPanel component
|
|
-->
|
|
<head>
|
|
<title>goog.ui.RoundedPanel Demo</title>
|
|
<link rel="stylesheet" href="css/demo.css">
|
|
<link rel="stylesheet" href="../css/roundedpanel.css">
|
|
<script src="../base.js"></script>
|
|
<script>
|
|
goog.require('goog.dom');
|
|
goog.require('goog.ui.RoundedPanel');
|
|
</script>
|
|
<script>
|
|
var INT_BASE = 10;
|
|
var rp;
|
|
|
|
/**
|
|
* Decorates roundedPanel node through a RoundedPanel instance.
|
|
*/
|
|
function decorateRoundedPanel() {
|
|
// Obtain the values from the 'input' and 'select' elements.
|
|
var panelWidth = goog.dom.getElement('panelWidth').value;
|
|
var panelHeight = goog.dom.getElement('panelHeight').value;
|
|
var borderWidth = parseInt(
|
|
goog.dom.getElement('borderWidth').value,
|
|
INT_BASE);
|
|
var borderColor = goog.dom.getElement('borderColor').value;
|
|
var radius = parseInt(goog.dom.getElement('radius').value, INT_BASE);
|
|
var backgroundColor = goog.dom.getElement('backgroundColor').value;
|
|
var cornersSelect = goog.dom.getElement('corners');
|
|
var corners = parseInt(
|
|
cornersSelect.options[cornersSelect.selectedIndex].value);
|
|
|
|
// Dispose of any existing RoundedPanel instance before creating
|
|
// a new one.
|
|
if (rp) {
|
|
rp.dispose();
|
|
rp = null;
|
|
}
|
|
|
|
// Set the dimensions of the panel and decorate roundedPanel.
|
|
var roundedPanelNode = goog.dom.getElement('roundedPanel');
|
|
roundedPanelNode.style.height = panelHeight;
|
|
roundedPanelNode.style.width = panelWidth;
|
|
var startTime = new Date();
|
|
rp = goog.ui.RoundedPanel.create(radius,
|
|
borderWidth,
|
|
borderColor,
|
|
backgroundColor,
|
|
corners);
|
|
rp.decorate(roundedPanelNode);
|
|
var endTime = new Date();
|
|
|
|
// Display the amount of time taken to render the RoundedPanel.
|
|
var debugNode = goog.dom.getElement('debug');
|
|
debugNode.innerHTML = 'Rendering time: ' +
|
|
(endTime - startTime) + 'ms';
|
|
};
|
|
|
|
|
|
/**
|
|
* Sets event handlers on the 'input' and 'select' elements containing
|
|
* values needed to create the rounded panel.
|
|
*/
|
|
function init() {
|
|
// Set the event handler for the 'select' element to update the panel
|
|
// when onchange fires.
|
|
var cornersSelect = goog.dom.getElement('corners');
|
|
cornersSelect.onchange = decorateRoundedPanel;
|
|
|
|
// Set the event handlers for the 'input' elements to update the panel
|
|
// when onchange fires.
|
|
var inputs = goog.dom.getElementsByTagNameAndClass(null, 'rpInput');
|
|
for (var i = 0; i < inputs.length; i++) {
|
|
inputs[i].onchange = decorateRoundedPanel;
|
|
}
|
|
|
|
decorateRoundedPanel();
|
|
};
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="roundedPanel">
|
|
<div class="goog-roundedpanel-content">
|
|
<div>
|
|
Panel Width:<br>
|
|
<input type="text" class="rpInput" id="panelWidth">
|
|
</div>
|
|
<div>
|
|
Panel Height:<br>
|
|
<input type="text" class="rpInput" id="panelHeight">
|
|
</div>
|
|
<div>
|
|
Border Width:<br>
|
|
<input type="text" class="rpInput" value="1" id="borderWidth">
|
|
</div>
|
|
<div>
|
|
Border Color:<br>
|
|
<input type="text" class="rpInput" value="#fedcba" id="borderColor">
|
|
</div>
|
|
<div>
|
|
Radius:<br>
|
|
<input type="text" class="rpInput" value="1" id="radius">
|
|
</div>
|
|
<div>
|
|
Background Color:<br>
|
|
<input type="text" class="rpInput" value="#abcdef" id="backgroundColor">
|
|
</div>
|
|
<div>
|
|
Corners:<br>
|
|
<select id="corners">
|
|
<option value="15">All</option>
|
|
<option value="12">Top</option>
|
|
<option value="3">Bottom</option>
|
|
<option value="6">Left</option>
|
|
<option value="9">Right</option>
|
|
<option value="4">Top Left</option>
|
|
<option value="8">Top Right</option>
|
|
<option value="2">Bottom Left</option>
|
|
<option value="1">Bottom Right</option>
|
|
</select>
|
|
</div>
|
|
<div id="debug">Rendering Time:</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html>
|