UMroundProgressView [JQuery Plugin] - DEMO

Usage

Make shure you have embedded jquery.js and jquery.UMroundProgressView.js
      
<!DOCTYPE html/>
<html>
 <head>
       <title>your title</title>
       <script type="text/javascript" src="src/jquery.min.js"></script>
       <script type="text/javascript" src="src/jquery.UMroundProgressView.min.js"></script>
</head>
     
Then you should instance the UMroundProgressView like in the examples below:
      
<!DOCTYPE html/>
<html>
 <head>
       <title>your title</title>
       <script type="text/javascript" src="src/jquery.min.js"></script>
       <script type="text/javascript" src="src/jquery.UMroundProgressView.min.js"></script>
       <script type="text/javascript">
           $('document')ready(function() {
               var progress = $('#idOfDestination').UMroundProgressView({options});
           });
       </script>
</head>
     

Options

Triggers

      
  var instance = $('#element').UMroundProgressView({options});

      instance.setValue('amount'); // udates the instance with the given value.
     
Output Code

simple initialization with no options

                      
  var progress1 = $('#progressView1').UMroundProgressView();
                     
                

initialization with size

                      
  var progress2 = $('#progressView2').UMroundProgressView({size: 130});
                     
                

initialization with start value

                      
  var progress3 = $('#progressView3').UMroundProgressView({initialValue: 0.4});
                     
                

initialization with start value and custom color

                      
  var progress4 = $('#progressView4').UMroundProgressView({initialValue: 0.6, color: '#FF8000'});
                     
                

initialization with start value and custom color and custom thickness

                      
  var progress5 = $('#progressView5').UMroundProgressView({initialValue: 0.5, color: '#2869FF', thickness: '10'});
                     
                

How to trigger

Here we use a jquery.slide(); to manipulate the instanced UMroundProgressView. The slider will user the setValue() trigger of the UMroundProgressView instance.

Output Code
                     
  $('document').ready(function() {
    var progressTrigger = $('#progressTrigger').UMroundProgressView();

    // initialize the slider for trigger example
    $('#slider').slider({min: 0, max: 1, step: 0.01, slide: function(event, ui) {

        progressTrigger.setValue(ui.value); // here the trigger is used to set the new value to UMroundProgressView

     }
    });
  });
                    
               

Example with start-value

                     
  $('document').ready(function() {
    var progressTrigger2 = $('#progressTrigger2').UMroundProgressView({initalValue: 0.4});

    // initialize the slider for trigger example
    $('#slider2').slider({min: 0, max: 1, value: 0.4, step: 0.01, slide: function(event, ui) {

        progressTrigger2.setValue(ui.value); // here the trigger is used to set the new value to UMroundProgressView

     }
    });
  });
                    
               

Discuss,ask and download on GitHub:

https://github.com/miko007/UMroundProgressView

© 2013, MikO (Michael Ochmann)