CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

15 January, 2019

JqueryUI - Progressbar

 Programing Coderfunda     January 15, 2019     JqueryUI, JqueryUI - Progressbar     No comments   

JqueryUI - Progressbar, JqueryUI, 


Progress bars indicate the completion percentage of an operation or process. We can categorize progress bar as determinate progress bar and indeterminate progress bar.
Determinate progress bar should only be used in situations where the system can accurately update the current status. A determinate progress bar should never fill from left to right, then loop back to empty for a single process.
If the actual status cannot be calculated, an indeterminate progress bar should be used to provide user feedback.
jQueryUI provides an easy-to-use progress bar widget that we can use to let users know that our application is hard at work performing the requested operation. jQueryUI provides progressbar() method to create progress bars.

Syntax

The progressbar() method can be used in two forms −
  • $(selector, context).progressbar (options) Method
  • $(selector, context).progressbar ("action", params) Method

$ (selector, context).progressbar (options) Method

The progressbar (options) method declares that an HTML element can be managed in the form of a progress bar. The options parameter is an object that specifies the appearance and behavior of progress bars.

Syntax

$(selector, context).progressbar (options);
You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −
$(selector, context).progressbar({option1: value1, option2: value2..... });
The following table lists the different options that can be used with this method −
Sr.No.Option & Description
1disabled This option when set to true disables the progress bars. By default its value is false.
2max This option sets the maximum value for a progress bar. By default its value is 100.
3value This option specifies the initial value of the progress bar. By default its value is 0.
The following section will show you a few working examples of progressbar functionality.

Default Functionality

The following example demonstrates a simple example of progressbar functionality, passing no parameters to the progressbar() method.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>
.ui-widget-header {
background
: #cedc98;
border
: 1px solid #DDDDDD;
color
: #333333;
font
-weight: bold;
}
</style>

<script>
$
(function() {
$
( "#progressbar-1" ).progressbar({
value
: 30
});
});
</script>
</head>

<body>
<div id = "progressbar-1"></div>
</body>
</html>
Let us save the above code in an HTML file progressbarexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
This example shows the creation of progress bar using of progressbar() method. This is a default determinate progress bar.

Use of max and value

The following example demonstrates the usage of two options values and max in the progressbar function of JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>
.ui-widget-header {
background
: #cedc98;
border
: 1px solid #DDDDDD;
color
: #333333;
font
-weight: bold;
}
</style>

<script>
$
(function() {
var progressbar = $( "#progressbar-2" );
$
( "#progressbar-2" ).progressbar({
value
: 30,
max
:300
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar
.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout
( progress, 100 );
}
}
setTimeout
( progress, 3000 );
});
</script>
</head>

<body>
<div id = "progressbar-2"></div>
</body>
</html>
Let us save the above code in an HTML file progressbarexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −
Here you can see that the progress bar fills from right to left and stops when the value reaches 300.

$ (selector, context).progressbar ("action", params) Method

The progressbar ("action", params) method can perform an action on progress bar, such as changing the percentage filled. The action is specified as a string in the first argument (e.g., "value" to change the percentage filled). Check out the actions that can be passed, in the following table.

Syntax

$(selector, context).progressbar ("action", params);;
The following table lists the different actions that can be used with this method −
Sr.No.Action & Description
1destroy This action removes the progress bar functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.
2destroy This action removes the progress bar functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.
3disable This action disables the progress bar functionality of an element. This method does not accept any arguments.
4enable This action enables the progress bar functionality. This method does not accept any arguments.
5option( optionName ) This action retrieves the value currently associated with specified optionName. Where optionName is a String.
6option This action gets an object containing key/value pairs representing the current progressbar options hash. This method does not accept any arguments.
7option( optionName, value ) This action sets the value of the progressbar option associated with the specified optionName.
8option( options ) This action sets one or more options for the progress bars. The argument options is a map of option-value pairs to be set.
9value This action retrieves the current value of options.value, that is, the percentage of fill in the progress bar.
10value( value ) This action specifies a new value to the percentage filled in the progress bar. The argument value can be a Number or Boolean.
11widget This action returns a jQuery object containing the progressbar. This method does not accept any arguments.

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable() and option( optionName, value ) methods.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>
.ui-widget-header {
background
: #cedc98;
border
: 1px solid #DDDDDD;
color
: #333333;
font
-weight: bold;
}
</style>

