#JQuery UI

JQuery UI Part 8 : Membuat Progressbar Dengan JQuery UI

By Diki Alfarabi Hadi
10 February 2016
JQuery UI

JQuery UI Part 8 : Membuat Progressbar Dengan JQuery UI – Masih di dalam kategori tutorial jquery ui di www.malasngoding.com. jika teman-teman mengikuti tutorial-tutorial jquery ui sebelumnya di malasngoding.com maka sekarang kita telah sampai pada tutorial jquery ui part 8. yaitu tentang cara membuat progressbar dengan jquery ui. apa sih progressbar itu ? pasti sudah tidak asing lagi. progressbar merupakan fitur yang berguna untuk menggambarkan persentase nilai begitu ya. begitu lah kira-kiranya.

JQuery UI Part 8 : Membuat Progressbar Dengan JQuery UI

Langsung aja biar gak bingung. kita mulai JQuery UI Part 8 : Membuat Progressbar Dengan JQuery UI. jadi ada beberapa jenis progressbar yang di sediakan oleh jquery ui. ada progressbar yang standart. dan ada juga progressbar yang berbentuk seperti widget login. langsung saja kita buat 3 contoh untuk lebih mudah di pelajari.

progressbar1.html

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 8 : Membuat Progressbar Dengan JQuery UI</title>

</head>

<body>

<h1>Membuat Progressbar Dengan JQuery UI | www.malasngoding.com</h1>

</body>

$(document).ready(function(){

// progressbar 1

$( "#progressbar" ).progressbar({

value: 37

});

</script>

</html>

contoh di atas adalah contoh membuat progressbar standar. pertama kita buat dulu sebuah div dan kita beri tanda dengan id progressbar. dan kemudian kita berikan fungsi progressbar() untuk membuat progressbar sederhana. dan pada value letakkan nilai untuk progressbar.

$(document).ready(function(){

// progressbar 1

$( "#progressbar" ).progressbar({

value: 37

});

</script>

dan contoh progressbar lainnya

JQuery UI Part 8 : Membuat Progressbar Dengan JQuery UI

progressbar.html

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<!DOCTYPE html>

<html>

<head>

<title>JQuery UI Part 8 : Membuat Progressbar Dengan JQuery UI</title>

</head>

<body>

<h1>Membuat Progressbar Dengan JQuery UI | www.malasngoding.com</h1>

<div class="progress-label">Loading...</div>

</div>

<div class="progress-label">Starting download...</div>

</div>

<button id="downloadButton">Start Download</button>

</body>

$(document).ready(function(){

// progressbar 1

$( "#progressbar" ).progressbar({

value: 37

});

// progressbar 2

var progressbar = $( "#progressbar2" ),

progressLabel = $( ".progress-label" );

progressbar.progressbar({

value: false,

change: function() {

progressLabel.text( progressbar.progressbar( "value" ) + "%" );

complete: function() {

progressLabel.text( "Complete!" );

}

});

function progress() {

var val = progressbar.progressbar( "value" ) || 0;

progressbar.progressbar( "value", val + 2 );

if ( val < 99 ) {

setTimeout( progress, 80 );

}

setTimeout( progress, 2000 );

// progressbar 3

var progressTimer,

progressbar = $( "#progressbar3" ),

progressLabel = $( ".progress-label" ),

dialogButtons = [{

text: "Cancel Download",

click: closeDownload

}],

dialog = $( "#dialog" ).dialog({

autoOpen: false,

closeOnEscape: false,

resizable: false,

buttons: dialogButtons,

open: function() {

progressTimer = setTimeout( progress, 2000 );

beforeClose: function() {

downloadButton.button( "option", {

disabled: false,

label: "Start Download"

});

}

}),

downloadButton = $( "#downloadButton" )

.button()

.on( "click", function() {

$( this ).button( "option", {

disabled: true,

label: "Downloading..."

});

dialog.dialog( "open" );

});

progressbar.progressbar({

value: false,

change: function() {

progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );

complete: function() {

progressLabel.text( "Complete!" );

dialog.dialog( "option", "buttons", [{

text: "Close",

click: closeDownload

}]);

$(".ui-dialog button").last().focus();

}

});

function progress() {

var val = progressbar.progressbar( "value" ) || 0;

progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );

if ( val <= 99 ) {

progressTimer = setTimeout( progress, 50 );

}

function closeDownload() {

clearTimeout( progressTimer );

dialog

.dialog( "option", "buttons", dialogButtons )

.dialog( "close" );

progressbar.progressbar( "value", false );

progressLabel

.text( "Starting download..." );

downloadButton.focus();

}

});

</script>

</html>

style.css

body{

font-family: sans-serif;

}

h1{

text-align: center;

}

jquery ui part 8 membuat progressbar dengan jquery ui

progressbar pun selesai. teman-teman bisa melihat dokumentasi nya dari jquery ui . klik di sini untuk melihat tutorial progressbar jquery ui di situs resminya. JQuery UI Part 8 : Membuat Progressbar Dengan JQuery UI.

See the Pen membuat progressbar dengan jquery ui by Malas Ngoding (@malasngoding) on CodePen.0

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.