From af15f2c4a192dea02aab9e519defc68c71763ec4 Mon Sep 17 00:00:00 2001 From: yvesf Date: Mon, 22 Nov 2010 14:34:55 +0100 Subject: jquery ui --- static/development-bundle/docs/progressbar.html | 420 ++++++++++++++++++++++++ 1 file changed, 420 insertions(+) create mode 100644 static/development-bundle/docs/progressbar.html (limited to 'static/development-bundle/docs/progressbar.html') diff --git a/static/development-bundle/docs/progressbar.html b/static/development-bundle/docs/progressbar.html new file mode 100644 index 0000000..4b5fec7 --- /dev/null +++ b/static/development-bundle/docs/progressbar.html @@ -0,0 +1,420 @@ + + +
+

jQuery UI Progressbar

+
+

Overview

+
+

+The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it's parent container by default. +

+

+This is a determinate progress bar, meaning that it should only be used in situations where the system can accurately update the current status complete. A determinate progress bar should never fill from left to right, then loop back to empty for a single process -- if the actual percent complete status cannot be calculated, an indeterminate progress bar (coming soon) or spinner animation is a better way to provide user feedback. +

+
+
+

Dependencies

+
    +
  • UI Core
    • +
+
+
+

Example

+
+ +

+A simple jQuery UI Progressbar.
+

+
$("#progressbar").progressbar({ value: 37 });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#progressbar").progressbar({ value: 37 });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="progressbar"></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the progressbar. Can be set when initialising (first creating) the progressbar.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a progressbar with the disabled option specified. +
    +
    +
    $( ".selector" ).progressbar({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
+var disabled = $( ".selector" ).progressbar( "option", "disabled" );
+//setter
+$( ".selector" ).progressbar( "option", "disabled", true );
    +
    + +
    +
    +
    • + + +
  • +
    +

    value

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    The value of the progressbar.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a progressbar with the value option specified. +
    +
    +
    $( ".selector" ).progressbar({ value: 37 });
    +
    + + +
    + Get or set the value option, after init. +
    +
    +
    //getter
+var value = $( ".selector" ).progressbar( "option", "value" );
+//setter
+$( ".selector" ).progressbar( "option", "value", 37 );
    +
    + +
    +
    +
    • + +
+
+
+

Events

+
    + +
  • +
    +

    change

    +
    +
    Type:
    +
    progressbarchange
    +
    +
    +
    +

    This event is triggered when the value of the progressbar changes.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).progressbar({
+   change: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the change event by type: progressbarchange. +
    +
    +
    $( ".selector" ).bind( "progressbarchange", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + + +
  • +
    +

    complete

    +
    +
    Type:
    +
    progressbarcomplete
    +
    +
    +
    +

    This event is triggered when the value of the progressbar reaches the maximum value of 100.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the complete event as an init option. +
    +
    +
    $( ".selector" ).progressbar({
+   complete: function(event, ui) { ... }
+});
    +
    + + +
    + Bind to the complete event by type: progressbarcomplete. +
    +
    +
    $( ".selector" ).bind( "progressbarcomplete", function(event, ui) {
+  ...
+});
    +
    + +
    +
    +
    • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .progressbar( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the progressbar functionality completely. This will return the element back to its pre-init state.

    +
    +
    • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .progressbar( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the progressbar.

    +
    +
    • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .progressbar( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the progressbar.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .progressbar( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any progressbar option. If no value is specified, will act as a getter.

    +
    +
    • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .progressbar( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple progressbar options at once by providing an options object.

    +
    +
    • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .progressbar( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-progressbar element.

    +
    +
    • + + +
  • +
    +

    value

    +
    +
    Signature:
    +
    .progressbar( "value" + +, [value] + + + + + +)
    +
    +
    +
    +

    This method gets or sets the current value of the progressbar.

    +
    +
    • + +
+
+
+

Theming

+

The jQuery UI Progressbar plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.progressbar.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
+    <div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
+ </div> +

+ + Note: This is a sample of markup generated by the progressbar plugin, not markup you should use to create a progressbar. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + -- cgit v1.2.1