jqueryui: February 2015

Thursday, 26 February 2015

JqueryUI Tabs

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tabs</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() {
            $( "#tabs-1" ).tabs();
         });
      </script>
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#333;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
   
   .ui-tabs .ui-tabs-panel {
    background:#ccc;
    border-width: 0;
    display: block;
    padding: 1em 1.4em;
 }
      </style>
   </head>
   <body>
      <div id="tabs-1">
         <ul>
            <li><a href="#tabs-2">Test1</a></li>
            <li><a href="#tabs-3">Test2</a></li>
            <li><a href="#tabs-4">Test3</a></li>
         </ul>
         <div id="tabs-2">
            <p>Result1 </p>
         </div>
         <div id="tabs-3">
            <p>Result2</p>
         </div>
         <div id="tabs-4">
            <p>result3</p>
         </div>
      </div>
   </body>
</html>

JqueryUI Progressbar

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI ProgressBar </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: #ffdcc4;
            border: 1px solid #333;
            color: #333333;
            font-weight: bold;
         }
         .progress-label {
            position: absolute;
            left: 50%;
            top: 13px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #fff;
         }
      </style>
      <script>
      $(function() {
         var progressbar = $( "#progressbar-5" );
         progressLabel = $( ".progress-label" );
         $( "#progressbar-5" ).progressbar({
            value: false,
            change: function() {
               progressLabel.text( 
                  progressbar.progressbar( "value" ) + "%" );
            },
            complete: function() {
               progressLabel.text( "Loading Completed!" );
            }
         });
         function progress() {
            var val = progressbar.progressbar( "value" ) || 0;
            progressbar.progressbar( "value", val + 1 );
            if ( val < 99 ) {
               setTimeout( progress, 100 );
            }
         }
         setTimeout( progress, 3000 );
      });
   </script>
   </head>
   <body>
      <div id="progressbar-5">
         <div class="progress-label">
            Loading...
         </div>
      </div>
   </body>
</html>

JqueryUI Position

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI position</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>
         .positionDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #ffffab;
         }
         #targetElement{
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>
      <script>
         $(function() {
            // Position the dialog offscreen to the left, but centered vertically
            $( "#position1" ).position({
               my: "center",
               at: "center",
               of: "#targetElement"
            });
            $( "#position2" ).position({
               my: "left top",
               at: "left top",
               of: "#targetElement"
            });
            $( "#position3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#targetElement"
            });
            $( document ).mousemove(function( event ) {
               $( "#position4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>
   <body>
      <div id="targetElement">
         <div class="positionDiv" id="position1">move 1</div>
         <div class="positionDiv" id="position2">move 2</div>
         <div class="positionDiv" id="position3">move 3</div>
         <div class="positionDiv" id="position4">move 4</div>
      </div>
   </body>
</html>

Wednesday, 25 February 2015

JQuery UI Tooltip

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Tooltip </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() {
            $('.tooltip-9').tooltip({
               items: 'a.tooltip-9',
               content: 'check got result',
               show: "slideDown", // show immediately
               open: function(event, ui)
               {
                  ui.tooltip.hover(
                  function () {
                     $(this).fadeTo("slow", 0.5);
                  });
               }
            });
         });
         $(function() {
            $('.tooltip-10').tooltip({
               items: 'a.tooltip-10',
               content: 'mouse hover tooltip',
               show: "fold", 
               close: function(event, ui)
               {
                  ui.tooltip.hover(function()
                  {
                     $(this).stop(true).fadeTo(500, 1); 
                  },
                  function()
                  {
                     $(this).fadeOut('500', function()
                     {
                        $(this).remove();
                     });
                  });
               }
            });
         });
      </script>
   </head>
   <body style="padding:100px;">
       
      <div id="target">
         <a href="#" class="tooltip-9">Mouse hover</a>
         <a href="#" class="tooltip-10">Mouse hover</a>
      </div>
   </body>
</html>

Monday, 23 February 2015

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>