ejmProgress

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>