forked from leocaseiro/jQuery-Plugin-stringToSlug
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsamples.html
More file actions
129 lines (116 loc) · 3.6 KB
/
samples.html
File metadata and controls
129 lines (116 loc) · 3.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<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({callback: function(text){ console.log(text); }});
});
</script>
<style>
body{font-family:Verdana, Tahoma, sans-serif; font-size:14px;}
.code{font-family:"Courier New", Courier, 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() {
$("#string").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() {
$("#title").stringToSlug({
setEvents: 'keyup keydown blur',
getPut: '#permalink',
space: '-'
});
});
</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
$("#only-blur-event").stringToSlug({
setEvents: "blur"
);
//2 Events or More
//This sample, Usage Events: KeyUp and KeyDown
$("#keyup-and-keydown-events").stringToSlug({
setEvents: "keyup keydown"
);
});
</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
$("input[name=string]").stringToSlug({
getPut: "textarea"
);
//Preview in all elements preview class
$("#input[name=string]").stringToSlug({
getPut: ".class"
);
});
</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
$("#input[name=string]").stringToSlug({
space: "_"
);
});
</pre>
</div>
<div class="sample">
<h4>Calls a given callback function:</h4>
<pre class="brush: javascript">
$(document).ready( function() {
//Replace by underscore
$("#input[name=string]").stringToSlug({
callback: function(slug){ console.log(slug); }
);
});
</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>