[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 type=&quot;text/css&quot; href=&quot;http://jqueryui.com/latest/themes/base/ui.all.css&quot; rel=&quot;stylesheet&quot; /&gt;
  42    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/jquery-1.3.2.js&quot;&gt;&lt;/script&gt;
  43    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.core.js&quot;&gt;&lt;/script&gt;
  44    &lt;script type=&quot;text/javascript&quot; src=&quot;http://jqueryui.com/latest/ui/ui.progressbar.js&quot;&gt;&lt;/script&gt;
  45    &lt;script type="text/javascript"&gt;
  46    $(document).ready(function(){
  47      $(&quot;#progressbar&quot;).progressbar({ value: 37 });
  48    });
  49    &lt;/script&gt;
  50  &lt;/head&gt;
  51  &lt;body style="font-size:62.5%;"&gt;
  52    
  53  &lt;div id=&quot;progressbar&quot;&gt;&lt;/div&gt;
  54  
  55  &lt;/body&gt;
  56  &lt;/html&gt;
  57  </pre>
  58  <p></div>
  59  </p><p></div>
  60      </div>
  61    </div>
  62    <div id="options">
  63      <h2 class="top-header">Options</h2>
  64      <ul class="options-list">
  65        
  66  <li class="option" id="option-value">
  67    <div class="option-header">
  68      <h3 class="option-name"><a href="#option-value">value</a></h3>
  69      <dl>
  70        <dt class="option-type-label">Type:</dt>
  71          <dd class="option-type">Number</dd>
  72        
  73        <dt class="option-default-label">Default:</dt>
  74          <dd class="option-default">0</dd>
  75        
  76      </dl>
  77    </div>
  78    <div class="option-description">
  79      <p>The value of the progressbar.</p>
  80    </div>
  81    <div class="option-examples">
  82      <h4>Code examples</h4>
  83      <dl class="option-examples-list">
  84      
  85  <dt>
  86    Initialize a progressbar with the <code>value</code> option specified.
  87  </dt>
  88  <dd>
  89  <pre><code>$('.selector').progressbar({ value: 37 });</code></pre>
  90  </dd>
  91  
  92      
  93  <dt>
  94    Get or set the <code>value</code> option, after init.
  95  </dt>
  96  <dd>
  97  <pre><code>//getter
  98  var value = $('.selector').progressbar('option', 'value');
  99  //setter
 100  $('.selector').progressbar('option', 'value', 37);</code></pre>
 101  </dd>
 102  
 103      </dl>
 104    </div>
 105  </li>
 106  
 107      </ul>
 108    </div>
 109    <div id="events">
 110      <h2 class="top-header">Events</h2>
 111      <ul class="events-list">
 112        
 113  <li class="event" id="event-change">
 114    <div class="event-header">
 115      <h3 class="event-name"><a href="#event-change">change</a></h3>
 116      <dl>
 117        <dt class="event-type-label">Type:</dt>
 118          <dd class="event-type">progressbarchange</dd>
 119      </dl>
 120    </div>
 121    <div class="event-description">
 122      <p>This event is triggered when the value of the progressbar changes.</p>
 123    </div>
 124    <div class="event-examples">
 125      <h4>Code examples</h4>
 126      <dl class="event-examples-list">
 127      
 128  <dt>
 129    Supply a callback function to handle the <code>change</code> event as an init option.
 130  </dt>
 131  <dd>
 132  <pre><code>$('.selector').progressbar({
 133     change: function(event, ui) { ... }
 134  });</code></pre>
 135  </dd>
 136  
 137      
 138  <dt>
 139    Bind to the <code>change</code> event by type: <code>progressbarchange</code>.
 140  </dt>
 141  <dd>
 142  <pre><code>$('.selector').bind('progressbarchange', function(event, ui) {
 143    ...
 144  });</code></pre>
 145  </dd>
 146  
 147      </dl>
 148    </div>
 149  </li>
 150  
 151      </ul>
 152    </div>
 153    <div id="methods">
 154      <h2 class="top-header">Methods</h2>
 155      <ul class="methods-list">
 156        
 157  <li class="method" id="method-destroy">
 158    <div class="method-header">
 159      <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
 160      <dl>
 161        <dt class="method-signature-label">Signature:</dt>
 162          <dd class="method-signature">.progressbar( 'destroy'
 163  
 164  
 165  
 166  
 167  
 168  
 169  
 170  )</dd>
 171      </dl>
 172    </div>
 173    <div class="method-description">
 174      <p>Remove the progressbar functionality completely. This will return the element back to its pre-init state.</p>
 175    </div>
 176  </li>
 177  
 178  
 179  <li class="method" id="method-disable">
 180    <div class="method-header">
 181      <h3 class="method-name"><a href="#method-disable">disable</a></h3>
 182      <dl>
 183        <dt class="method-signature-label">Signature:</dt>
 184          <dd class="method-signature">.progressbar( 'disable'
 185  
 186  
 187  
 188  
 189  
 190  
 191  
 192  )</dd>
 193      </dl>
 194    </div>
 195    <div class="method-description">
 196      <p>Disable the progressbar.</p>
 197    </div>
 198  </li>
 199  
 200  
 201  <li class="method" id="method-enable">
 202    <div class="method-header">
 203      <h3 class="method-name"><a href="#method-enable">enable</a></h3>
 204      <dl>
 205        <dt class="method-signature-label">Signature:</dt>
 206          <dd class="method-signature">.progressbar( 'enable'
 207  
 208  
 209  
 210  
 211  
 212  
 213  
 214  )</dd>
 215      </dl>
 216    </div>
 217    <div class="method-description">
 218      <p>Enable the progressbar.</p>
 219    </div>
 220  </li>
 221  
 222  
 223  <li class="method" id="method-option">
 224    <div class="method-header">
 225      <h3 class="method-name"><a href="#method-option">option</a></h3>
 226      <dl>
 227        <dt class="method-signature-label">Signature:</dt>
 228          <dd class="method-signature">.progressbar( 'option'
 229  
 230  , optionName
 231  
 232  , <span class="optional">[</span>value<span class="optional">] </span>
 233  
 234  
 235  
 236  )</dd>
 237      </dl>
 238    </div>
 239    <div class="method-description">
 240      <p>Get or set any progressbar option. If no value is specified, will act as a getter.</p>
 241    </div>
 242  </li>
 243  
 244  
 245  <li class="method" id="method-value">
 246    <div class="method-header">
 247      <h3 class="method-name"><a href="#method-value">value</a></h3>
 248      <dl>
 249        <dt class="method-signature-label">Signature:</dt>
 250          <dd class="method-signature">.progressbar( 'value'
 251  
 252  , <span class="optional">[</span>value<span class="optional">] </span>
 253  
 254  
 255  
 256  
 257  
 258  )</dd>
 259      </dl>
 260    </div>
 261    <div class="method-description">
 262      <p>This method gets or sets the current value of the progressbar.</p>
 263    </div>
 264  </li>
 265  
 266      </ul>
 267    </div>
 268    <div id="theming">
 269      <h2 class="top-header">Theming</h2>
 270      <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.
 271  </p>
 272    <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.progressbar.css stylesheet that can be modified. These classes are highlighed in bold below.
 273  </p>
 274      
 275    <h3>Sample markup with jQuery UI CSS Framework classes</h3>
 276    &lt;div class=&quot;<strong>ui-progressbar </strong>ui-widget ui-widget-content ui-corner-all&quot;&gt;<br />
 277      &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 />
 278      &lt;/div&gt;
 279    <p class="theme-note">
 280      <strong>
 281        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;.
 282      </strong>
 283    </p>
 284  
 285    </div>
 286  </div>
 287  
 288  </p><!-- 
 289  Pre-expand include size: 14353 bytes
 290  Post-expand include size: 16672 bytes
 291  Template argument size: 7699 bytes
 292  Maximum: 2097152 bytes
 293  -->
 294  
 295  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3348-1!1!0!!en!2 and timestamp 20090604112221 -->