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
|
<!DOCTYPE HTML>
<html>
<head>
<title>starrating editor examples</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- Enable responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="../../../javascript/jquery/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap3 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../../../javascript/bootstrap/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="../../../javascript/bootstrap/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="../../../javascript/bootstrap/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Foundation
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.4/foundation.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" />
-->
<!-- JSON-Editor -->
<script src="../../../javascript/json-editor/jsoneditor.min.js"></script>
<style type="text/css">
body {
margin: 1em;
}
.starrating {
direction: rtl;
display: inline-block;
white-space:nowrap;
}
.starrating > input {
display: none;
} /* Remove radio buttons */
.starrating > label:before {
content: '\2606'; /* Empty Star */
margin: 1px;
font-size: 18px;
font-style:normal;
font-weight:400;
line-height:1;
font-family: 'Arial';
display: inline-block;
}
.starrating > label {
color: #888; /* Start color when not clicked */
cursor: pointer;
margin: 0;
margin: 8px 0 2px 0;
}
.starrating > label.starrating-display-enabled {
margin: 1px 0 0 0;
}
.starrating > input:checked ~ label,
.starrating:not(.readonly) > input:hover ~ label {
color: #ffca08; /* Set yellow color when star checked/hover */
}
.starrating > input:checked ~ label:before,
.starrating:not(.readonly) > input:hover ~ label:before {
content: '\2605'; /* Filled Star when star checked/hover */
text-shadow: 0 0 1px rgba(0,20,20,1);
}
.starrating .starrating-display {
position: relative;
direction: ltr;
text-align: center;
font-size: 10px;
line-height: 0px;
}
</style>
</head>
<body>
<h2>String based Starrating editor</h2>
<p><ul>
<li>If "displayValue" is set to true, the seleced option will be displayed below the stars.</li>
</ul></p>
<div id="form"></div>
<script type="text/javascript">
var options = {
"theme": "bootstrap3",
"template": "handlebars",
"iconlib": "bootstrap3",
"schema": {
"title": "starrating editor examples",
"id": "test",
"type": "object",
"format": "grid",
"properties": {
starrating: {
type: "string",
format: "starrating",
title: "Starrating",
description: 'Starrating',
enum: ["Beginner", "Skilled", "Experienced", "Advanced", "Expert"],
options: {
grid_columns: 2
}
},
starrating2: {
type: "string",
format: "starrating",
title: "Starrating",
description: 'Starrating with "displayValue=true"',
enum: ["Beginner", "Skilled", "Experienced", "Advanced", "Expert"],
options: {
grid_columns: 2,
displayValue: true
}
},
starrating3: {
type: "string",
format: "starrating",
title: "Starrating",
description: 'Starrating with "displayValue=true"',
default: "5 Stars",
enum: ["1 Star", "2 Stars", "3 Stars", "4 Stars", "5 Stars", "6 Stars", "7 Stars", "8 Stars", "9 Stars", "10 Stars"],
options: {
grid_columns: 4,
displayValue: true
}
}
}
}
}
var element = document.getElementById('form');
var editor = new JSONEditor(element, options);
</script>
</body>
</html>
|
