-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.htm
85 lines (75 loc) · 2.78 KB
/
index.htm
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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></link>
<style>
.row {
padding:5px;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery KeyValueEditor</h1>
<h3>Default behavior</h3>
<p>
The jQuery KeyValueEditor plugin can be used to create a UI for adding key-value-pairs. There are two modes of input: a form with separate text boxes for individual keys and values, and a textarea to copy-paste larger blocks of text.
</p>
<p>
The conversion to/from the two modes of input is customizable. The default functions split the text into rows, and the individual rows by ':', to give keys and values (for HTTP headers).
Customizable options:
<ul>
<li> deleteButton: The string//html to show to delete a row. Default: "Delete"</li>
<li> toggleButton: The string//html to show to switche between the form and textarea views. Default: "Toggle view</li>
<li> placeHolderKey: The placeholder for the key textbox. Default: "Key"</li>
<li> placeHolderValue: The placeholder for the value textbox. Default: "Value" </li>
<li> textToFormFunction: Function to convert text to key-value pairs.</li>
<li> formToTextFunction: Function to convert key-value pairs to text.</li>
</ul>
</p>
<br>
<div class="row bg-info">
<div class="col-md-6">
<p>This is the default usage of the plugin. No options are set.</p>
<code>
$("#kve_default").keyvalueeditor('init');
</code>
</div>
<div class="col-md-6">
<div id="kve_default"></div>
</div>
</div>
<br><br>
<div class="row bg-info">
<div class="col-md-6">
<p>Plugin with custom options.</p>
<code>
var params = {<br>
placeHolderKey:"Key_custom",<br>
placeHolderValue:"Value_custom",<br>
toggleButton: "Toggle_custom",<br>
deleteButton:'<img class="deleteButton" src="img/delete.png">'<br>
};<br>
$("#kve_custom").keyvalueeditor('init',params);
</code>
</div>
<div class="col-md-6">
<div id="kve_custom"></div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="jquery.keyvalueeditor.js"></script>
<script type="text/javascript">
var params = {
placeHolderKey:"Key_custom",
placeHolderValue:"Value_custom",
toggleButton: "Toggle_custom",
deleteButton:'<img class="deleteButton" src="img/delete.png">'
};
$("#kve_default").keyvalueeditor('init');
$("#kve_custom").keyvalueeditor('init',params);
</script>
</body>
</html>