-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
131 lines (126 loc) · 5.33 KB
/
index.html
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
130
131
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery PWStrength</title>
<link href="demo/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="https://github.com/matoilic/jquery.pwstrength" class="fork"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<div id="wrapper">
<div class="download">
<a href="https://github.com/matoilic/jquery.pwstrength/zipball/master" title="Download as zip">
<img border="0" width="60" src="https://github.com/images/modules/download/zip.png">
</a>
<a href="https://github.com/matoilic/jquery.pwstrength/tarball/master" title="Download as tar.gz">
<img border="0" width="60" src="https://github.com/images/modules/download/tar.png">
</a>
</div>
<h1>jQuery Password Strength Indicator</h1>
<section id="usage">
<h2>Example</h2>
<form action="#" method="post">
<label for="field">Password:</label><br>
<input type="password" id="field" data-indicator="pwindicator">
<div id="pwindicator">
<div class="bar"></div>
<div class="label"></div>
</div>
</form>
<h2>Code</h2>
<p><strong>HTML</strong></p>
<code>
<pre>
<form action="#" method="post">
<label for="field">Password:</label><br>
<input type="password" id="field" data-indicator="<strong>pwindicator</strong>">
<div id="<strong>pwindicator</strong>">
<div class="bar"></div>
<div class="label"></div>
</div>
</form>
</pre>
</code>
<p>The data-indicator attribute on the password field specifies which element is used as indicator.</p>
<p><strong>JavaScript</strong></p>
<code>
<pre>
jQuery(function($) {
$('#field').pwstrength();
});
</pre>
</code>
<p>
<strong>You can also check the password manually by calling</strong>
</p>
<code><pre> $.pwstrength</pre></code>
</section>
<section id="options">
<h2>Options</h2>
<ul>
<li>
<p>
<strong>label</strong><br>
The Selector for the label element within the indicator container.<br>
Default: .label
</p>
</li>
<li>
<p>
<strong>classes</strong><br>
The CSS classes which get added for each strength level.<br>
Default: ['pw-very-weak', 'pw-weak', 'pw-mediocre', 'pw-strong', 'pw-very-strong']
</p>
</li>
<li>
<p>
<strong>texts</strong><br>
The texts that get inserted into the label for each strength level.<br>
Default: ['very weak', 'weak', 'mediocre', 'strong', 'very strong']
</p>
</li>
</ul>
</section>
<section>
<h2>Requirements</h2>
<p>jQuery 1.5 or higher</p>
</section>
<section id="support">
<h2>Supported Browsers</h2>
<ul>
<li>Firefox 3+</li>
<li>Safari 3+</li>
<li>Chrome 10+</li>
<li>Opera 9+</li>
<li>Internet Explorer 6+</li>
</ul>
</section>
<section id="download">
<h2>Download</h2>
<p>
You can download this project in either
<a href="https://github.com/matoilic/jquery.pwstrength/zipball/master">zip</a> or
<a href="https://github.com/matoilic/jquery.pwstrength/tarball/master">tar</a> formats.
</p>
<p>
You can also clone the project with <a href="http://git-scm.com">Git</a> by running:
<code>$ git clone git://github.com/matoilic/jquery.pwstrength</code>
</p>
</section>
<section id="licence">
<h2>Licence</h2>
<p>Copyright © 2012 Mato Ilic</p>
<p>jquery.pwstrength is dual licensed under the MIT and GPL licenses:</p>
<p>
<a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a><br>
<a href="http://www.gnu.org/licenses/gpl.html">http://www.gnu.org/licenses/gpl.html</a>
</p>
</section>
</div>
<script src="vendor/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.pwstrength.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function($) { $('#field').pwstrength(); });
</script>
</body>
</html>