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

modified demo.css for expansion animations

Browse Source
This commit is contained in:
Jono Brandel 2011-02-09 13:50:24 -08:00
parent 7c9143a8e2
commit 70ed6c1e32
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
demo/demo.css
View File

@ -50,7 +50,7 @@ h2 {
h2.section { h2.section {
margin: 0; margin: 0;
padding: 20px 0px 0px 0px; padding: 20px 0px 20px 0px;
cursor: pointer; cursor: pointer;
border-top: 1px dotted #ccc; border-top: 1px dotted #ccc;
-webkit-transition: color 0.15s linear; -webkit-transition: color 0.15s linear;
@ -67,12 +67,16 @@ div.collapsed h2, div.expanded h2 {
cursor: pointer; cursor: pointer;
} }
.last { margin-bottom: 0px !important; }
.first { margin-top: 0px; }
div.trans { div.trans {
border-top: 1px dotted #ccc; border-top: 1px dotted #ccc;
margin: 0px 0px 20px 0px; margin: 0px 0px 20px 0px;
} }
ol#secrets { ol#secrets {
padding: 0px 0px 20px 0px; padding: 0px;
margin: 0px;
} }
div.expanded h2:before { div.expanded h2:before {
content: '-'; content: '-';
@ -93,13 +97,14 @@ div.expanded h2:before, div.collapsed h2:before {
div.collapsable { div.collapsable {
overflow: hidden; overflow: hidden;
clear: both; clear: both;
margin-bottom: 20px;
-moz-transition: height .2s ease-out; -moz-transition: height .2s ease-out;
-webkit-transition: height .2s ease-out; -webkit-transition: height .2s ease-out;
transition: height .2s ease-out; transition: height .2s ease-out;
} }
div.collapsable div { div.collapsable div {
padding-bottom: 20px;
margin-bottom: -20px;
height: auto; height: auto;
} }

19
index.html
View File

@ -1,7 +1,4 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!doctype html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<title>gui-dat</title> <title>gui-dat</title>
<link rel="icon" type="image/png" href="demo/assets/favicon.png" /> <link rel="icon" type="image/png" href="demo/assets/favicon.png" />
@ -183,7 +180,7 @@ window.onload = function() {
<div class="collapsable"> <div class="collapsable">
<div> <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> <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"> <pre class="prettyprint last">
// Make a button for the url function // Make a button for the url function
gui.add(GUI, "saveURL");</pre> gui.add(GUI, "saveURL");</pre>
</div> </div>
@ -216,7 +213,7 @@ var gui = new GUI();
gui.add(someObject, "someProperty"); gui.add(someObject, "someProperty");
gui.add(someObject, "someOtherProperty");</pre> 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> <p class = "last"><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>
</div> </div>
@ -226,7 +223,7 @@ gui.add(someObject, "someOtherProperty");</pre>
<h2 class="section">Choosing from a list of values</h2> <h2 class="section">Choosing from a list of values</h2>
<div class="collapsable"> <div class="collapsable">
<div> <div>
<pre class="prettyprint">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8); <pre class="prettyprint first last">gui.add(obj, "propertyName").options(1, 2, 3, 5, 8);
// Alternatively, you can specify custom labels using object syntax // Alternatively, you can specify custom labels using object syntax
gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3}); gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
@ -247,7 +244,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
alert("You just finished changing me to " + newValue); alert("You just finished changing me to " + newValue);
});</pre> });</pre>
<p>Finally, if you'd like to do a little something extra when a function is called, use the following:</p> <p>Finally, if you'd like to do a little something extra when a function is called, use the following:</p>
<pre class="prettyprint">gui.add(obj, "functionName").onFire(function() { <pre class="prettyprint last">gui.add(obj, "functionName").onFire(function() {
alert("You called a function with gui-dat"); alert("You called a function with gui-dat");
});</pre> });</pre>
</div> </div>
@ -258,7 +255,7 @@ gui.add(obj, "propertyName").options({'Small': 1, 'Medium': 2, 'Large': 3});
<div class="collapsable"> <div class="collapsable">
<div> <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> <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> <pre class="prettyprint last">gui.add(obj, "changingProperty").listen();</pre>
</div> </div>
</div> </div>
</div> </div>
@ -278,7 +275,7 @@ setInterval(function() {
}, 1000 / 60);</pre> }, 1000 / 60);</pre>
<p>Alternatively, you can forego calling <code>listen()</code> on individual controllers, and instead choose to monitor changes in <em>all</em> values controlled by your gui.</p> <p>Alternatively, you can forego calling <code>listen()</code> on individual controllers, and instead choose to monitor changes in <em>all</em> values controlled by your gui.</p>
<pre class="prettyprint"> <pre class="prettyprint last">
gui.autoListen = false; // disables internal interval gui.autoListen = false; // disables internal interval
gui.add(obj, "add"); gui.add(obj, "add");
gui.add(obj, "lotsa"); gui.add(obj, "lotsa");
@ -305,7 +302,7 @@ gui1.name("Utilities");
gui2.name("Camera Placement");</pre> gui2.name("Camera Placement");</pre>
<p>By default, <strong>gui-dat</strong> panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.</p> <p>By default, <strong>gui-dat</strong> panels will be automatically added to the HTML document and fixed to the top of the screen. You can disable this behavior / styling and append the gui DOM element to a container of your choosing.</p>
<pre class="prettyprint"> <pre class="prettyprint last">
// Notice this belongs to the GUI class (uppercase) // Notice this belongs to the GUI class (uppercase)
// and not an instance thereof. // and not an instance thereof.
GUI.autoPlace = false; GUI.autoPlace = false;