Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 75 lines (67 sloc) 3 KB
<!DOCTYPE html>
<html>
<head>
<title>slideControl.js jQuery Plugin</title>
<link rel="stylesheet" type="text/css" href="slideControl.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.slideControl.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.slideControl').slideControl();
prettyPrint();
});
</script>
<link rel="stylesheet" type="text/css" href="extra/style.css" />
<script type="text/javascript" src="extra/prettify.js"></script>
</head>
<body>
<div class="content">
<h1>slideControl.js jQuery Plugin <sup>1.0</sup></h1>
<h3><a href="http://nikorablin.com">Nik Korablin</a></h3>
</div>
<div class="content">
<ul class="clearfix">
<li><label>Foo: </label><input type="text" value="6.0" class="slideControl" maxlength="3" /></li>
<li><label>Bar: </label><input type="text" value="4.0" class="slideControl" maxlength="3" /></li>
<li><label>FooBar: </label><input type="text" value="9.0" class="slideControl" maxlength="3" /></li>
</ul>
</div>
<div class="content">
<h2>The Code</h2>
<h3>In Your &lt;head&gt;</h3>
<pre class="prettyprint">
&lt;link rel="stylesheet" type="text/css" href="slideControl.css" /&gt;
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.slideControl.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('.slideControl').slideControl();
});
&lt;/script&gt;</pre>
<h3>Options</h3>
<ul class="options">
<li>speed: Controls the speed of the animation for a slider reszing, defaults to 400</li>
<li>lowerBound: Sets the minimum amount the slider can be set to, defaults to 1</li>
<li>upperBound: Sets the maximum amount the slider can be set to, defaults to 10</li>
</ul>
<h3>HTML</h3>
<pre class="prettyprint">
&lt;ul&gt;
&lt;li&gt;&lt;label&gt;Responsiveness: &lt;/label&gt;&lt;input type="text" value="6.0" class="slideControl" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;label&gt;Safety: &lt;/label&gt;&lt;input type="text" value="4.0" class="slideControl" /&gt;&lt;/li&gt;
&lt;li&gt;&lt;label&gt;Information: &lt;/label&gt;&lt;input type="text" value="9.0" class="slideControl" /&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
<h3>CSS</h3>
<p>The CSS file included should be pretty straight-forward. You can change the look of your slide controllers in there from background color to size to how the handle looks. Just take a look around and it should be pretty easy to make changes.</p>
</div>
<div class="content">
<h3>Usage</h3>
<p>You are free to use the slideControl.js plugin however you want. Credit is nice, but not required</p>
<ul class="options">
<li><a href="">Download</a></li>
<li><a href="">Github</a></li>
<li><a href="http://nikorablin.com">Portfolio</a></li>
</ul>
</div>
</body>
</html>
Something went wrong with that request. Please try again.