JQuery UI Part 8 : Membuat Progressbar Dengan 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title>JQuery UI Part 8 : Membuat Progressbar Dengan JQuery UI</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Progressbar Dengan JQuery UI | www.malasngoding.com</h1> <div id="progressbar"></div> </body> <script type="text/javascript"> $(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.
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> $(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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="js/jquery-ui/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Membuat Progressbar Dengan JQuery UI | www.malasngoding.com</h1> <div id="progressbar"></div> <br/><br/> <div id="progressbar2"> <div class="progress-label">Loading...</div> </div> <br/><br/> <div id="dialog" title="File Download"> <div class="progress-label">Starting download...</div> <div id="progressbar3"></div> </div> <button id="downloadButton">Start Download</button> </body> <script type="text/javascript"> $(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
1 2 3 4 5 6 7 |
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.
Baca juga : Membuat form inputan tanggal dengan jquery ui
See the Pen membuat progressbar dengan jquery ui by Malas Ngoding (@malasngoding) on CodePen.0
Tutorial Menarik Lainnya

JQuery UI Part 15 : Interaksi Selectable dan Sortable di JQuery UI


JQuery UI Part 14 : Membuat Resizable Dengan JQuery UI


JQuery Part 13 : Membuat Interaksi Droppable Dengan JQuery UI

