-
Notifications
You must be signed in to change notification settings - Fork 37
/
index.html
203 lines (189 loc) · 10.5 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Business Hours plugin for jQuery – Demos and Documentation</title>
<meta name="description" content="Business hours jQuery plugin."/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-json/2.4.0/jquery.json.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.2.17/jquery.timepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/jquery-timepicker/1.2.17/jquery.timepicker.min.css"/>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/themes/github.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/js/rainbow.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/js/language/generic.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/js/language/javascript.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rainbow/1.2.0/js/language/html.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.businessHours.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.businessHours.css"/>
<link rel="stylesheet" type="text/css" href="libs/page.css"/>
<!-- START COPYING HERE -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.0/gh-fork-ribbon.min.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.0/gh-fork-ribbon.ie.min.css">
<![endif]-->
<!-- END COPYING HERE -->
</head>
<body>
<div class="github-fork-ribbon-wrapper right">
<div class="github-fork-ribbon">
<a href="https://github.com/gEndelf/jquery.businessHours">Fork me on GitHub</a>
</div>
</div>
<div id="container" class="container">
<h2>Plugin <b>jquery.businessHours</b></h2>
<p>
This plugin can be useful to show and manage business working days & hours.
</p>
<div>
<h3>By default</h3>
<div class="code">
<pre><code data-language="javascript">
var businessHoursManager = $("#businessHoursContainer").businessHours();
$("#btnSerialize").click(function() {
// use: businessHoursManager.serialize() to get serialized business hours in JSON
$("textarea#businessHoursOutput").val(JSON.stringify(businessHoursManager.serialize()));
});
</code></pre>
</div>
<div id="businessHoursContainer1"></div>
<div class="clean"> </div>
<div style="margin-top: 10px">
<button id="btnSerialize" type="button" class="btn btn-primary">Serialize</button>
<textarea id="businessHoursOutput1" rows="8" cols="80"></textarea>
</div>
</div>
<div>
<h3>Init widget from JSON object</h3>
<p></p>
<div class="code">
<pre><code data-language="javascript">
$("#businessHoursWidget").businessHours({
operationTime: /* array of JSON objects */
});
</code></pre>
</div>
<div id="businessHoursContainerJson"></div>
<div class="clean"> </div>
<div style="margin-top: 10px">
<button id="btnInit" type="button" class="btn btn-primary">Init</button>
<textarea id="businessHoursData" rows="8" cols="80">
[{"isActive":false,"timeFrom":null,"timeTill":null},
{"isActive":false,"timeFrom":null,"timeTill":null},
{"isActive":false,"timeFrom":null,"timeTill":null},
{"isActive":true,"timeFrom":"7:15","timeTill":"18:00"},
{"isActive":true,"timeFrom":"9:00","timeTill":"18:00"},
{"isActive":false,"timeFrom":null,"timeTill":null},
{"isActive":false,"timeFrom":null,"timeTill":null}]
</textarea>
</div>
</div>
<div>
<h3>Template customization</h3>
<ul>
<li><strong>inputDisabled</strong> - disable changing state</li>
<li><strong>dayTmpl</strong> - overwrite default template</li>
</ul>
<div class="code">
<pre><code data-language="javascript">
$("#businessHoursContainer2").businessHours({
inputDisabled: true,
checkedColorClass: 'workingBusinssDay',
uncheckedColorClass: 'dayOff',
dayTmpl: '<div class="dayContainer">' +
'<div data-original-title="" class="colorBox"><input type="checkbox" class="invisible operationState"/></div>' +
'<div class="weekday"></div></div>'
});
</code></pre>
</div>
<div id="businessHoursContainer2"></div>
<div class="clean"/>
</div>
<div>
<h3>Using bootstrap, font-awesome and timepicker</h3>
<p>
Ok, let's try to do more attractive widget by using <a href="http://fontawesome.io" target="_blank">font-awesome icons</a>,
<a target="_blank" href="http://getbootstrap.com">bootstrap</a> stylesheets and
<a href="http://jonthornton.github.io/jquery-timepicker/" target="_blank">jquery timepicker plugin</a>.
</p>
<div class="code">
<pre><code data-language="javascript">
// don't forget to include required libs & styles
// http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js
// http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
// http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css
// libs/jquery-timepicker/jquery.timepicker.min.js
// libs/jquery-timepicker/jquery.timepicker.css
$("#businessHoursContainer3").businessHours({
postInit:function(){
$('.operationTimeFrom, .operationTimeTill').timepicker({
'timeFormat': 'H:i',
'step': 15
});
},
dayTmpl:'<div class="dayContainer" style="width: 80px;">' +
'<div data-original-title="" class="colorBox"><input type="checkbox" class="invisible operationState"/></div>' +
'<div class="weekday"></div>' +
'<div class="operationDayTimeContainer">' +
'<div class="operationTime input-group"><span class="input-group-addon"><i class="fa fa-sun-o"></i></span><input type="text" name="startTime" class="mini-time form-control operationTimeFrom" value=""/></div>' +
'<div class="operationTime input-group"><span class="input-group-addon"><i class="fa fa-moon-o"></i></span><input type="text" name="endTime" class="mini-time form-control operationTimeTill" value=""/></div>' +
'</div></div>'
});
</code></pre>
</div>
<div id="businessHoursContainer3"></div>
<div class="clean"/>
</div>
</div>
<div class="footer" style="padding-top: 20px">
<div class="container">
<p><i>© 2014, Alex Padalka, jQuery plugin - jquery.businessHours</i></p>
</div>
</div>
<script>
(function() {
Rainbow.color();
var businessHoursManager1 = $("#businessHoursContainer1").businessHours();
$("#btnSerialize").click(function() {
$("#businessHoursOutput1").val(JSON.stringify(businessHoursManager1.serialize()));
});
$("#btnInit").click(function() {
try{
var businessHours = jQuery.parseJSON($("#businessHoursData").val());
$("#businessHoursContainerJson").businessHours({
operationTime: businessHours
});
}catch(e) {
alert("JSON non valid: " + e.message);
}
});
var businessHoursManager2 = $("#businessHoursContainer2").businessHours({
checkedColorClass: "workingBusinssDay",
inputDisabled: true,
uncheckedColorClass: "dayOff",
dayTmpl: '<div class="dayContainer">' +
'<div data-original-title="" class="colorBox"><input type="checkbox" class="invisible operationState"/></div>' +
'<div class="weekday"></div></div>'
});
var b3 = $("#businessHoursContainer3");
var businessHoursManagerBootstrap = b3.businessHours({
postInit:function(){
b3.find('.operationTimeFrom, .operationTimeTill').timepicker({
'timeFormat': 'H:i',
'step': 15
});
},
dayTmpl: '<div class="dayContainer" style="width: 80px;">' +
'<div data-original-title="" class="colorBox"><input type="checkbox" class="invisible operationState"/></div>' +
'<div class="weekday"></div>' +
'<div class="operationDayTimeContainer">' +
'<div class="operationTime input-group"><span class="input-group-addon"><i class="fa fa-sun-o"></i></span><input type="text" name="startTime" class="mini-time form-control operationTimeFrom" value=""/></div>' +
'<div class="operationTime input-group"><span class="input-group-addon"><i class="fa fa-moon-o"></i></span><input type="text" name="endTime" class="mini-time form-control operationTimeTill" value=""/></div>' +
'</div></div>'
});
})();
</script>
</body>
</html>