forked from juliacscai/jquery-cron-quartz
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
160 lines (136 loc) · 6.04 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Demo page for jQuery cron builder plugin">
<meta name="author" content="Julia Cai">
<title> jQuery Cron Builder</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="src/jquery-cron-quartz.css">
<style type="text/css">
h1 {
color: #1da9cc !important;
font-weight: 700;
line-height: 1.1;
}
.demo {
padding: 20px;
background-color: #DFEDF6;
margin: 15px 0px;
}
.demo .cron-builder {
min-height: 130px;
}
.demo span {
font-family: monospace;
}
#example2-btn {
margin-top: 15px;
}
.alert {
margin-top: 20px;
margin-bottom: 0px;
}
footer {
margin-top:60px;
}
footer p {
padding: 20px;
background-color: #eee;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="src/jquery-cron-quartz.js"></script>
<script type="text/javascript" src="src/i18n/jquery-cron-quartz-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
$('#example1-cron').cronBuilder({
selectorLabel: "选择时间段: ",
language: "zh_CN",
onChange: function(expression) {
$('#example1-result').text(expression);
}
});
$('#example2-cron').cronBuilder();
$('#example2-btn').click(function(){
var current=$('#example2-cron').data('cronBuilder').getExpression();
$('#example2-result').text(current);
})
});
</script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>jQuery Cron Builder</h1>
<p class="lead">Simple UI to create cron expressions for Quartz Schedular</p>
</div>
</div>
<div class="container">
<h2>Introduction</h2>
<p>Cron is a UNIX utility used to schedule a command or script on your server to run automatically.
Cron expressions represent a specific time and date. Scheduling automatic tasks can be very useful
to automate repetitive tasks. Cron expressions are strings comprised of 6 or 7 characters separated
by white spaces, and they can be pretty confusing.</p>
<p>The jQuery Cron Builder is a jQuery plugin that provides a clean user interface to create
complex cron expressions. The cron expressions created by this tool is used for
<a href="http://www.quartz-scheduler.org/documentation/quartz-1.x/tutorials/crontrigger"
target="_blank">Quartz Job Schedular</a>.
</p>
<h2>Demo</h2>
<p>To use the plugin, simply initialize the DOM element using the cronBuilder method. In the first
example, a function is automatically called when user does a change in the inputs. The function is
passed to the cronBuilder at initialization.
</p>
<div class="demo">
<div id="example1-cron" class="cron-builder"></div>
<div class="alert alert-warning">
<p><strong>Cron Expression:</strong> <span id="example1-result"></span></p>
</div>
</div>
<pre>
$(function() {
// Initialize DOM with cron builder with options
$('#cron').cronBuilder({
selectorLabel: "选择时间段: ",
language: "zh_CN",
onChange: function(expression) {
$('#example1-result').text(expression);
}
});
});</pre>
<br>
<p>In the second example, the cron expression is only generated when the button is pressed. To get
the current cron expression, simply call the method <code>getExpression()</code>.
</p>
<div class="demo">
<div id="example2-cron" class="cron-builder"></div>
<button id="example2-btn" type="button" class="btn btn-success">Generate Cron Expression</button>
<div class="alert alert-warning">
<p><strong>Cron Expression:</strong> <span id="example2-result"></span></p>
</div>
</div>
<pre>
$(function() {
// Initialize DOM with cron builder
$('#cron').cronBuilder();
// Add event handler to button
$('button#generate').click(function(){
// Get current cron expression
var expression=$('#cron').data('cronBuilder').getExpression();
// Dispaly cron expression
$('#result').text(expression);
})
});</pre>
<h2>Download</h2>
<p>The dev version can be downloaded <a href="https://github.com/juliacscai/jquery-cron-quartz/archive/master.zip">here</a>.</p>
<h2>Usage</h2>
<p>jQuery Cron Expression requires <a href="http://jquery.com/download/" target="_blank">jQuery 1.12.0</a> or above.</p>
<pre><script type="text/javascript" src="src/jquery-cron-quartz.js" ></script>
<link rel="stylesheet" type="text/css" href="src/jquery-cron-quartz.css"></pre>
</div>
<footer>
<p class="text-center">Copyright © 2016 <a href="https://github.com/juliacscai" target="_blank">Julia Cai</a>. Under <a href="https://opensource.org/licenses/MIT" target="_blank">MIT</a> license.</p>
</footer>
</body>
</html>