library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

css3 animations work for documentation page, thanks szimek!

Browse Source
This commit is contained in:
Jono Brandel 2011-02-03 14:36:28 -08:00
parent f23464c58c
commit e21e0ac5c3
2 changed files with 72 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
demo/demo.css
View File

@ -66,11 +66,14 @@ div.collapsed h2, div.expanded h2 {
width: 100%;
cursor: pointer;
}
h2.last {
border-bottom: 1px dotted #ccc;
margin-bottom: 20px;
}
div.trans {
border-top: 1px dotted #ccc;
margin: 0px 0px 20px 0px;
}
ol#secrets {
padding: 0px 0px 20px 0px;
}
div.expanded h2:before {
content: '-';
}
@ -87,6 +90,18 @@ div.expanded h2:before, div.collapsed h2:before {
font-family: Monaco, monospace;
}
div.collapsable {
overflow: hidden;
clear: both;
-moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out;
transition: height .2s ease-out;
}
div.collapsable div {
height: auto;
}
div.collapsed .collapsable {
overflow: hidden;
clear: both;
@ -97,6 +112,7 @@ div.expanded .collapsable {
clear: both;
height: auto;
}
div.expanded { cursor: pointer; }
#helvetica-demo {

26
index.html
View File

@ -72,10 +72,15 @@
function toggle(e) {
if(this.className == 'collapsed') {
var collapsable = this.childNodes[3],
wrapper = collapsable.childNodes[1];
if (this.className === 'collapsed') {
this.className = 'expanded';
collapsable.style.height = wrapper.clientHeight + 'px';
} else {
this.className = 'collapsed';
collapsable.style.height = '0px';
}
}
@ -186,16 +191,18 @@ window.onload = function() {
<div class="collapsed">
<h2 class="section">Saving your parameters</h2>
<div class="collapsable">
<div>
<p>The simplest way to save your parameters is via <code>GUI.saveURL()</code>. This method directs your browser to a URL containing the current GUI settings.</p>
<pre class="prettyprint">
// Make a button for the url function
gui.add(GUI, "saveURL");</pre>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section">Advanced saving</h2>
<div class="collapsable">
<div>
<p>Let's say you'd like to share your settings with someone. Instead of sending a long link with lots of parameters stored in it, you can make your saved settings the defaults.</p>
<p>First, add the method <code>GUI.showSaveString()</code> to a gui object:</p>
@ -222,18 +229,22 @@ gui.add(someObject, "someOtherProperty");</pre>
<p><strong>Save strings won't work if you change the order in which you've added properties to your gui objects, or the order of the gui objects themselves.</strong>. If you want to add more parameters to your gui and use an old save string, make sure they're added after the properties whose values you've saved.</p>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section">Listen for variable changes outside of the GUI</h2>
<div class="collapsable">
<div>
<p>Let's say you have a variable that changes by itself from time to time. If you'd like the GUI to reflect those changes, use the <code>listen()</code> method.</p>
<pre class="prettyprint">gui.add(obj, "changingProperty").listen();</pre>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section">Advanced listening</h2>
<div class="collapsable">
<div>
<p>By default, <strong>gui-dat</strong> will create an internal interval that checks for changes in the values you've marked with <code>listen()</code>. If you'd like to check for these changes in an interval of your own definition, use the following:</p>
<pre class="prettyprint">
gui.autoListen = false; // disables internal interval
@ -257,10 +268,12 @@ setInterval(function() {
}, 1000 / 60);</pre>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section">Multiple panels and custom placement</h2>
<div class="collapsable">
<div>
<p>You can instantiate multiple <code>GUI</code> objects and name them however you'd like.</p>
<pre class="prettyprint">var gui1 = new GUI();
var gui2 = new GUI();
@ -285,10 +298,12 @@ gui.domElement.style.left = "20px";
document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
</div>
</div>
</div>
<div class="collapsed">
<h2 class="section last">Pro tips.</h2>
<h2 class="section">Pro tips.</h2>
<div class="collapsable">
<div>
<ol id="secrets">
<li><strong>gui-dat</strong> panels are resizeable. Drag the show/hide button.</li>
@ -296,8 +311,11 @@ document.getElementById("my-gui-container").appendChild( gui.domElement );</pre>
</ol>
</div>
</div>
</div>
<footer>Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
<div class = "trans">&nbsp;</div>
<footer class = "trans">Initiated by <a href="http://georgemichaelbrower.com/">George Michael Brower</a> and <a href="http://jonobr1.com/">Jono Brandel</a> of the Data Arts Team, Google Creative Lab.
</footer>
</body>
</html>