forked from pryley/float-labels.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
320 lines (243 loc) · 12.8 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Float Labels by Paul Ryley</title>
<meta name="keywords" content="float label pattern">
<meta name="description" content="A zero-dependency plugin that applies the float label pattern to a form.">
<meta name="author" content="Paul Ryley">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' type='text/css'>
<link rel="stylesheet" href="demo/styles.css?ver=3.3.7">
</head>
<body>
<header class="page-header">
<h1 class="project-name">float-labels.js</h1>
<h2 class="project-tagline">A zero-dependency plugin that applies the float label pattern to a form.</h2>
<a class="button medium" href="https://github.com/pryley/float-labels.js">View on GitHub</a>
<a class="button medium" href="https://github.com/pryley/float-labels.js/zipball/master">Download .zip</a>
<a class="button medium" href="https://github.com/pryley/float-labels.js/tarball/master">Download .tar.gz</a>
</header>
<main class="main-content">
<section class="section">
<a class="badge" href="https://badge.fury.io/gh/pryley%2Ffloat-labels.js"><img src="https://badge.fury.io/gh/pryley%2Ffloat-labels.js.svg" alt="GitHub version" height="18"></a>
<a class="badge" href="https://github.com/pryley/float-labels.js/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" height="18"></a>
<p>The float label pattern floats the inline label up above the input after the user focuses on the form field or enters a value.</p>
<p>For production, use the files from the <code>dist/</code> folder.</p>
</section>
<section class="section">
<h2>Demo</h2>
<form class="form-1">
<label for="input-1">Enter a title</label>
<input type="text" id="input-1" placeholder="Input" value="" required/>
<label for="textarea-1">Enter some content</label>
<textarea id="textarea-1" placeholder="Textarea" rows="4" autocomplete="off" required></textarea>
<label for="select-1">Select an option</label>
<select id="select-1" class="required">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<input type="radio" name="style" id="style-0" value="0"/>
<label for="style-0">Default Style</label>
<input type="radio" name="style" id="style-1" value="1" checked/>
<label for="style-1">Style 1</label>
<input type="radio" name="style" id="style-2" value="2"/>
<label for="style-2">Style 2</label>
<div class="button-group">
<button type="button" class="button large fl-toggle">Toggle Float Labels</button>
<button type="reset" class="button large secondary">Reset form</button>
</div>
</form>
</section>
<section class="section">
<h2>Installation</h2>
<p>Use one of the following methods to add Float Labels to your project:</p>
<ul>
<li><a href="https://github.com/pryley/float-labels.js/zipball/master">Download ZIP</a></li>
<li><code>yarn add float-labels.js</code></li>
<li><code>npm install float-labels.js</code></li>
<li><code>bower install float-labels.js</code></li>
</ul>
</section>
<section class="section">
<h2>Usage</h2>
<p>Load the <code>dist/float-labels.css</code> and <code>dist/float-labels.min.js</code> files somewhere on your page and then trigger the plugin as follows:</p>
<div class="highlight highlight-Javascript"><pre class="alt"><code>// You may pass in a CSS selector, an HTMLElement or a DomList
var floatlabels = new FloatLabels( 'form', {
// options go here,
});</code></pre></div>
<p>To re-initialize Float Labels after it has already been initialized (e.g. form fields have changed with ajax):</p>
<div class="highlight highlight-Javascript"><pre class="alt"><code>floatlabels.rebuild();</code></pre></div>
<p>To fully remove Float Labels, including all attached Event Listeners:</p>
<div class="highlight highlight-Javascript"><pre class="alt"><code>floatlabels.destroy();</code></pre></div>
<h3>HTML markup</h3>
<p>Make sure your HTML markup is valid. Your form fields must have labels, the labels must have the <code>for</code> attribute which should have the same value as the field <code>id</code> attribute. Also input fields must have a <code>type</code> attribute.</p>
<div class="highlight highlight-Html"><pre class="alt"><code><label for="input-1">Enter a title</label>
<input type="text" id="input-1"/>
<label for="textarea-1">Enter some content</label>
<textarea id="textarea-1" placeholder="Placeholders are optional"></textarea>
<label for="select-1">Select an option</label>
<select id="select-1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select></code></pre></div>
</section>
<section class="section">
<h2>Options</h2>
<h3>Default options</h3>
<div class="highlight highlight-Javascript"><pre><code>{
customEvent : null,
customLabel : null,
customPlaceholder: null,
exclude : '.no-label',
inputRegex : /email|number|password|search|tel|text|url/,
prefix : 'fl-',
prioritize : 'label',
requiredClass : 'required',
style : 0,
transform : 'input, select, textarea',
}</code></pre></div>
<ol>
<li>Float Labels first looks at the <code>transform</code> option to know which element tags to transform.</li>
<li>Next, it filters all INPUT elements by the type found by the <code>inputRegex</code> option.</li>
<li>Finally, any resulting elements found in the <code>exclude</code> option are discarded.</li>
</ol>
<h4>customEvent</h4>
<blockquote>
<p>Type: <code>Function</code></p>
<p>This function is run immediately after an element has been transformed by float-labels.</p>
<div class="highlight highlight-Javascript"><pre><code>customEvent: function( el ) {
// do something
},</code></pre></div>
</blockquote>
<h4>customLabel</h4>
<blockquote>
<p>Type: <code>Function</code></p>
<p>This function lets you modify the generated label text; it must return a string value.</p>
<div class="highlight highlight-Javascript"><pre><code>customLabel: function( labelEl, el ) {
return labelEl.textContent;
},</code></pre></div>
</blockquote>
<h4>customPlaceholder</h4>
<blockquote>
<p>Type: <code>Function</code></p>
<p>This function lets you modify the generated placeholder text; it must return a string value.</p>
<div class="highlight highlight-Javascript"><pre><code>customPlaceholder: function( placeholderText, el, labelEl ) {
return placeholderText;
},</code></pre></div>
</blockquote>
<h4>exclude</h4>
<blockquote>
<p>Type: <code>String</code></p>
<p>A comma-separated string of DOM selector elements to exclude.</p>
</blockquote>
<h4>inputRegex</h4>
<blockquote>
<p>Type: <code>Regex</code></p>
<p>Regex of INPUT types to transform.</p>
</blockquote>
<h4>prefix</h4>
<blockquote>
<p>Type: <code>String</code></p>
<p>The prefix of all the Float Label CSS classes.</p>
<p>If you change the prefix, you will need to either write your own custom CSS, or change the prefix option in the SCSS to match.</p>
</blockquote>
<h4>prioritize</h4>
<blockquote>
<p>Type: <code>String</code></p>
<p>Choose to prioritize either the label or placeholder text as the floating-label.</p>
</blockquote>
<h4>requiredClass</h4>
<blockquote>
<p>Type: <code>String</code></p>
<p>The class name of required elements (if not using the required attribute).</p>
</blockquote>
<h4>style</h4>
<blockquote>
<p>Type: <code>Number|String</code></p>
<p>Choose the style to use, the default value is either <code>0</code>, <code>1</code>, or <code>2</code>. This is used to create the Float Labels style classname (i.e. <code>.fl-style-1</code>). If you have created your own CSS style (i.e. <code>.fl-style-custom</code>), enter it here (i.e. <code>custom</code>).</p>
</blockquote>
<h4>transform</h4>
<blockquote>
<p>Type: <code>String</code></p>
<p>A comma-separated string of DOM elements to transform. Available options are: <code>input</code>, <code>select</code>, and <code>textarea</code>.</p>
</blockquote>
</section>
<section class="section">
<h2>Build</h2>
<p>float-labels.js uses <a href="https://yarnpkg.com/">yarn</a> to manage package dependencies and <a href="http://gulpjs.com/">gulp</a> to build from <code>src/</code>.</p>
<div class="highlight highlight-Bash"><pre><code>$ yarn
$ gulp</code></pre></div>
<p>The compiled files will be saved in the <code>dist/</code> folder.</p>
<h3>Style Customization</h3>
<p><a href="http://sass-lang.com/">Sass</a> is used to build the stylesheet so you can <code>@import</code> the <code>src/float-labels.scss</code> file to compile it directly into your Sass project.</p>
<p>Following are the default sass values for Float Labels, they are contained in a map variable.</p>
<pre><code>$float-labels-defaults: (
base-height : 24px,
base-padding : 6px,
border-radius : 3px,
border-width : 1px,
margin-bottom : 24px,
color-background : #fff,
color-background-active : #fff,
color-background-focus : #fff,
color-border : #dfdfdf,
color-border-active : #dfdfdf,
color-border-focus : #1976D2,
color-placeholder : #bbb,
color-required : #D32F2F,
color-text : #444,
color-text-focus : #1976D2,
line-height : 1.5,
font-size : 16px,
font-size-small : 12px,
font-weight : 400,
parent : '',
prefix : 'fl-',
transition-easing : ease-in-out,
transition-speed : 0.2s,
);</code></pre>
<p>To override any values with your own, simply create a new <code>$float-labels</code> map variable and include only the values you wish to change.</p>
<p><strong>Important:</strong> Make sure you define <code>$float-labels</code> before you import the <code>src/float-labels.scss</code> file:</p>
<pre><code>$float-labels: (
border-radius : 0,
border-width : 2px,
color-border-focus : #009688,
color-text-focus : #009688,
font-weight : 700,
);
@import "../../node_modules/float-labels.js/src/float-labels"</code></pre>
<h3>How to change CSS style priority</h3>
<p>Sometimes existing CSS stylesheet rules will override the styling of Float Labels. To solve this problem, you can specify a "parent" option in the <code>$float-labels</code> map variable. This option value should be property such as an existing #id definition with a high priority/specificity.</p>
<p>In the following example, all Float Labels css rules will begin with <code>form#my-form</code>:</p>
<pre><code>$float-labels: (
parent: 'form#my-form',
);</code></pre>
<p>The CSS rule <code>.fl-form label.fl-label { ... }</code> now becomes <code>form#my-form.fl-form label.fl-label { ... }</code>.</p>
</section>
<section class="section">
<h2>Compatibility</h2>
<ul>
<li>All modern browsers</li>
<li>IE 10+</li>
</ul>
</section>
<section class="section">
<h2>Changelog</h2>
<p><a href="https://github.com/pryley/float-labels.js/blob/master/README.md#changelog">View changelog</a></p>
</section>
<section class="section">
<h2>License</h2>
<p><a href="https://github.com/pryley/float-labels.js/blob/master/LICENSE">MIT</a></p>
</section>
</main>
<footer class="page-footer">
<p>This project is maintained by <a href="https://github.com/pryley">Paul Ryley</a></p>
</footer>
<script src="src/float-labels.js?ver=3.3.7"></script>
<script src="demo/script.js?ver=3.3.7"></script>
</body>
</html>