forked from probots-io/floatlabels.js
-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
118 lines (99 loc) · 5.25 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link href='demo.css' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="floatlabels.js" type="text/javascript"></script>
<title>floatlabels.js Demo</title>
<style>
input { width: 400px; padding-left: 8px; }
</style>
</head>
<body>
<h1>floatlabels.js</h1>
<h2>Introduction to floatlabels</h2>
<p>
The Float Label Pattern found his success after <a href="http://bradfrostweb.com/blog/post/float-label-pattern/">Brad Frost</a> wrote a blog post about Float Label Patterns.
The idea is based on a <a href="http://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction?list=users" target="_blank">Dribbble Shot by Matt D Smith</a>.
The Pattern is easy to explain. On User Interaction with an input field the placeholder value moves up, and is displayed above the typed text. This Plugin offers you the possibility to upgrade your forms with this famous pattern.
<b>This project is a fork of floatlabels.js bye Marcus Pohorely - clubdesign</b>
</p>
<h2>Demo</h2>
<p>Type <strong>anything</strong> into the input textfield to see the floated label in action.</p>
<input type="text" placeholder="Start typing..." data-label="This is a floated Label. It stays there until the field is cleared.">
<h2>Installation & Dependencies</h2>
<h3>JS-Part</h3>
<p>
Include the latest release of <strong>jQuery</strong>. The Google AJAX Libraries API can be used for this but you could also host the library yourself.<br>
Download floatlabels.min.js, upload the file to your server & include it in your code AFTER jQuery.<br><br>
Currently floatlabels.js is dependant from jQuery <strong>1.8+</strong>. Lower Versions have not been tested.
</p>
<h3>CSS-Part</h3>
<p>
You need to include some key css classes into your project. They are defined in demo.css. You can change them to your own need.
Details are described under usage.
</p>
<h2>Usage</h2>
<ol>
<li>Include jquery.min.js and floatlabels.min.js </li>
<li>
initialized floatlabel with simple call:<br>
<br>
<script>
$('input').floatlabel();
</script>
</li>
<li>
Add plugin options if the default functionality should be changed
<p>
<strong>slideInput</strong> <em>Default: true</em><br>
<span>
If true the input field will slide down (height) to fit the floating label.
</span>
</p>
<p>
<strong>typeMatches</strong> <em>Default: /text|password|email|number|search|url/</em><br>
<span>
This Regex Expression is triggered at the initializiation of the script. It checks the type="text" if the element the plugin is triggered on is valid. Some advanced users might want to expand this to the new HTML5 textfield types.
</span>
</p>
</li>
<li>
Include the necessary styles of demo.css to your project and change them on your needs.<br>
Here is a description of the used classes:
<h3>floatlabel-label</h3>
<p>
It's the floating label itself which holds the left position and style of the displayed placeholder text
</p>
<h3>floatlabel-label-inactive, floatlabel-active</h3>
<p>
Just adds <i>display: none</i>, <i>display: inline-block</i> and the top position of the label to get
some fancy animation
</p>
<h3>floatlabel-input</h3>
<p>
Initializing the plugin adds this class to all input fields.<br>
If you use <i>slideInput: false (default true)</i> add the needed padding either here or in a
general project class.<br>
<br>
<b>Note: You might need to use <i>!important</i> marker to overwrite your own padding values of input fields</b>
</p>
<h3>floatlabel-input-slide</h3>
<p>
input field Padding added with option <i>slideInput: true (default true)</i>
</p>
<h3>floatlabel-label-focus</h3>
<p>
Added to the label if the input field gets focus. Gives teh Possibility to overwrite color or other styles of the placeholder text
</p>
</li>
<li>
The script cycles through all your selected input fields and converts them to inputs with floated labels. <strong>Done</strong>.
</li>
</ol>
<script>
$('input').floatlabel();
</script>
</body>
</html>