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

Leonel Messi price tag: (Millions)

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>