[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 Selectable</h1>
  11    <div id="overview">
  12      <h2 class="top-header">Overview</h2>
  13      <div id="overview-main">
  14          <p>The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.</p>
  15      </div>
  16      <div id="overview-dependencies">
  17          <h3>Dependencies</h3>
  18          <ul>
  19  <li>UI Core</li>
  20  </ul>
  21      </div>
  22      <div id="overview-example">
  23          <h3>Example</h3>
  24          <div id="overview-example" class="example">
  25  <ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
  26  <p><div id="demo" class="tabs-container" rel="">
  27  A simple jQuery UI Selectable.<br />
  28  </p>
  29  <pre>$(&quot;#selectable&quot;).selectable();
  30  </pre>
  31  <p></div><div id="source" class="tabs-container">
  32  </p>
  33  <pre>&lt;!DOCTYPE html&gt;
  34  &lt;html&gt;
  35  &lt;head&gt;
  36    &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;
  37    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  38    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
  39    &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;
  40  &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;
  41  &lt;style type=&quot;text/css&quot;&gt;
  42  #selectable .ui-selecting {
  43      background: silver;
  44  }
  45  #selectable .ui-selected {
  46      background: gray;
  47  }
  48  &lt;/style&gt;
  49  
  50    &lt;script&gt;
  51    $(document).ready(function() {
  52      $(&quot;#selectable&quot;).selectable();
  53    });
  54    &lt;/script&gt;
  55  &lt;/head&gt;
  56  &lt;body style="font-size:62.5%;"&gt;
  57    
  58  &lt;ul id=&quot;selectable&quot;&gt;
  59  &lt;li&gt;Item 1&lt;/li&gt;
  60  &lt;li&gt;Item 2&lt;/li&gt;
  61  &lt;li&gt;Item 3&lt;/li&gt;
  62  &lt;li&gt;Item 4&lt;/li&gt;
  63  &lt;li&gt;Item 5&lt;/li&gt;
  64  &lt;/ul&gt;
  65  
  66  &lt;/body&gt;
  67  &lt;/html&gt;
  68  </pre>
  69  <p></div>
  70  </p><p></div>
  71      </div>
  72    </div>
  73    <div id="options">
  74      <h2 class="top-header">Options</h2>
  75      <ul class="options-list">
  76        
  77  <li class="option" id="option-disabled">
  78    <div class="option-header">
  79      <h3 class="option-name"><a href="#option-disabled">disabled</a></h3>
  80      <dl>
  81        <dt class="option-type-label">Type:</dt>
  82          <dd class="option-type">Boolean</dd>
  83        
  84        <dt class="option-default-label">Default:</dt>
  85          <dd class="option-default">false</dd>
  86        
  87      </dl>
  88    </div>
  89    <div class="option-description">
  90      <p>Disables (true) or enables (false) the selectable. Can be set when initialising (first creating) the selectable.</p>
  91    </div>
  92    <div class="option-examples">
  93      <h4>Code examples</h4>
  94      <dl class="option-examples-list">
  95      
  96  <dt>
  97    Initialize a selectable with the <code>disabled</code> option specified.
  98  </dt>
  99  <dd>
 100  <pre><code>$( ".selector" ).selectable({ disabled: true });</code></pre>
 101  </dd>
 102  
 103      
 104  <dt>
 105    Get or set the <code>disabled</code> option, after init.
 106  </dt>
 107  <dd>
 108  <pre><code>//getter
 109  var disabled = $( ".selector" ).selectable( "option", "disabled" );
 110  //setter
 111  $( ".selector" ).selectable( "option", "disabled", true );</code></pre>
 112  </dd>
 113  
 114      </dl>
 115    </div>
 116  </li>
 117  
 118  
 119  <li class="option" id="option-autoRefresh">
 120    <div class="option-header">
 121      <h3 class="option-name"><a href="#option-autoRefresh">autoRefresh</a></h3>
 122      <dl>
 123        <dt class="option-type-label">Type:</dt>
 124          <dd class="option-type">Boolean</dd>
 125        
 126        <dt class="option-default-label">Default:</dt>
 127          <dd class="option-default">true</dd>
 128        
 129      </dl>
 130    </div>
 131    <div class="option-description">
 132      <p>This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually.</p>
 133    </div>
 134    <div class="option-examples">
 135      <h4>Code examples</h4>
 136      <dl class="option-examples-list">
 137      
 138  <dt>
 139    Initialize a selectable with the <code>autoRefresh</code> option specified.
 140  </dt>
 141  <dd>
 142  <pre><code>$( ".selector" ).selectable({ autoRefresh: false });</code></pre>
 143  </dd>
 144  
 145      
 146  <dt>
 147    Get or set the <code>autoRefresh</code> option, after init.
 148  </dt>
 149  <dd>
 150  <pre><code>//getter
 151  var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
 152  //setter
 153  $( ".selector" ).selectable( "option", "autoRefresh", false );</code></pre>
 154  </dd>
 155  
 156      </dl>
 157    </div>
 158  </li>
 159  
 160  
 161  <li class="option" id="option-cancel">
 162    <div class="option-header">
 163      <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
 164      <dl>
 165        <dt class="option-type-label">Type:</dt>
 166          <dd class="option-type">Selector</dd>
 167        
 168        <dt class="option-default-label">Default:</dt>
 169          <dd class="option-default">':input,option'</dd>
 170        
 171      </dl>
 172    </div>
 173    <div class="option-description">
 174      <p>Prevents selecting if you start on elements matching the selector.</p>
 175    </div>
 176    <div class="option-examples">
 177      <h4>Code examples</h4>
 178      <dl class="option-examples-list">
 179      
 180  <dt>
 181    Initialize a selectable with the <code>cancel</code> option specified.
 182  </dt>
 183  <dd>
 184  <pre><code>$( ".selector" ).selectable({ cancel: ':input,option' });</code></pre>
 185  </dd>
 186  
 187      
 188  <dt>
 189    Get or set the <code>cancel</code> option, after init.
 190  </dt>
 191  <dd>
 192  <pre><code>//getter
 193  var cancel = $( ".selector" ).selectable( "option", "cancel" );
 194  //setter
 195  $( ".selector" ).selectable( "option", "cancel", ':input,option' );</code></pre>
 196  </dd>
 197  
 198      </dl>
 199    </div>
 200  </li>
 201  
 202  
 203  <li class="option" id="option-delay">
 204    <div class="option-header">
 205      <h3 class="option-name"><a href="#option-delay">delay</a></h3>
 206      <dl>
 207        <dt class="option-type-label">Type:</dt>
 208          <dd class="option-type">Integer</dd>
 209        
 210        <dt class="option-default-label">Default:</dt>
 211          <dd class="option-default">0</dd>
 212        
 213      </dl>
 214    </div>
 215    <div class="option-description">
 216      <p>Time in milliseconds to define when the selecting should start. It helps preventing unwanted selections when clicking on an element.</p>
 217    </div>
 218    <div class="option-examples">
 219      <h4>Code examples</h4>
 220      <dl class="option-examples-list">
 221      
 222  <dt>
 223    Initialize a selectable with the <code>delay</code> option specified.
 224  </dt>
 225  <dd>
 226  <pre><code>$( ".selector" ).selectable({ delay: 20 });</code></pre>
 227  </dd>
 228  
 229      
 230  <dt>
 231    Get or set the <code>delay</code> option, after init.
 232  </dt>
 233  <dd>
 234  <pre><code>//getter
 235  var delay = $( ".selector" ).selectable( "option", "delay" );
 236  //setter
 237  $( ".selector" ).selectable( "option", "delay", 20 );</code></pre>
 238  </dd>
 239  
 240      </dl>
 241    </div>
 242  </li>
 243  
 244  
 245  <li class="option" id="option-distance">
 246    <div class="option-header">
 247      <h3 class="option-name"><a href="#option-distance">distance</a></h3>
 248      <dl>
 249        <dt class="option-type-label">Type:</dt>
 250          <dd class="option-type">Integer</dd>
 251        
 252        <dt class="option-default-label">Default:</dt>
 253          <dd class="option-default">0</dd>
 254        
 255      </dl>
 256    </div>
 257    <div class="option-description">
 258      <p>Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until after mouse is dragged beyond distance.</p>
 259    </div>
 260    <div class="option-examples">
 261      <h4>Code examples</h4>
 262      <dl class="option-examples-list">
 263      
 264  <dt>
 265    Initialize a selectable with the <code>distance</code> option specified.
 266  </dt>
 267  <dd>
 268  <pre><code>$( ".selector" ).selectable({ distance: 20 });</code></pre>
 269  </dd>
 270  
 271      
 272  <dt>
 273    Get or set the <code>distance</code> option, after init.
 274  </dt>
 275  <dd>
 276  <pre><code>//getter
 277  var distance = $( ".selector" ).selectable( "option", "distance" );
 278  //setter
 279  $( ".selector" ).selectable( "option", "distance", 20 );</code></pre>
 280  </dd>
 281  
 282      </dl>
 283    </div>
 284  </li>
 285  
 286  
 287  <li class="option" id="option-filter">
 288    <div class="option-header">
 289      <h3 class="option-name"><a href="#option-filter">filter</a></h3>
 290      <dl>
 291        <dt class="option-type-label">Type:</dt>
 292          <dd class="option-type">Selector</dd>
 293        
 294        <dt class="option-default-label">Default:</dt>
 295          <dd class="option-default">'*'</dd>
 296        
 297      </dl>
 298    </div>
 299    <div class="option-description">
 300      <p>The matching child elements will be made selectees (able to be selected).</p>
 301    </div>
 302    <div class="option-examples">
 303      <h4>Code examples</h4>
 304      <dl class="option-examples-list">
 305      
 306  <dt>
 307    Initialize a selectable with the <code>filter</code> option specified.
 308  </dt>
 309  <dd>
 310  <pre><code>$( ".selector" ).selectable({ filter: 'li' });</code></pre>
 311  </dd>
 312  
 313      
 314  <dt>
 315    Get or set the <code>filter</code> option, after init.
 316  </dt>
 317  <dd>
 318  <pre><code>//getter
 319  var filter = $( ".selector" ).selectable( "option", "filter" );
 320  //setter
 321  $( ".selector" ).selectable( "option", "filter", 'li' );</code></pre>
 322  </dd>
 323  
 324      </dl>
 325    </div>
 326  </li>
 327  
 328  
 329  <li class="option" id="option-tolerance">
 330    <div class="option-header">
 331      <h3 class="option-name"><a href="#option-tolerance">tolerance</a></h3>
 332      <dl>
 333        <dt class="option-type-label">Type:</dt>
 334          <dd class="option-type">String</dd>
 335        
 336        <dt class="option-default-label">Default:</dt>
 337          <dd class="option-default">'touch'</dd>
 338        
 339      </dl>
 340    </div>
 341    <div class="option-description">
 342      <p>Possible values: 'touch', 'fit'.
 343  </p>
 344  <ul>
 345  <li><b>fit</b>: draggable overlaps the droppable entirely</li>
 346  <li><b>touch</b>: draggable overlaps the droppable any amount</li>
 347  </ul>
 348  <p></p>
 349    </div>
 350    <div class="option-examples">
 351      <h4>Code examples</h4>
 352      <dl class="option-examples-list">
 353      
 354  <dt>
 355    Initialize a selectable with the <code>tolerance</code> option specified.
 356  </dt>
 357  <dd>
 358  <pre><code>$( ".selector" ).selectable({ tolerance: 'fit' });</code></pre>
 359  </dd>
 360  
 361      
 362  <dt>
 363    Get or set the <code>tolerance</code> option, after init.
 364  </dt>
 365  <dd>
 366  <pre><code>//getter
 367  var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
 368  //setter
 369  $( ".selector" ).selectable( "option", "tolerance", 'fit' );</code></pre>
 370  </dd>
 371  
 372      </dl>
 373    </div>
 374  </li>
 375  
 376      </ul>
 377    </div>
 378    <div id="events">
 379      <h2 class="top-header">Events</h2>
 380      <ul class="events-list">
 381        
 382  <li class="event" id="event-selected">
 383    <div class="event-header">
 384      <h3 class="event-name"><a href="#event-selected">selected</a></h3>
 385      <dl>
 386        <dt class="event-type-label">Type:</dt>
 387          <dd class="event-type">selected</dd>
 388      </dl>
 389    </div>
 390    <div class="event-description">
 391      <p>This event is triggered at the end of the select operation, on each element added to the selection.</p>
 392    </div>
 393    <div class="event-examples">
 394      <h4>Code examples</h4>
 395      <dl class="event-examples-list">
 396      
 397  <dt>
 398    Supply a callback function to handle the <code>selected</code> event as an init option.
 399  </dt>
 400  <dd>
 401  <pre><code>$( &quot;.selector&quot; ).selectable({
 402     selected: function(event, ui) { ... }
 403  });</code></pre>
 404  </dd>
 405  
 406      
 407  <dt>
 408    Bind to the <code>selected</code> event by type: <code>selected</code>.
 409  </dt>
 410  <dd>
 411  <pre><code>$( &quot;.selector&quot; ).bind( &quot;selected&quot;, function(event, ui) {
 412    ...
 413  });</code></pre>
 414  </dd>
 415  
 416      </dl>
 417    </div>
 418  </li>
 419  
 420  
 421  <li class="event" id="event-selecting">
 422    <div class="event-header">
 423      <h3 class="event-name"><a href="#event-selecting">selecting</a></h3>
 424      <dl>
 425        <dt class="event-type-label">Type:</dt>
 426          <dd class="event-type">selecting</dd>
 427      </dl>
 428    </div>
 429    <div class="event-description">
 430      <p>This event is triggered during the select operation, on each element added to the selection.</p>
 431    </div>
 432    <div class="event-examples">
 433      <h4>Code examples</h4>
 434      <dl class="event-examples-list">
 435      
 436  <dt>
 437    Supply a callback function to handle the <code>selecting</code> event as an init option.
 438  </dt>
 439  <dd>
 440  <pre><code>$( &quot;.selector&quot; ).selectable({
 441     selecting: function(event, ui) { ... }
 442  });</code></pre>
 443  </dd>
 444  
 445      
 446  <dt>
 447    Bind to the <code>selecting</code> event by type: <code>selecting</code>.
 448  </dt>
 449  <dd>
 450  <pre><code>$( &quot;.selector&quot; ).bind( &quot;selecting&quot;, function(event, ui) {
 451    ...
 452  });</code></pre>
 453  </dd>
 454  
 455      </dl>
 456    </div>
 457  </li>
 458  
 459  
 460  <li class="event" id="event-start">
 461    <div class="event-header">
 462      <h3 class="event-name"><a href="#event-start">start</a></h3>
 463      <dl>
 464        <dt class="event-type-label">Type:</dt>
 465          <dd class="event-type">selectablestart</dd>
 466      </dl>
 467    </div>
 468    <div class="event-description">
 469      <p>This event is triggered at the beginning of the select operation.</p>
 470    </div>
 471    <div class="event-examples">
 472      <h4>Code examples</h4>
 473      <dl class="event-examples-list">
 474      
 475  <dt>
 476    Supply a callback function to handle the <code>start</code> event as an init option.
 477  </dt>
 478  <dd>
 479  <pre><code>$( &quot;.selector&quot; ).selectable({
 480     start: function(event, ui) { ... }
 481  });</code></pre>
 482  </dd>
 483  
 484      
 485  <dt>
 486    Bind to the <code>start</code> event by type: <code>selectablestart</code>.
 487  </dt>
 488  <dd>
 489  <pre><code>$( &quot;.selector&quot; ).bind( &quot;selectablestart&quot;, function(event, ui) {
 490    ...
 491  });</code></pre>
 492  </dd>
 493  
 494      </dl>
 495    </div>
 496  </li>
 497  
 498  
 499  <li class="event" id="event-stop">
 500    <div class="event-header">
 501      <h3 class="event-name"><a href="#event-stop">stop</a></h3>
 502      <dl>
 503        <dt class="event-type-label">Type:</dt>
 504          <dd class="event-type">selectablestop</dd>
 505      </dl>
 506    </div>
 507    <div class="event-description">
 508      <p>This event is triggered at the end of the select operation.</p>
 509    </div>
 510    <div class="event-examples">
 511      <h4>Code examples</h4>
 512      <dl class="event-examples-list">
 513      
 514  <dt>
 515    Supply a callback function to handle the <code>stop</code> event as an init option.
 516  </dt>
 517  <dd>
 518  <pre><code>$( &quot;.selector&quot; ).selectable({
 519     stop: function(event, ui) { ... }
 520  });</code></pre>
 521  </dd>
 522  
 523      
 524  <dt>
 525    Bind to the <code>stop</code> event by type: <code>selectablestop</code>.
 526  </dt>
 527  <dd>
 528  <pre><code>$( &quot;.selector&quot; ).bind( &quot;selectablestop&quot;, function(event, ui) {
 529    ...
 530  });</code></pre>
 531  </dd>
 532  
 533      </dl>
 534    </div>
 535  </li>
 536  
 537  
 538  <li class="event" id="event-unselected">
 539    <div class="event-header">
 540      <h3 class="event-name"><a href="#event-unselected">unselected</a></h3>
 541      <dl>
 542        <dt class="event-type-label">Type:</dt>
 543          <dd class="event-type">unselected</dd>
 544      </dl>
 545    </div>
 546    <div class="event-description">
 547      <p>This event is triggered at the end of the select operation, on each element removed from the selection.</p>
 548    </div>
 549    <div class="event-examples">
 550      <h4>Code examples</h4>
 551      <dl class="event-examples-list">
 552      
 553  <dt>
 554    Supply a callback function to handle the <code>unselected</code> event as an init option.
 555  </dt>
 556  <dd>
 557  <pre><code>$( &quot;.selector&quot; ).selectable({
 558     unselected: function(event, ui) { ... }
 559  });</code></pre>
 560  </dd>
 561  
 562      
 563  <dt>
 564    Bind to the <code>unselected</code> event by type: <code>unselected</code>.
 565  </dt>
 566  <dd>
 567  <pre><code>$( &quot;.selector&quot; ).bind( &quot;unselected&quot;, function(event, ui) {
 568    ...
 569  });</code></pre>
 570  </dd>
 571  
 572      </dl>
 573    </div>
 574  </li>
 575  
 576  
 577  <li class="event" id="event-unselecting">
 578    <div class="event-header">
 579      <h3 class="event-name"><a href="#event-unselecting">unselecting</a></h3>
 580      <dl>
 581        <dt class="event-type-label">Type:</dt>
 582          <dd class="event-type">unselecting</dd>
 583      </dl>
 584    </div>
 585    <div class="event-description">
 586      <p>This event is triggered during the select operation, on each element removed from the selection.</p>
 587    </div>
 588    <div class="event-examples">
 589      <h4>Code examples</h4>
 590      <dl class="event-examples-list">
 591      
 592  <dt>
 593    Supply a callback function to handle the <code>unselecting</code> event as an init option.
 594  </dt>
 595  <dd>
 596  <pre><code>$( &quot;.selector&quot; ).selectable({
 597     unselecting: function(event, ui) { ... }
 598  });</code></pre>
 599  </dd>
 600  
 601      
 602  <dt>
 603    Bind to the <code>unselecting</code> event by type: <code>unselecting</code>.
 604  </dt>
 605  <dd>
 606  <pre><code>$( &quot;.selector&quot; ).bind( &quot;unselecting&quot;, function(event, ui) {
 607    ...
 608  });</code></pre>
 609  </dd>
 610  
 611      </dl>
 612    </div>
 613  </li>
 614  
 615      </ul>
 616    </div>
 617    <div id="methods">
 618      <h2 class="top-header">Methods</h2>
 619      <ul class="methods-list">
 620        
 621  <li class="method" id="method-destroy">
 622    <div class="method-header">
 623      <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
 624      <dl>
 625        <dt class="method-signature-label">Signature:</dt>
 626          <dd class="method-signature">.selectable( "destroy"
 627  
 628  
 629  
 630  
 631  
 632  
 633  
 634  )</dd>
 635      </dl>
 636    </div>
 637    <div class="method-description">
 638      <p>Remove the selectable functionality completely. This will return the element back to its pre-init state.</p>
 639    </div>
 640  </li>
 641  
 642  
 643  <li class="method" id="method-disable">
 644    <div class="method-header">
 645      <h3 class="method-name"><a href="#method-disable">disable</a></h3>
 646      <dl>
 647        <dt class="method-signature-label">Signature:</dt>
 648          <dd class="method-signature">.selectable( "disable"
 649  
 650  
 651  
 652  
 653  
 654  
 655  
 656  )</dd>
 657      </dl>
 658    </div>
 659    <div class="method-description">
 660      <p>Disable the selectable.</p>
 661    </div>
 662  </li>
 663  
 664  
 665  <li class="method" id="method-enable">
 666    <div class="method-header">
 667      <h3 class="method-name"><a href="#method-enable">enable</a></h3>
 668      <dl>
 669        <dt class="method-signature-label">Signature:</dt>
 670          <dd class="method-signature">.selectable( "enable"
 671  
 672  
 673  
 674  
 675  
 676  
 677  
 678  )</dd>
 679      </dl>
 680    </div>
 681    <div class="method-description">
 682      <p>Enable the selectable.</p>
 683    </div>
 684  </li>
 685  
 686  
 687  <li class="method" id="method-option">
 688    <div class="method-header">
 689      <h3 class="method-name"><a href="#method-option">option</a></h3>
 690      <dl>
 691        <dt class="method-signature-label">Signature:</dt>
 692          <dd class="method-signature">.selectable( "option"
 693  
 694  , optionName
 695  
 696  , <span class="optional">[</span>value<span class="optional">] </span>
 697  
 698  
 699  
 700  )</dd>
 701      </dl>
 702    </div>
 703    <div class="method-description">
 704      <p>Get or set any selectable option. If no value is specified, will act as a getter.</p>
 705    </div>
 706  </li>
 707  
 708  
 709  <li class="method" id="method-option">
 710    <div class="method-header">
 711      <h3 class="method-name"><a href="#method-option">option</a></h3>
 712      <dl>
 713        <dt class="method-signature-label">Signature:</dt>
 714          <dd class="method-signature">.selectable( "option"
 715  
 716  , options
 717  
 718  
 719  
 720  
 721  
 722  )</dd>
 723      </dl>
 724    </div>
 725    <div class="method-description">
 726      <p>Set multiple selectable options at once by providing an options object.</p>
 727    </div>
 728  </li>
 729  
 730  
 731  <li class="method" id="method-widget">
 732    <div class="method-header">
 733      <h3 class="method-name"><a href="#method-widget">widget</a></h3>
 734      <dl>
 735        <dt class="method-signature-label">Signature:</dt>
 736          <dd class="method-signature">.selectable( "widget"
 737  
 738  
 739  
 740  
 741  
 742  
 743  
 744  )</dd>
 745      </dl>
 746    </div>
 747    <div class="method-description">
 748      <p>Returns the .ui-selectable element.</p>
 749    </div>
 750  </li>
 751  
 752  
 753  <li class="method" id="method-refresh">
 754    <div class="method-header">
 755      <h3 class="method-name"><a href="#method-refresh">refresh</a></h3>
 756      <dl>
 757        <dt class="method-signature-label">Signature:</dt>
 758          <dd class="method-signature">.selectable( "refresh"
 759  
 760  
 761  
 762  
 763  
 764  
 765  
 766  )</dd>
 767      </dl>
 768    </div>
 769    <div class="method-description">
 770      <p>Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.</p>
 771    </div>
 772  </li>
 773  
 774      </ul>
 775    </div>
 776    <div id="theming">
 777      <h2 class="top-header">Theming</h2>
 778      <p>The jQuery UI Selectable 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.
 779  </p>
 780    <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.selectable.css stylesheet that can be modified. These classes are highlighed in bold below.
 781  </p>
 782      
 783    <h3>Sample markup with jQuery UI CSS Framework classes</h3>
 784    &lt;ul class=&quot;<strong>ui-selectable</strong>&quot;&gt;<br />
 785  &#160;&#160;&#160;&lt;li class=&quot;<strong>ui-selectee</strong>&quot;&gt;&lt;/li&gt;<br />
 786  &#160;&#160;&#160;&lt;li class=&quot;<strong>ui-selectee</strong>&quot;&gt;&lt;/li&gt;<br />
 787  &#160;&#160;&#160;&lt;li class=&quot;<strong>ui-selectee</strong>&quot;&gt;&lt;/li&gt;<br />
 788  &lt;/ul&gt;
 789    <p class="theme-note">
 790      <strong>
 791        Note: This is a sample of markup generated by the selectable plugin, not markup you should use to create a selectable. The only markup needed for that is <br />&lt;ul&gt;<br />
 792  &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
 793  &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
 794  &#160;&#160;&#160;&lt;li&gt;&lt;/li&gt;<br />
 795  &lt;/ul&gt;.
 796      </strong>
 797    </p>
 798  
 799    </div>
 800  </div>
 801  
 802  </p><!-- 
 803  Pre-expand include size: 33182 bytes
 804  Post-expand include size: 51117 bytes
 805  Template argument size: 26285 bytes
 806  Maximum: 2097152 bytes
 807  -->
 808  
 809  <!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3343-1!1!0!!en!2 and timestamp 20100421062624 -->