UI controls demo
Result
Source
Comments
[x]
<head> <script type="text/javascript"> var myJmol = 'myJmol'; var JmolInfo = { width:'100%', height:'100%', color:'#E2F4F5', j2sPath:'../jmol/j2s', serverURL:'../jmol/php/jsmol.php', use:'html5' } $(document).ready(function(){ $('#JmolDiv').html( Jmol.getAppletHtml(myJmol, JmolInfo) ); Jmol.script(myJmol, 'load ../model/caffeine.xyz'); }); </script> </head> <body> <div id="JmolDiv" style="width:30vmin; height:30vmin;"></div> </body>
Initializes, defines and inserts the JSmol object
Atoms
off
23%
100%
<script type="text/javascript"> Jmol.jmolRadioGroup(myJmol, [ ["spacefill off", "off"], ["spacefill 23%", "23%", "checked"], ["spacefill 100%", "100%"] ]); </script>
a radio group
<script type="text/javascript"> Jmol.jmolButton(myJmol, "reset", "Reset to original orientation"); </script>
a button
spin
<script type="text/javascript"> Jmol.jmolCheckbox(myJmol, "spin on", "spin off", "spin"); </script>
a checkbox
Rotate once about the x axis
<script type="text/javascript"> Jmol.jmolLink(myJmol, "move 360 0 0 0 0 0 0 0 2", "Rotate once about the x axis"); </script>
a link
background white
background skyblue
background yellow
background salmon
background palegreen
background black
<script type="text/javascript"> Jmol.jmolMenu(myJmol, [ "background white", ["background skyblue", null, "selected"], "background yellow", "background salmon", "background palegreen", "background black" ]); </script>
a drop-down menu
