jqueryui: 02/23/15

JqueryUI Dialog Box

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Dialog</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>
         .ui-widget-header,.ui-state-default, ui-button{
            background:#9f7700;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
   .ui-dialog .ui-dialog-content {
    background:#444;
    border: 0 none;
    color: #fff;
    overflow: auto;
    padding: 0.5em 1em;
    position: relative;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
   background-image:none;
    border: 1px solid #cccccc;
    color: #1c94c4;
    font-weight: bold;
}
   
   
      </style>
      
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   <body>
       
      <div id="dialog-3" title="Dialog Title goes here...">
jQuery UI Dialog box</div>
<button id="opener-3" style="background:#ddd;padding:20px;color:#fff"> Click Here</button>
   </body>
</html>

JqueryUI Date Picker

JqueryUI Autocomplete

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Autocomplete</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>
      
      <script>
         $(function() {
            var availableTutorials = [
               "ABC",
               "BCD",
               "CDE",
               "DFG",
               "EFG",
               "FGH",
               "GIJ",
               "HIJ",
               "IJK",
               
            ];
            $( "#automplete-6" ).autocomplete({
               source: availableTutorials
            });
            $( "#automplete-6" ).autocomplete("option", "position", { my : "right-10 top+10", at: "right top" }) 
         });
      </script>
   </head>
   <body>
       
      <div class="ui-widget">
  <p>
Type "a" to "i"</p>
<label for="automplete-6">Search: </label>
         <input id="automplete-6">
      </div>
</body>
</html>

JqueryUI Accordion

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Accordion</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>
      <script>
         $(function() {
            $( "#accordion" ).accordion({
               collapsible: true
            });
         });
      </script>
      <style>
         #accordion{font-size: 14px;}
   
   .ui-widget-content {
    background:#00CCFF;
    border: 1px solid #ccc;
    color: #333333;
 background-image:none;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background:#4e8514;
    border: 1px solid #cccccc;
    color: #1c00c4;
    font-weight: bold;
 background-image:none;
}
      </style>
   </head>
   <body>
      <div id="accordion">
         <h3>
Exam 1</h3>
<div>
         <p>
Result 1
         </p>
</div>
<h3>
Exam 2</h3>
<div>
         <p>
Result 2      
         </p>
</div>
<h3>
Exam 3</h3>
<div>
         <p>
Result 3      
         </p>
</div>
</div>
</body>
</html>

JqueryUI Sortable

<!DOCTYPE html>
<head>
   <title>Sortable</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>
      #sortable-8{ list-style-type: none; margin: 0; 
         padding: 0; width: 25%; float:left;}
      #sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em; 
         padding-left: 1.5em; font-size: 17px; height: 16px; }
      .default {
         background: #00b541;
         border: 1px solid #666;
         color: #fff;
      }
   </style>
   <script>
      $(function() {
         $('#sortable-8').sortable({
            update: function(event, ui) {
               var productOrder = $(this).sortable('toArray').toString();
               $("#sortable-9").text (productOrder);
            }
         });
      });
   </script>
</head>
<body>
   <ul id="sortable-8">
<li id="1" class="default">Menu 1</li>
<li id="2" class="default">Menu 2</li>
<li id="3" class="default">Menu 3</li>
<li id="4" class="default">Menu 4</li>
</ul>
<br>
   <h3>
Result<span id="sortable-9" style="margin-top: 100px; background: none repeat scroll 0% 0% rgb(51, 51, 51); color: rgb(255, 255, 255); height: 200px; padding: 20px;"></span></h3>
</body>
</html>

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>

JqueryUI Resizeable

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Resizable</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>
         .ui-widget-header {
            background:#ccc;
            border: 1px solid #666;
            color: #FFFFFF;
            font-weight: bold;
         }
         .ui-widget-content {
            background: #cedc98;
            border: 1px solid #DDDDDD;
            color: #333333;
         }
         #resizable { width: 150px; height: 150px; padding: 0.5em; background:#605c33;
            text-align: center; margin: 0; }
      </style>
      
      <script>
         $(function() {
            $( "#resizable" ).resizable();
         });
      </script>
   </head>

JqueryUI Dropable

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Droppable</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 type="text/css">
         #draggable-3 { 
           width: 100px; height: 50px; padding: 0.5em; float: left;
           margin: 21px 5px 10px 0; background:#fff;
         }
         #droppable-6 { 
           width: 120px; height: 90px;padding: 0.5em; float: left;background:#333;
      color: #fff; 
           margin: 10px; 
         }
         .active {
            border-color : blue;
            background : grey;
            }  
         .hover {
            border-color : red;
            background : green;
         }

</style>
   <script>
      $(function() {
         $( "#draggable-3" ).draggable();
         $( "#droppable-6" ).droppable({
            activeClass: "active",
            hoverClass:  "hover",
            drop: function( event, ui ) {
               $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
              .html( "Dropped!" );
            }
         });
      });
   </script>
</head>
<body>

Monday 23 February 2015