Step Progress Made Easy
stress.js have some attributes that can be used.
| Attribute | Type | Description |
|---|---|---|
| data-init-stress | Int | The total of steps (currently only support 2-12) * If you use this, you don't need the jQuery initialization |
| data-now | Int | The index of step that currently running |
| data-status | String ("active", "complete", "fail") | The status of step that currently running |
| data-title-on-now | String or HTML | Title for current step (show on hover) |
stress.js have some options that can be defined at initialization time.
| Option | Type | Default Value | Description |
|---|---|---|---|
| total | Int | 2 | The total of steps (currently only support 2-12) * use this if you don't use data-init-stress |
stress.js have some methods that can be used after the initialization has completed.
| Method | Parameters | Description |
|---|---|---|
| update(key, value) | key ("now", "status", "title-on-now") value (Int/String) |
Update the attributes programmatically and update the stress |
| delete() | - | Delete the stress |
| Title(index, text) | index (Int - index of step) text (String or HTML) |
Add/Update title to any step (show on hover) |
| deleteTitle(index) | index (Int - index of step) | Delete title of any step |
<div class="demo1" data-init-stress=""></div>
<!-- OR -->
<div class="demo1"></div>
<script>
$('.demo1').stress();
</script>
<div class="demo2" data-init-stress="5" data-now="3" data-status="active" data-title-on-now="I'm waiting for you"></div>
<!-- OR -->
<div class="demo2" data-now="3" data-status="active" data-title-on-now="I'm waiting for you"></div>
<script>
$('.demo2').stress({
total: 5
});
</script>
<div class="demo3" data-init-stress="3" data-title-on-now="hmm"></div>
<script>
$('.demo3').stress().update('now', 2);
$('.demo3').stress().update('status', 'complete');
$('.demo3').stress().update('title-on-now', 'Yay');
</script>
<!-- OR -->
<div class="demo3" data-title-on-now="hmm"></div>
<script>
var demo3 = $('.demo3').stress({
total: 3
});
demo3.update('now', 2);
demo3.update('status', 'complete');
demo3.update('title-on-now', 'Yay');
</script>
<div class="demo4" data-init-stress="3" data-now="3" data-status="fail" data-title-on-now="Bad"></div>
<!-- OR -->
<div class="demo4" data-now="3" data-status="fail" data-title-on-now="Bad"></div>
<script>
$('.demo4').stress({
total: 3
});
</script>
<div class="demo5" data-init-stress="8" data-now="1" data-status="complete" data-title-on-now="I'm<br>HTML"></div>
<br>
<div class="text-center">
<button id="prev" class="btn btn-primary">Prev Step</button>
<button id="next" class="btn btn-primary">Next Step</button>
<button id="change-status" class="btn btn-warning">Change Status</button>
</div>
<script>
$('#next').click(function() {
$('.demo5').stress().update('now', parseInt($('.demo5').attr('data-now'))+1);
});
$('#prev').click(function() {
$('.demo5').stress().update('now', parseInt($('.demo5').attr('data-now'))-1);
});
var arr = ['active', 'complete', 'fail'];
$('#change-status').click(function() {
$('.demo5').stress().update('status', arr[Math.floor(Math.random() * arr.length)]);
});
</script>
<!-- OR -->
<div class="demo5" data-now="1" data-status="complete" data-title-on-now="I'm<br>HTML"></div>
<br>
<div class="text-center">
<button id="prev" class="btn btn-primary">Prev Step</button>
<button id="next" class="btn btn-primary">Next Step</button>
<button id="change-status" class="btn btn-warning">Change Status</button>
</div>
<script>
var demo5 = $('.demo5').stress({
total: 8
});
$('#next').click(function() {
demo5.update('now', parseInt($('.demo5').attr('data-now'))+1);
});
$('#prev').click(function() {
demo5.update('now', parseInt($('.demo5').attr('data-now'))-1);
});
var arr = ['active', 'complete', 'fail'];
$('#change-status').click(function() {
demo5.update('status', arr[Math.floor(Math.random() * arr.length)]);
});
</script>
<div class="demo6" data-init-stress="5" data-now="4" data-status="fail" data-title-on-now="Hah"></div>
<br>
<div class="text-center">
<button id="add-title" class="btn btn-primary">Add Title to Step 2</button>
<button id="delete-title" class="btn btn-primary">Delete Title at Step 2</button>
</div>
<script>
$('#add-title').click(function() {
$('.demo6').stress().Title(2, "Hello World!");
});
$('#delete-title').click(function() {
$('.demo6').stress().deleteTitle(2);
});
</script>
<!-- OR -->
<div class="demo6" data-now="4" data-status="fail" data-title-on-now="Hah"></div>
<br>
<div class="text-center">
<button id="add-title" class="btn btn-primary">Add Title to Step 2</button>
<button id="delete-title" class="btn btn-primary">Delete Title at Step 2</button>
</div>
<script>
var demo6 = $('.demo6').stress({
total: 5
});
$('#add-title').click(function() {
demo6.Title(2, "Hello World!");
});
$('#delete-title').click(function() {
demo6.deleteTitle(2);
});
</script>