forked from mBut/jquery.mlkeyboard
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (149 loc) · 5.84 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Multilanguage Keyboard</title>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="jquery.ml-keyboard.css">
<link rel="stylesheet" type="text/css" href="demo.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.ml-keyboard.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">jQuery MultiLanguage keyboard</h2>
<i>Current version 0.0.1</i>
<h4>ML Keyboard usage examples</h4>
<div class="row">
<div class="col-md-6">
<div class="example-block">
<h4>English</h4>
<input type="text" id="example-1" class="col-md-12" placeholder="Try"/>
<div class='code'>
<code>
$('input#example-1').mlKeyboard({<br/>
layout: 'en_US'<br/>
});
</code>
</div>
</div>
</div>
<div class="col-md-6">
<div class="example-block">
<h4>Russian</h4>
<input type="text" id="example-2" class="col-md-12" placeholder="Try"/>
<div class='code'>
<code>
$('input#example-2').mlKeyboard({<br/>
layout: 'ru_RU'<br/>
});
</code>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="example-block">
<h4>
Spanish
<i>(click vowels to select accents)</i>
</h4>
<input type="text" id="example-3" class="col-md-12" placeholder="Try"/>
<div class='code'>
<code>
$('input#example-3').mlKeyboard({<br/>
layout: 'es_ES'<br/>
});
</code>
</div>
</div>
</div>
<div class="col-md-6">
<div class="example-block">
<h4>Italian
<i>(click vowels to select accents)</i></h4>
<input type="text" id="example-4" class="col-md-10" placeholder="Try"/>
<a href='#' id="example-4-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('input#example-4').mlKeyboard({<br/>
layout: 'it_IT',<br/>
trigger: '#example-4-btn'<br/>
});
</code>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="example-block">
<h4>French
<i>(click vowels to select accents)</i></h4>
<input type="text" id="example-5" class="col-md-10" placeholder="Try"/>
<a href='#' id="example-5-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('input#example-5').mlKeyboard({<br/>
layout: 'fr_FR',<br/>
trigger: '#example-5-btn'<br/>
});
</code>
</div>
</div>
</div>
<div class="col-md-6">
<div class="example-block">
<h4>Text Area
<i>(click vowels to select accents)</i></h4>
<textarea type="text" id="example-6" class="col-md-10" rows="10"></textarea>
<a href='#' id="example-6-btn" class="btn btn-default"><i class="glyphicon glyphicon-font"></i></a>
<div class='code'>
<code>
$('textarea#example-6').mlKeyboard({<br/>
layout: 'pt_PT',<br/>
trigger: '#example-6-btn'<br/>
});
</code>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="page-header">Simple Usage</h3>
<ul>
<li>Download <code>jquery.ml-keyboard.min.js</code> and <code>jquery.ml-keyboard.css</code> files and add to your project.</li>
<li>Activate the plugin on the input fields with prefered layot <code>$('input').mlKeyboard({layout: 'es'});</code>.</li>
<li>It's ready.</li>
</ul>
<h5>Options</h5>
<p>The following options are available to pass into ML Keyboard on initialization.</p>
<ul>
<li>
(string) <b>layout:</b> set layout which is applicable to all input fields. By default it has value 'en_us' what is equal to American English layout.
<h5>Others currently possible layouts</h5>
<ul id="layots_list">
<li><b>es</b> - Spanish</li>
<li><b>ru</b> - Russian</li>
</ul>
</li>
<li>(boolean) <b>active_shift:</b> when user first time focus on input field virtual keyboards shift is active. Default value - <b>true</b>.
<li>(boolean) <b>active_caps:</b> initial virtual keyboards caps lock state. Default value - <b>false</b>.
<li>(boolean) <b>is_hidden:</b> to create keyboard always visible this value should be changed to false. Default value - <b>true</b>.
<li>(integer) <b>speed: </b> is speed at what keyboard shows and hides. Default value - <b>300</b>.
</ul>
<p>To change behaviour of single input field special data attribute should be added to it's tag name <code>data-mlkeyboard-<option>="value"</code> where <code>option</code> is the same attribute like it's described before.
<h3 class="page-header">Advanced Usage</h3>
<p>
By default plugin goes with all layouts included, but it's possible to customize plugin and left only some layouts as also new layouts can be easy added.
</p>
<p>
See document in docs folder.
</p>
</div>
</div>
</div>
</body>
</html>