The jQuery-Mobile-Progress-Bar-with-Percentage is a plugin for jQuery Mobile which creates, manages, starts, stops, resumes and explicitly sets the value of a progress bar or creates an indefinite loading bar. In addition it provides the options to set the progress bar's outer theme and inner filling theme on the basis of the jQuery Mobile standard themes, to show a percentage completion counter, to set whether the progress bar has normal or mini size, to define the interval which specifies the filling frequency rate, to configure the max value of the outer bar and set the initial value of the filling inner bar. The JavaScript prototype chaining method is used in order to enable the chaining of separate method calls where each call is made on the same instance.
Tested using:
- jQuery 1.8.2 and jQuery Mobile 1.2.0
- jQuery 1.8.2 and jQuery Mobile 1.3.0
- jQuery 1.9.1 and jQuery Mobile 1.3.1
The examples folder contains 11 sample HTML files.
- example_1.html: mini tolito progress bar with percentage counter
- example_2.html: jQuery Mobile dialog with embedded tolito progress bar
- example_3.html: overlay with centered tolito progress bar
- example_4.html: jQuery Mobile dialog with a tolito progress bar which starts after a delay period
- example_5.html: basic default mini tolito progress bar
- example_6.html: tolito progress bar which stops after 5 seconds
- example_7.html: tolito progress bar which stops after 5 seconds and resumes after 3 seconds
- example_8.html: shows how to set explicitly the tolito progress bar's status
- example_9.html: shows how to attach a handler for the event which notifies that the progress bar is completed
- example_10.html: shows how to create an indefinite progress bar
- example_11.html: shows how to destroy a created progress bar
Step 1
-------
Include the following CSS and JS files inside the head section of your HTML file. Please note
that you can use local copies of the jQuery and jQuery Mobile CSS and JS files instead of the
CDN hosted ones. The X.X.X represents the digits which define a specific version (ex: 1.8.2).
<!-- /jQuery Mobile X.X.X CSS file -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/X.X.X/jquery.mobile-X.X.X.min.css" />
<!-- /Tolito CSS file -->
<link rel="stylesheet" type="text/css" href="./css/tolito-X.X.X.min.css" />
<!-- /jQuery X.X.X JS CDN hosted file -->
<script src="http://code.jquery.com/jquery-X.X.X.min.js"></script>
<!-- /jQuery Mobile X.X.X JS CDN hosted file -->
<script src="http://code.jquery.com/mobile/X.X.X/jquery.mobile-X.X.X.min.js"></script>
<!-- /Tolito JS file -->
<script type="text/javascript" src="./js/tolito-X.X.X.min.js"></script>
Step 2
-------
Add the following HTML snippet inside your jQM page:
<!-- /Tolito Progress Bar v1.0 for jQuery Mobile -->
<div id="progressbar"></div>
Step 3
-------
Use the following snippet to configure, build and init the progress bar. It is not mandatory
to set the options. The TolitoProgressBar constructor expects to receive as an argument
the element id of the div tag created in Step 2. Check the examples for usage instructions.
TolitoProgressBar('progressbar')
.setOuterTheme('b')
.setInnerTheme('e')
.isMini(false)
.setMax(100)
.setStartFrom(0)
.setInterval(10)
.showCounter(true)
.logOptions()
.build()
.run();
Listen the complete event:
When the progress bar is completed, a complete event is triggered. The below piece of code
attaches an event handler to the document element:
$(document)
.on('complete', '#progressbar', function () {
// your code
});
Configuration setters, build, init, stop and destroy functions:
setOuterTheme(theme)
Usage: Optional
Description: Sets the outer theme of the progress bar. The theme argument
must be 'a' or 'b' or 'c' or 'd' or 'e'. The default theme is based
on the inherit chain or the default value 'c'.
setInnerTheme(theme)
Usage: Optional
Description: Sets the filling theme of the progress bar. The theme argument
must be 'a' or 'b' or 'c' or 'd' or 'e'. The default theme is based
on the inherit chain or the default value 'c'.
isMini(bool)
Usage: Optional
Description: Sets whether the progress bar has mini size. The bool argument
must be true or false. The default value is false.
setMax(max)
Usage: Optional
Description: Sets the max value of the progress bar. The progress bar is
considered as completed when the counter reaches the specified
max value. The default value is 100.
setStartFrom(startFrom)
Usage: Optional
Decsription: Sets the initial value of the filling bar. For example if a progress
bar has max value 100 and the startFrom value is 50 then the bar
will start loading from value 50 (the middle of the bar). The default
value is 0.
setInterval(interval)
Usage: Optional
Description: Sets the progress bar's loading frequency rate in milliseconds. The
default value is 100.
showCounter(bool)
Usage: Optional
Description: Sets whether a percentage completion counter is appeared or not. The
bool argument must be true or false. The default value is true.
isIndefinite(bool)
Usage: Optional
Description: Sets whether the progress bar is indefinite. The bool value must be
true or false. The default value is false.
logOptions()
Usage: Optional
Description: Logs the configured options in the console.
build()
Usage: Mandatory
Description: Creates the progress bar instance.
run()
Usage: Optional
Description: Inits or resumes the loading/filling procedure.
stop()
Usage: Optional
Description: Stops the loading/filling procedure.
setValue(val)
Usage: Optional
Description: Explicitly sets the value of the progress bar.
destroy()
Usage: Optional
Description: Destroys the progress bar. The progress bar div is rolled back to its
initial state. Removes possible event handler attached to the document element and
triggered when the progress bar is finished.
Apache License Version 2.0 / Check the LICENSE.txt file for more details.
https://github.com/tolis-e/jQuery-Mobile-Progress-Bar-with-Percentage