jqueryui: JqueryUI Selectable

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>selectable</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #selectable-7 .ui-selecting { background: #707070 ; }
         #selectable-7 .ui-selected { background: #fed6d7; color: #000000; }
         #selectable-7 { list-style-type: none; margin: 0; 
            padding: 0; width: 20%; }
         #selectable-7 li { margin: 3px; padding: 0.4em; 
            font-size: 16px; height: 18px; }
         .ui-widget-content {
            background: #ceb098;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         .resultarea {
            background: #ce7898;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #fff;
            font-size:14px;
         }
      </style>
      <script>
         $(function() {
            $( "#selectable-7" ).selectable({
               selected: function() {
                  var result = $( "#result" ).empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable-7 li" ).index( this );
                     result.append( " Menu" + ( index + 1 ) );
                  });
               }
            });
         });
      </script>
   </head>
   <body>
      <h3>
Select Menu</h3>
<ol id="selectable-7">
<li class="ui-widget-content">Menu 1</li>
<li class="ui-widget-content">Menu 2</li>
<li class="ui-widget-content">Menu 3</li>
<li class="ui-widget-content">Menu 4</li>
<li class="ui-widget-content">Menu 5</li>
<li class="ui-widget-content">Menu 6</li>
<li class="ui-widget-content">Menu 7</li>
</ol>
<span class="resultarea">Selected Menu</span>>
      <span id=result class="resultarea"></span>
   </body>
</html>

Monday, 23 February 2015

JqueryUI Selectable

No comments:

Post a Comment