ejmProgress

5 Jun 202318 minutes to read

The Essential JavaScript Mobile Progress Bar widget shows the progress of a lengthy operation by filling a rectangle with chunks from left to right

Custom Design for HTML ProgressBar control.

$(element).ejmProgress()

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="progress" data-role="ejmprogress"></div>

HTML

<!-- Obtrusive way of rendering -->
<div id="progress"></div>
    <script>
        // Create progressbar
        $(function () {
            $("#progress").ejmProgress();
        });
    </script>

Requires

• module:jQuery

• module:ej.mobile.application

• module:ej.core

• module:ej.unobtrusive

• module:ej.mobile.core

• module:ej.data

• module:ej.touch

Members

enableCustomText Boolean

Specifies whether to accept custom text or not.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="progress" data-role="ejmprogress" data-ej-enablecustomtext=false></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        // Create progressbar
        $(function () {
            $("#progress").ejmProgress({ enableCustomText: false });
        });
    </script>

enabled Boolean

Specifies whether the control is enabled or disabled.

Default Value:

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="progress" data-role="ejmprogress" data-ej-enabled=true></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        // Create progressbar
        $(function () {
            $("#progress").ejmProgress({ enabled: false });
        });
    </script>

enablePersistence Boolean

Saves current model value to browser cookies for state maintenance. While refreshing the page it retains the model value and applies from browser cookies.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="progress" data-role="ejmprogress" data-ej-enablepersistence=false></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        // Create progressbar
        $(function () {
            $("#progress").ejmProgress({ enablePersistence: false });
        });
    </script>

height Int

Specifies the height of the ProgrssBar control.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-height=10></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({ height: 10 });
        });
    </script>

incrementStep Int

Specifies the value to be added in each step of increment.

Default Value:

• 0

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-incrementstep=2></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({ incrementStep: 2 });
        });
    </script>

maxValue Int

Specifies the maximum value.

Default Value:

• 100

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-maxvalue=90></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({ maxValue: 90 });
        });
    </script>

minValue Int

Specifies the minimum value.

Default Value:

• 0

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-minvalue=10></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({ minValue: 10 });
        });
    </script>

orientation Enum

Specifies the orientation whether it is horizontal or vertical. SeeOrientation

Default Value:

• ej.mobile.Progress.Orientation.Horizontal

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-orientation="horizontal"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress();
            $("#progress").ejmProgress({ orientation: ej.mobile.Progress.Orientation.Horizontal });
        });
    </script>

percentage Int

Specifies the initial value in percentage.

Default Value:

• 0

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-percentage=35></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({ percentage: 35 });
        });
    </script>

renderMode Enum

Changes the rendering mode. SeeRenderMode

Default Value:

• auto

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-rendermode="auto"></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({ renderMode: ej.mobile.RenderMode.Auto });
        });
    </script>

text String

Specifies the ProgressBar text

Default Value:

• “”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-enablecustomtext="true" data-ej-text="Loading..."></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({ enableCustomText: true, text: "Loading..." });
        });
    </script>

value Int

Specifies the initial value.

Default Value:

• 0

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-value=35></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({ value: 35 });
        });
    </script>

width Int

Specifies the width of the ProgressBar control.

Default Value:

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="progress" data-role="ejmprogress" data-ej-width=350></div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({ width: 350 });
        });
    </script>

Methods

getPercentage()

Get current value of the ProgressBar in percentage.

Example

HTML

<div id="progress" data-role="ejmprogress"></div>
    <script>
        // Get the current percent value
        $(function () {
            $("#progress").ejmProgress("getPercentage");
        });
    </script>

getValue()

Gets the currentvalue of the ProgressBar.

Example

HTML

<div id="progress" data-role="ejmprogress"></div>
    <script>
        // Get the current value
        $(function () {
            $("#progress").ejmProgress("getValue");
        });
    </script>

setCustomText()

Set the custom text on each action complete.

Example

HTML

<div id="progress" data-role="ejmprogress"></div>
    <script>
        // Set the custom text
        $(function () {
            $("#progress").ejmProgress("setCustomText", "Downloading..");
        });
    </script>

Events

change

Event triggers when the ProgressBar value changes.

Name	Type	Description
argument	Object	event parameters from ProgressBar Name Type Description cancel boolean If the event should be canceled; otherwise, false. model string Returns the progressbar model type string Returns the name of the event percentage int Returns the current element associated percentage value int Returns the current element associated value text string Returns the progressbar current text

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="progress" data-role="ejmprogress" data-ej-change="onChange"></div>
    <script>
        // change event
        function onChange(args) { //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({
                change: function (args) { //handle the event
                }
            });
        });
    </script>

complete

Event triggers when it reaches the maximum value.

Name	Type	Description
argument	Object	event parameters from progressbar Name Type Description cancel boolean If the event should be canceled; otherwise, false. model string returns the progressbar model type string returns the name of the event percentage int returns the current element associated percentage value int returns the current element associated value text string returns the progressbar current text

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="progress" data-role="ejmprogress" data-ej-complete="onComplete"></div>
    <script>
        // complete event
        function onComplete(args) { //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
<div id="progress"></div>
    <script>
        //complete event
        $(function () {
            $("#progress").ejmProgress({
                complete: function (args) { //handle the event
                }
            });
        });
    </script>

create

Event triggers when the progressbar is created.

Name	Type	Description
argument	Object	event parameters from progressbar Name Type Description cancel boolean If the event should be canceled; otherwise, false. model string Returns the progressbar model type string Returns the name of the event

Example

HTML

<!-- Unobtrusive way of rendering -->
  <div id="progress" data-role="ejmprogress" data-ej-create="onCreate"></div>
    <script>
        // Create event
        function onCreate(args) { //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({
                create: function (args) { //handle the event
                }
            });
        });
    </script>

start

Event triggers when progress started.

Name	Type	Description
argument	Object	event parameters from progressbar Name Type Description cancel boolean If the event should be canceled; otherwise, false. model string Returns the progressbar model type string Returns the name of the event percentage int Returns the current element associated percentage value int Returns the current element associated value

Example

HTML

<!-- Unobtrusive way of rendering -->
   <div id="progress" data-role="ejmprogress" data-ej-start="onStart"></div>
    <script>
        // start event
        function onStart(args) { //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="progress"></div>
    <script>
        $(function () {
            $("#progress").ejmProgress({
                start: function (args) { //handle the event
                }
            });
        });
    </script>