Home > Web Front-end > JS Tutorial > jQuery EasyUI Tutorial-ProgressBar (Progress Bar)

jQuery EasyUI Tutorial-ProgressBar (Progress Bar)

黄舟
Release: 2016-12-27 16:45:22
Original
1913 people have browsed it

jQuery EasyUI Tutorial-ProgressBar (Progress Bar) This component is very practical in work projects. In order to prevent users from thinking that the program is dead during the progress of a certain continuous work in front-end development, we need to have An active progress bar indicates that the process is in progress.

Are you interested in this component? See below.

Use $.fn.progressbar.defaults to override the default value object.

The progress bar provides feedback showing the progress of a long-running operation. A progress bar that can be updated to let the user know that an operation is currently being performed.

jQuery EasyUI Tutorial-ProgressBar (Progress Bar)

Use case:

Create a progress bar

Create a progress bar using two methods: label and Javascript.

1. Use HTML tags or programs to create a progress bar component. Creating from a tag is even easier, add the 'easyui-progressbar' class ID to the

tag.
<div id=”p” class=”easyui-progressbar” data-options=”value:60″ style=”width:400px;”></div>
Copy after login

2. Use Javascript to create a progress bar.

<div id=”p” style=”width:400px;”></div>
Copy after login
$(‘#p’).progressbar({
value: 60
});
Copy after login

Getting and setting values

Getting the current value and setting a new value to the progress bar control.

var value = $(‘#p’).progressbar(‘getValue’);
if (value < 100){
value += Math.floor(Math.random() * 10);
$(‘#p’).progressbar(‘setValue’, value);
}
Copy after login

Properties:

jQuery EasyUI Tutorial-ProgressBar (Progress Bar)


Events:

jQuery EasyUI Tutorial-ProgressBar (Progress Bar)

Method:

jQuery EasyUI Tutorial-ProgressBar (Progress Bar)

The above is the content of the jQuery EasyUI tutorial-ProgressBar (progress bar). For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template