Skip to content

D
domotikad
Switch branch/tag
Find file
Normal viewHistoryPermalink
settings.html 5.8 KB
Newer Older
nextime's avatar
First github commit
31e7b770
 
nextime committed
1 
<!DOCTYPE HTML><html lang="en-US">
    <head>
        <title>Snap.js</title>
        <meta http-equiv="x-ua-compatible" content="IE=edge" />
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-touch-fullscreen" content="yes">
        <link rel="stylesheet" type="text/css" href="../../snap.css" />
        <link rel="stylesheet" type="text/css" href="../assets/demo.css" />
    </head>
    <body>
        <div class="snap-drawers">
            <div class="snap-drawer snap-drawer-left">
                <div>
                    <h3>Snap.js</h3>
                    <div class="demo-social">
                        <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Snap.js - A Library for creating beautiful mobile shelfs in Javascript" data-url="http://jakiestfu.github.com/Snap.js/" data-count="none" data-via="jakiestfu">Tweet</a>
                        <a href="https://twitter.com/jakiestfu" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jakiestfu</a>
                        <iframe src="http://ghbtns.com/github-btn.html?user=jakiestfu&amp;repo=Snap.js&amp;type=watch&amp;count=true" allowtransparency="true" frameborder="0" scrolling="0" width="120" height="20"></iframe>
                    </div>
                    <h4>Demos</h4>
                    <ul>
                        <li><a href="default.html">Default</a></li>
                        <li><a href="noDrag.html">No Drag</a></li>
                        <li><a href="dragElement.html">Drag Element</a></li>
                        <li><a href="rightDisabled.html">Right Disabled</a></li>
                        <li><a href="hyperextend.html">Hyperextension Disabled</a></li>
                        <li><a href="skinnyThreshold.html">Skinny Threshold</a></li>
                        <li><a href="toggles.html">Toggles</a></li>
                        <li><a href="classNames.html">Class Names</a></li>
                        <li><a href="expand.html">Expanding</a></li>
                        <li><a href="settings.html">Settings</a></li>
                        <li><a href="ratchet/template.html">Ratchet</a></li>
                    </ul>
                    <div>
                        <p>You can update the settings of an instantiated snap object by calling the settings method.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non erat ac leo ultrices blandit sed vel risus. Pellentesque facilisis blandit auctor. Maecenas vestibulum vulputate tincidunt. Mauris nec quam libero. Fusce eget ligula non leo varius condimentum quis ac elit. Donec id urna ut neque semper ultrices. Proin ut suscipit felis. Nullam neque felis, ullamcorper scelerisque volutpat vel, vehicula vehicula neque. Aenean scelerisque elit ac erat sagittis ullamcorper.</p>
                    </div>
                </div>
            </div>
            <div class="snap-drawer snap-drawer-right"></div>
        </div>

        <div id="content" class="snap-content">
            <div id="toolbar">
                <a href="#" id="open-left"></a>
                <h1>Updatable Settings</h1>
            </div>

            <div style="padding-top: 50px">

            	<div class="opt">
            		<p>Change Speed: </p>
                	<select data-key="speed">
                    	<option value="0.3">Normal</option>
                    	<option value="1">Slow</option>
                    	<option value="0.2">Fast</option>
                    </select>
            	</div>
                
                <div class="opt">
                    <p>Change Easing</p>
                    <select data-key="easing">
                    	<option value="ease">ease</option>
                    	<option value="linear">linear</option>
                    	<option value="cubic-bezier(0.175, 0.885, 0.320, 1.275)">easeOutBack (Bezier Curve)</option>
                    </select>
            	</div>
            	
            	<div class="opt">
                    <p>Disable</p>
                    <select data-key="disable">
                    	<option value="none">None</option>
                    	<option value="left">Left</option>
                    	<option value="right">Right</option>
                    </select>
            	</div>
            	<div class="opt">
                    <p>And More!</p>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="../../snap.js"></script>
        <script type="text/javascript">
            var snapper = new Snap({
	                element: document.getElementById('content')
	            }),
	            updateSnap = function(){
	            	var key = this.dataset.key,
	            		val = this.value,
	            		opts = {};
	            	switch(key){
	            		case 'speed':
	            			opts.transitionSpeed = parseFloat(val, 10);
	            			break;
	            		case 'easing':
	            			opts.easing = val;
	            			break;
	            		case 'disable':
	            			opts.disable = val;
	            			break;
	            	}

	            	snapper.settings(opts);
	            },
	            selects = document.getElementsByTagName('select'),
	            i;

            for(i=0; i<selects.length; i++){
            	selects[i].addEventListener('change', updateSnap);
            }

        </script>
        <script type="text/javascript" src="../assets/demo.js"></script>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>       
    </body></html>