[Summary view] [Print] [Text view]

   1  
   2  <ul class="UIAPIPlugin-toc">
   3  <li><a href="#overview">Overview</a></li>
   4  <li><a href="#options">Options</a></li>
   5  <li><a href="#events">Events</a></li>
   6  <li><a href="#methods">Methods</a></li>
   7  <li><a href="#theming">Theming</a></li>
   8  </ul>
   9  <div class="UIAPIPlugin">
  10    <h1>jQuery UI Progressbar</h1>
  11    <div id="overview">
  12      <h2 class="top-header">Overview</h2>
  13      <div id="overview-main">
  14          <p>
  15  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.
  16  </p>
  17  <p>
  18  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.
  19  </p>
  20      </div>
  21      <div id="overview-dependencies">
  22          <h3>Dependencies</h3>
  23          <ul>
  24  <li>UI Core</li>
  25  </ul>
  26      </div>
  27      <div id="overview-example">
  28          <h3>Example</h3>
  29          <div id="overview-example" class="example">
  30  <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
  31  <p><div id="demo" class="tabs-container" rel="100">
  32  A simple jQuery UI Progressbar.<br />
  33  </p>
  34  <pre>$(&quot;#progressbar&quot;).progressbar({ value: 37 });
  35  </pre>
  36  <p></div><div id="source" class="tabs-container">
  37  </p>
  38  <pre>&lt;!DOCTYPE html&gt;
  39  &lt;html&gt;
  40  &lt;head&gt;
  41    &lt;link href=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  42    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  43    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  44    &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  45  &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  46    &lt;script&gt;
  47    $(document).ready(function() {
  48      $(&quot;#progressbar&quot;).progressbar({ value: 37 });
  49    });
  50    &lt;/script&gt;
  51  &lt;/head&gt;
  52  &lt;body style="font-size:62.5%;"&gt;
  53    
  54  &lt;div id=&quot;progressbar&quot;&gt;&lt;/div&gt;
  55  
  56  &lt;/body&gt;
  57  &lt;/html&gt;
  58  </pre>
  59  <p></div>
  60  </p><p></div>
  61      </div>
  62    </div>
  63    <div id="options">
  64      <h2 class="top-header">Options</h2>
  65      <ul class="options-list">
  66        
  67  <li class="option" id="option-disabled">
  68    <div class="option-header">
  69      <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
  70      <dl>
  71        <dt class="option-type-label">Type:</dt>
  72          <dd class="option-type">Boolean</dd>
  73        
  74        <dt class="option-default-label">Default:</dt>
  75          <dd class="option-default">false</dd>
  76        
  77      </dl>
  78    </div>
  79    <div class="option-description">
  80      <p>Disables (true) or enables (false) the progressbar. Can be set when initialising (first creating) the progressbar.</p>
  81    </div>
  82    <div class="option-examples">
  83      <h4>Code examples</h4>
  84      <dl class="option-examples-list">
  85      
  86  <dt>
  87    Initialize a progressbar with the <code>disabled</code> option specified.
  88  </dt>
  89  <dd>
  90  <pre><code>$( ".selector" ).progressbar({ disabled: true });</code></pre>
  91  </dd>
  92  
  93      
  94  <dt>
  95    Get or set the <code>disabled</code> option, after init.
  96  </dt>
  97  <dd>
  98  <pre><code>//getter
  99  var disabled = $( ".selector" ).progressbar( "option", "disabled" );
 100  //setter
 101  $( ".selector" ).progressbar( "option", "disabled", true );</code></pre>
 102  </dd>
 103  
 104      </dl>
 105    </div>
 106  </li>
 107  
 108  
 109  <li class="option" id="option-value">
 110    <div class="option-header">
 111      <h3 class="option-name"><a href="#option-value">value</a></h3>
 112      <dl>
 113        <dt class="option-type-label">Type:</dt>
 114          <dd class="option-type">Number</dd>
 115        
 116        <dt class="option-default-label">Default:</dt>
 117          <dd class="option-default">0</dd>
 118        
 119      </dl>
 120    </div>
 121    <div class="option-description">
 122      <p>The value of the progressbar.</p>
 123    </div>
 124    <div class="option-examples">
 125      <h4>Code examples</h4>
 126      <dl class="option-examples-list">
 127      
 128  <dt>
 129    Initialize a progressbar with the <code>value</code> option specified.
 130  </dt>
 131  <dd>
 132  <pre><code>$( ".selector" ).progressbar({ value: 37 });</code></pre>
 133  </dd>
 134  
 135      
 136  <dt>
 137    Get or set the <code>value</code> option, after init.
 138  </dt>
 139  <dd>
 140  <pre><code>//getter
 141  var value = $( ".selector" ).progressbar( "option", "value" );
 142  //setter
 143  $( ".selector" ).progressbar( "option", "value", 37 );</code></pre>
 144  </dd>
 145  
 146      </dl>
 147    </div>
 148  </li>
 149  
 150      </ul>
 151    </div>
 152    <div id="events">
 153      <h2 class="top-header">Events</h2>
 154      <ul class="events-list">
 155        
 156  <li class="event" id="event-change">
 157    <div class="event-header">
 158      <h3 class="event-name"><a href="#event-change">change</a></h3>
 159      <dl>
 160        <dt class="event-type-label">Type:</dt>
 161          <dd class="event-type">progressbarchange</dd>
 162      </dl>
 163    </div>
 164    <div class="event-description">
 165      <p>This event is triggered when the value of the progressbar changes.</p>
 166    </div>
 167    <div class="event-examples">
 168      <h4>Code examples</h4>
 169      <dl class="event-examples-list">
 170      
 171  <dt>
 172    Supply a callback function to handle the <code>change</code> event as an init option.
 173  </dt>
 174  <dd>
 175  <pre><code>$( &quot;.selector&quot; ).progressbar({
 176     change: function(event, ui) { ... }
 177  });</code></pre>
 178  </dd>
 179  
 180      
 181  <dt>
 182    Bind to the <code>change</code> event by type: <code>progressbarchange</code>.
 183  </dt>
 184  <dd>
 185  <pre><code>$( &quot;.selector&quot; ).bind( &quot;progressbarchange&quot;, function(event, ui) {
 186    ...
 187  });</code></pre>
 188  </dd>
 189  
 190      </dl>
 191    </div>
 192  </li>
 193  
 194      </ul>
 195    </div>
 196    <div id="methods">
 197      <h2 class="top-header">Methods</h2>
 198      <ul class="methods-list">
 199        
 200  <li class="method" id="method-destroy">
 201    <div class="method-header">
 202      <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
 203      <dl>
 204        <dt class="method-signature-label">Signature:</dt>
 205          <dd class="method-signature">.progressbar( "destroy"
 206  
 207  
 208  
 209  
 210  
 211  
 212  
 213  )</dd>
 214      </dl>
 215    </div>
 216    <div class="method-description">
 217      <p>Remove the progressbar functionality completely. This will return the element back to its pre-init state.</p>
 218    </div>
 219  </li>
 220  
 221  
 222  <li class="method" id="method-disable">
 223    <div class="method-header">
 224      <h3 class="method-name"><a href="#method-disable">disable</a></h3>
 225      <dl>
 226        <dt class="method-signature-label">Signature:</dt>
 227          <dd class="method-signature">.progressbar( "disable"
 228  
 229  
 230  
 231  
 232  
 233  
 234  
 235  )</dd>
 236      </dl>
 237    </div>
 238    <div class="method-description">
 239      <p>Disable the progressbar.</p>
 240    </div>
 241  </li>
 242  
 243  
 244  <li class="method" id="method-enable">
 245    <div class="method-header">
 246      <h3 class="method-name"><a href="#method-enable">enable</a></h3>
 247      <dl>
 248        <dt class="method-signature-label">Signature:</dt>
 249          <dd class="method-signature">.progressbar( "enable"
 250  
 251  
 252  
 253  
 254  
 255  
 256  
 257  )</dd>
 258      </dl>
 259    </div>
 260    <div class="method-description">
 261      <p>Enable the progressbar.</p>
 262    </div>
 263  </li>
 264  
 265  
 266  <li class="method" id="method-option">
 267    <div class="method-header">
 268      <h3 class="method-name"><a href="#method-option">option</a></h3>
 269      <dl>
 270        <dt class="method-signature-label">Signature:</dt>
 271          <dd class="method-signature">.progressbar( "option"
 272  
 273  , optionName
 274  
 275  , <span class="optional">[</span>value<span class="optional">] </span>
 276  
 277  
 278  
 279  )</dd>
 280      </dl>
 281    </div>
 282    <div class="method-description">
 283      <p>Get or set any progressbar option. If no value is specified, will act as a getter.</p>
 284    </div>
 285  </li>
 286  
 287  
 288  <li class="method" id="method-option">
 289    <div class="method-header">
 290      <h3 class="method-name"><a href="#method-option">option</a></h3>
 291      <dl>
 292        <dt class="method-signature-label">Signature:</dt>
 293          <dd class="method-signature">.progressbar( "option"
 294  
 295  , options
 296  
 297  
 298  
 299  
 300  
 301  )</dd>
 302      </dl>
 303    </div>
 304    <div class="method-description">
 305      <p>Set multiple progressbar options at once by providing an options object.</p>
 306    </div>
 307  </li>
 308  
 309  
 310  <li class="method" id="method-widget">
 311    <div class="method-header">
 312      <h3 class="method-name"><a href="#method-widget">widget</a></h3>
 313      <dl>
 314        <dt class="method-signature-label">Signature:</dt>
 315          <dd class="method-signature">.progressbar( "widget"
 316  
 317  
 318  
 319  
 320  
 321  
 322  
 323  )</dd>
 324      </dl>
 325    </div>
 326    <div class="method-description">
 327      <p>Returns the .ui-progressbar element.</p>
 328    </div>
 329  </li>
 330  
 331  
 332  <li class="method" id="method-value">
 333    <div class="method-header">
 334      <h3 class="method-name"><a href="#method-value">value</a></h3>
 335      <dl>
 336        <dt class="method-signature-label">Signature:</dt>
 337          <dd class="method-signature">.progressbar( "value"
 338  
 339  , <span class="optional">[</span>value<span class="optional">] </span>
 340  
 341  
 342  
 343  
 344  
 345  )</dd>
 346      </dl>
 347    </div>
 348    <div class="method-description">
 349      <p>This method gets or sets the current value of the progressbar.</p>
 350    </div>
 351  </li>
 352  
 353      </ul>
 354    </div>
 355    <div id="theming">
 356      <h2 class="top-header">Theming</h2>
 357      <p>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.
 358  </p>
 359    <p>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.
 360  </p>
 361      
 362    <h3>Sample markup with jQuery UI CSS Framework classes</h3>
 363    &lt;div class=&quot;<strong>ui-progressbar </strong>ui-widget ui-widget-content ui-corner-all&quot;&gt;<br />
 364      &nbsp;&nbsp;&nbsp;&lt;div style=&quot;width: 37%;&quot; class=&quot;<strong>ui-progressbar-value</strong> ui-widget-header ui-corner-left&quot;&gt;&lt;/div&gt;<br />
 365      &lt;/div&gt;
 366    <p class="theme-note">
 367      <strong>
 368        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 &lt;div&gt;&lt;/div&gt;.
 369      </strong>
 370    </p>
 371  
 372    </div>
 373  </div>
 374  
 375  </p><!-- 
 376  Pre-expand include size: 18884 bytes
 377  Post-expand include size: 21835 bytes
 378  Template argument size: 8647 bytes
 379  Maximum: 2097152 bytes
 380  -->
 381  
 382  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3348-1!1!0!!en!2 and timestamp 20100421035336 -->