Create a Sample Page

fabiomcosta · Aug 16, 2011 · 1bbdb4b · 1bbdb4b
1 parent 4ed7fd4
commit 1bbdb4b
Showing 1 changed file with 118 additions and 0 deletions.
diff --git a/samples.html b/samples.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br">
+<head profile="http://gmpg.org/xfn/11">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<meta name="verify-v1" content="/4hjWiX0OOIdjoIXz+F3nBffA9iAQl+LgNOjmglfcdc=" />
+<title>Samples jQuery Plugin stringToSlug | Leo Caseiro</title>	
+<meta http-equiv="content-language" content="pt-br" />
+
+<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+<script type="text/javascript" src="jquery.stringToSlug.js"></script>
+
+<script type="text/javascript">
+	$(document).ready( function() {
+		$("#string").stringToSlug();
+	});
+</script>
+<style>
+	body{font-family:Verdana, Tahoma, sans-serif; font-size:14px;}
+	.code{font-family:Courier, "Courier New", monospace;}
+</style>
+</head>
+<body>
+
+<div style="background-color:#fff000; padding:2px 10px;">
+	<h4>StringToSlug Demo</h4>
+	<p><strong>Change:</strong> <input id="string" size="100" type="text" value="Change the content of this field! And view the text with red background Preview!" />
+	<p><strong>Preview:</strong> <span id="permalink" style="background-color:#880000; color:#fff; padding:3px;">change-the-content-of-this-field-and-view-the-text-with-red-background-preview</span></p>
+</div>
+
+<div class="sample">
+	<h4>Default Usage:</h4>
+	<pre><div class="code"><em>
+	/**
+	* Default Events: Blur, KeyUp e KeyDown:
+	* Default Get Put: #permalink
+	* Default Space Replacement: - (hiphen)
+	*/
+	</em>
+	$(document).ready( function() {
+		$(&quot;#string&quot;).stringToSlug();
+	});
+	</div>
+	<br />	
+	</pre>	
+</div>
+
+<div class="sample">
+	<h4>The values Default at Plugin Usage:</h4>
+	<pre class="brush: javascript"><div class="code">
+	$(document).ready( function() {
+		$(&quot;#title&quot;).stringToSlug({
+			setEvents: &#039;keyup keydown blur&#039;,
+			getPut: &#039;#permalink&#039;,
+			space: &#039;-&#039;
+		});
+	});
+	</div>
+	<br />	
+	</pre>
+
+<div class="sample">
+	<h4>Other(s) Event(s) Usage:</h4>
+	<p><small>To change the events, we must insert one or more events separated by space:</small></p>
+	<pre class="brush: javascript">
+	<div class="code">
+	$(document).ready( function() {
+		//Only Event Blur
+		$(&quot;#only-blur-event&quot;).stringToSlug({
+			setEvents: &quot;blur&quot;
+		);
+
+		//2 Events or More
+		//This sample, Usage Events: KeyUp and KeyDown
+		$(&quot;#keyup-and-keydown-events&quot;).stringToSlug({
+			setEvents: &quot;keyup keydown&quot;
+
+		);
+	});
+	</div>
+	<br />	
+	</pre>
+</div>
+
+<div class="sample">
+	<h4>Other Get Put Preview Usage:</h4>
+	<pre class="brush: javascript"><div class="code">
+	$(document).ready( function() {
+		//Previem in all texarea
+		$(&quot;input[name=string]&quot;).stringToSlug({
+			getPut: &quot;textarea&quot;
+		);
+
+		//Preview in all elements preview class
+		$(&quot;#input[name=string]&quot;).stringToSlug({
+			getPut: &quot;.class&quot;
+
+		);
+	});
+	</div>
+	<br />	
+	</pre>
+</div>
+
+<div class="sample">
+	<h4>Replace hiphen by other char Usage:</h4>
+	<pre class="brush: javascript">
+	$(document).ready( function() {
+		//Replace by underscore
+		$(&quot;#input[name=string]&quot;).stringToSlug({
+			space: &quot;_&quot;
+		);
+	});
+	</pre>
+</div>
+<br /><br />
+<em><small>jQuery Plugin StringToSlug create by <a title="Create at Leo Caseiro" href="http://leocaseiro.com.br/">@leocaseiro</a></small></em>
+</body>
+</html>