<script>
$
(function() {
$
( "#progressbar-3" ).progressbar({
value
: 30
});
$
( "#progressbar-3" ).progressbar('disable');
$
( "#progressbar-4" ).progressbar({
value
: 30
});
var progressbar = $( "#progressbar-4" );
$
( "#progressbar-4" ).progressbar( "option", "max", 1024 );
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar
.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout
( progress, 100 );
}
}
setTimeout
( progress, 3000 );
});
</script>
</head>

<body>
<h3>Disabled Progressbar</h3>
<div id = "progressbar-3"></div><br>
<h3>Progressbar with max value set</h3>
<div id = "progressbar-4"></div>
</body>
</html>
Let us save the above code in an HTML file progressbarexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Disabled Progress bar


Progress bar with max value set

Event Management on progress bar elements

In addition to the progressbar (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −
Sr.No.Event Method & Description
1change(event, ui) This event is triggered whenever the value of progress bar changes. Where event is of type Event, and ui is of type Object.
2complete(event, ui) This event is triggered when the progressbar reaches the maximumm value. Where event is of type Event, and ui is of type Object.
3create(event, ui) This event is triggered whenever progressbar is created. Where event is of type Event, and ui is of type Object.

Example

The following example demonstrates the event method usage during progressbar functionality. This example demonstrates the use of events change and complete.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<style>
.ui-widget-header {
background
: #cedc98;
border
: 1px solid #DDDDDD;
color
: #333333;
font
-weight: bold;
}
.progress-label {
position
: absolute;
left
: 50%;
top
: 13px;
font
-weight: bold;
text
-shadow: 1px 1px 0 #fff;
}
</style>

<script>
$
(function() {
var progressbar = $( "#progressbar-5" );
progressLabel
= $( ".progress-label" );
$
( "#progressbar-5" ).progressbar({
value
: false,
change
: function() {
progressLabel
.text(
progressbar
.progressbar( "value" ) + "%" );
},
complete
: function() {
progressLabel
.text( "Loading Completed!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar
.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout
( progress, 100 );
}
}
setTimeout
( progress, 3000 );
});
</script>
</head>

<body>
<div id = "progressbar-5">
<div class = "progress-label">
Loading...
</div>
</div>
</body>
</html>
  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • JqueryUI - Progressbar JqueryUI - Progressbar, JqueryUI,  Progress bars indicate the completion percentage of an operation or process. We can categorize progress bar… Read More
  • JqueryUI - ProgressbarJqueryUI - Progressbar, JqueryUI, Progress bars indicate the completion percentage of an operation or process. We can categorize progress bar as … Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Spring boot app (error: method getFirst()) failed to run at local machine, but can run on server
    The Spring boot app can run on the online server. Now, we want to replicate the same app at the local machine but the Spring boot jar file f...
  • Log activity in a Laravel app with Spatie/Laravel-Activitylog
      Requirements This package needs PHP 8.1+ and Laravel 9.0 or higher. The latest version of this package needs PHP 8.2+ and Laravel 8 or hig...
  • Laravel auth login with phone or email
          <?php     Laravel auth login with phone or email     <? php     namespace App \ Http \ Controllers \ Auth ;         use ...
  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh
    I had follow these steps to install an configure firebase to my cordova project for cloud messaging. https://medium.com/@felipepucinelli/how...
  • Vue3 :style backgroundImage not working with require
    I'm trying to migrate a Vue 2 project to Vue 3. In Vue 2 I used v-bind style as follow: In Vue 3 this doesn't work... I tried a...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024
  • pyspark XPath Query Returns Lists Omitting Missing Values Instead of Including None - 9/20/2024
  • SQL REPL from within Python/Sqlalchemy/Psychopg2 - 9/20/2024
  • MySql Explain with Tobias Petry - 9/20/2024
  • How to combine information from different devices into one common abstract virtual disk? [closed] - 9/20/2024

Laravel News

  • Auto-translate Application Strings with Laratext - 5/16/2025
  • Simplify Factory Associations with Laravel's UseFactory Attribute - 5/13/2025
  • Improved Installation and Frontend Hooks in Laravel Echo 2.1 - 5/15/2025
  • Filter Model Attributes with Laravel's New except() Method - 5/13/2025
  • Arr::from() Method in Laravel 12.14 - 5/14/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda