Show Spinner using JQuery

Fri Jan 11, 2013 1:19 pm

Show Spinner using JQuery
javascript code

<html>
<head>
<title>Show Spinner using JQuery</title>
 
<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />	
<style type="text/css">
#Myspinner
{
font-weight:bold;
background:#13C481;
 
text-align:center;
width:200px;
height:20px;
padding:0px;
text-decoration: underline;
color:Red;
}
</style>
    <script>
  $(function() {
    var spinner = $( "#Myspinner" ).spinner();
 
    $( "#btn2" ).click(function() {
      if ( spinner.spinner( "option", "disabled" ) ) {
        spinner.spinner( "enable" );
      } else {
        spinner.spinner( "disable" );
      }
    });
    $( "#btn1" ).click(function() {
      if ( spinner.data( "ui-spinner" ) ) {
        spinner.spinner( "destroy" );
      } else {
        spinner.spinner();
      }
    });
    $( "#btn3" ).click(function() {
      alert( spinner.spinner( "value" ) );
    });
    $( "#btn4" ).click(function() {
      spinner.spinner( "value", 10 );
    });
 
    $( "button" ).button();
  });
  </script>
</head>
<body>
 
<p>
  <label for="spinner">Change value:</label>
  <input id="Myspinner" name="value" />
</p>
 
<p>
  <button id="btn2">Toggle disable/enable</button>
  <button id="btn1">Toggle widget</button>
</p>
 
<p>
  <button id="btn3">Show value</button>
  <button id="btn4">Change value to 10</button>
</p>
 
 
</body>
</html>

Show Spinner using JQuery

Show Spinner using JQuery

Topic Tags