jqueryui: 02/26/15

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>

Thursday, 26 February 2015

JqueryUI Tabs

JqueryUI Progressbar

JqueryUI Position