jQuery EasyUI Basis-Plugin -Progressbar Fortschrittsbalken

jQuery EasyUI 插件jQuery EasyUI Plugin

Überschreiben Sie die Standardeinstellungen über $.fn.progressbar.defaults.

Die Progressbar bietet Feedback zum Fortschritt lang andauernder Operationen. Der Fortschritt kann aktualisiert werden, damit Benutzer wissen, welche Operation gerade ausgeführt wird.

Abhängigkeiten

  • none

Nutzung

Eine ProgressBar erstellen

Die ProgressBar-Komponente kann aus HTML-Markup oder programmgesteuert erstellt werden. Das Erstellen aus Markup ist einfacher; fügen Sie die Klasse 'easyui-progressbar' zum <div>-Tag hinzu.

<div id="p" class="easyui-progressbar" data-options="value:60" style="width:400px;"></div>

Eine ProgressBar mit JavaScript erstellen.

<div id="p" style="width:400px;"></div>

$('#p').progressbar({
    value: 60
});

Wert abrufen oder festlegen

Wir rufen den aktuellen Wert ab und legen einen neuen Wert für diese Komponente fest.

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

Eigenschaften

Name Type Beschreibung Standardwert
width string Legt die Breite der Progressbar fest. auto
height number Die Höhe der Komponente. Diese Eigenschaft ist seit Version 1.3.2 verfügbar. 22
value number Ein Prozentsatz. 0
text string Die Textvorlage, die auf der Komponente angezeigt wird. {value}%

Ereignisse

Name Parameters Beschreibung
onChange newValue,oldValue Wird ausgelöst, wenn sich der Wert ändert.
Codebeispiel:
$('#p').progressbar({
    onChange: function(value){
        alert(value)
    }
});

Methoden

Name Parameters Beschreibung
options none Gibt das Optionsobjekt zurück.
resize width Ändert die Größe der Komponente.
Codebeispiel:
$('#p').progressbar('resize');  // 调整进度条为初始宽度
$('#p').progressbar('resize', 350);  // 调整进度条为一个新的宽度
getValue none Gibt den aktuellen Fortschrittswert zurück.
setValue value Legt einen neuen Fortschrittswert fest.
jQuery EasyUI 插件jQuery EasyUI Plugin Weitere Erweiterungen