topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

lib-present-jquery-desktop-basic-steps-selectable.htm / htm



  <html>

head 


  <head>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery-1.2.6.js"></script>
    <script src="lib-present-jquery-desktop-basic-steps-lib-jquery-ui-core-drag-drop-select-1.5.3.js"></script>
    <link rel="stylesheet" href="lib-present-jquery-desktop-basic-steps-css-demo.css" type="text/css" media="screen" charset="utf-8">
    <title>Selectable</title>
    <script>

functions


      SelectionManager = function() {};
      
      SelectionManager.prototype.select = function(id) {
        $('#' + id).addClass('ui-selected');
      };
  
      SelectionManager.prototype.unselect = function(id) {
        $('#' + id).removeClass('ui-selected');
      };

selected


      SelectionManager.prototype.isSelected = function(id) {
        return $('#' + id).hasClass('ui-selected');  
      };        
      sel = new SelectionManager();

ready


      document.ready(function() {
        $('.box').dblclick(function() {
          if (sel.isSelected(this.id)) {
            sel.unselect(this.id);
          } else {
            sel.select(this.id);
          }
        });

selectable


        $('#container').selectable({
          selected: function(ev, ui) {
            if (ui.selected.id) {
              sel.select(ui.selected.id);
            }
          },
          unselected: function(ev, ui) {
            if (ui.unselected.id) {
              sel.unselect(ui.unselected.id);
            }
          },
          filter: '.box'
        });
      });
    </script>

style 


    <style type="text/css" media="screen">
      .ui-selected, .ui-unselecting {
        border: 2px dashed black !important;
        background-color: white !important;
        color: black !important;
        margin-left: 50px;
      }
    </style>
  </head>

body 


  <body>
    <h1>Selectable</h1>
    <p>
      This demo demonstrates how to create selectable items. You can either doubleclick the items or use box-selection: start dragging from outside the boxes and include them in the selection. Use <tt>right click > view source</tt> to see the underlying Javascript code.
    </p>

container 


    <div id="container">
      <div id="box1" class="box">Blue</div>
      <div id="box2" class="box">Red</div>
      <div id="box3" class="box">Yellow</div>
      <div id="box4" class="box">Green</div>
    </div>
  </body>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.