Apr 05, 2012
|

Barcelona coaches jQuery UI Widgets

jQuery is a new kind of JavaScript Library.

Barcelona introduces the basics in jquery UI widgets


jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

jQuery is free, open source software, designed to make it easier to navigate a document, select DOM elements, create animations, and handle events. jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library.



jQuery Widgets.

jQuery offers a big variety of widgets. Here, the Barcelona team will show how to use the basic ones:


BUTTON



Source Code
<script>
$(function() {
  $("input.jbutton").button();
});
</script>
<div>
  <input type="submit" class="jbutton" value="Like Barcelona Link" />
</div>


DATEPICKER


Next Barcelona Match:

Source Code
<script>
$(function() {
  $( "#datepicker" ).datepicker();
});
</script>
<div>
  <p>Next Barcelona Match: <input id="datepicker" type="text"></p>
</div> 

DIALOG


This is an animated dialog which is useful for displaying any Barcelona information.

Source Code
<script>
$(function() {

$("#opener").button();

$("#dialog").dialog({
  autoOpen: false,
  show: "blind",
  hide: "explode"
});

$("#opener").click(function() {
  $("#dialog").dialog( "open" );
    return false;
  });
});
</script>
<div>
  <div id="dialog" title="Welcome to FC Barcelona">
    <p>This is an animated dialog which is useful for displaying any Barcelona information.</p>
  </div>  
  <button id="opener">Open Barcelona Dialog</button>
</div>


SLIDER




Source Code
<script>
$(function() {
$( "#slider-range" ).slider({
 range: true,
 min: 0,
 max: 400,
 values: [ 220, 280 ],
 slide: function( event, ui ) {
  $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
 }
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
 " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
<div>
  <p>
   <label for="amount">Leonel Messi price tag: (Millions)</label>
   <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
  </p>
  <div id="slider-range"></div>
</div>


PROGRESSBAR



Source Code
<script>
$(function() {
  $( "#progressbar" ).progressbar({
   value: 59
  });
});
</script>
<div>
  <div id="progressbar"></div>
</div>

0 comments:

Post a Comment