-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathusage.html
120 lines (107 loc) · 3.02 KB
/
usage.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
<!DOCTYPE HTML>
<html>
<head>
<title>Editable Select Usage</title>
<meta name="author" content="Martin Mende" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<style type="text/css">
body, html{
margin: 0;
padding: 15px;
color: #333;
font-family: arial, helvetica, sans-serif;
}
p{
font-size: 13px;
}
h1{
font-size: 18px;
}
h2{
font-size: 16px;
}
code{
display: block;
padding: 15px;
border: 1px solid #ccc;
margin: 7px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="jquery.editable.select.min.js"></script>
<script type="text/javascript">
$(function(){
var selectBoxOne = $("#s1").editableSelect();
var selectBoxTwo = $("#s2").editableSelect();
selectBoxTwo.addOption("$ - Peso");
selectBoxTwo.removeOption("$ - Dollar");
selectBoxOne.change(function(){
console.log("Option: "+selectBoxOne.val());
});
selectBoxTwo.change(function(){
console.log("Your currency: "+selectBoxTwo.val());
});
//selectBoxOne.restoreSelect();
});
</script>
</head>
<body>
<h1>Usage</h1>
<p>The usage is pretty self explaining.<br>
Include 'jquery.editable.select.min.js'.<br>
The plugin does not need any stylesheet or images.<br><br>
<b>Transform a select into an editable select:</b>
<code class="prettyprint">
var myEditableSelect = $("#mySelectBox").editableSelect();
</code><br>
The select with the id 'mySelectBox' should now be editable.<br><br>
<b>Add or delete options</b>
<code class="prettyprint">
myEditableSelect.addOption("I'm a new option");<br>
myEditableSelect.addOption("me too");<br><br>
myEditableSelect.removeOption("me too");<br>
//you can also remove an option by it's index
</code><br>
To obtain the value of the editable select call it's val() method
<code class="prettyprint">
alert( myEditableSelect.val() );
</code>
</p>
<p>
<h1>Example</h1>
<label style="font-family: arial, sans-serif; font-size: 13px; color: #333;">Your plugin is awesome and I wanna pledge </label>
<select id="s1">
<option>1</option>
<option>5</option>
<option>10</option>
<option>50</option>
<option>100</option>
<option>1000</option>
</select>
<select id="s2" style="width: 150px">
<option>€ - Euro</option>
<option>$ - Dollar</option>
<option>¥ - Yen</option>
<option>£ - Pound</option>
</select>
<h2>Example Code</h2>
<code class="prettyprint">
$(function(){<br><blockquote>
var selectBoxOne = $("#s1").editableSelect();<br>
var selectBoxTwo = $("#s2").editableSelect();<br>
selectBoxTwo.addOption("$ - Peso");<br>
selectBoxTwo.removeOption("$ - Dollar");<br><br>
selectBoxOne.change(function(){<br>
console.log("Option: "+selectBoxOne.val());<br>
});<br>
selectBoxTwo.change(function(){<br>
console.log("Your currency: "+selectBoxTwo.val());<br>
});<br><br>
//selectBoxOne.restoreSelect();
</blockquote>
});
</code>
</p>
</body>
</html>