Why does this code (taken from the demo sample at jquery ui), doesn't work for me? It says .button() is not a function.
Update: Tried loading from google no luck. Here is teh error
$(".demo button:first").button is not a function
Line 27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="scripts/css/ui-lightness/jquery-ui-1.8.2.custom.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.2");
</script>
</head>
<body>
<div id="container" class="container">
<script type="text/javascript">
$(document).ready(function(){
$(".demo button:first").button({
icons: {
primary: 'ui-icon-locked'
},
text: false
}).next().button({
icons: {
primary: 'ui-icon-locked'
}
}).next().button({
icons: {
primary: 'ui-icon-gear',
secondary: 'ui-icon-triangle-1-s'
}
}).next().button({
icons: {
primary: 'ui-icon-gear',
secondary: 'ui-icon-triangle-1-s'
},
text: false
});
});
</script>
<div class="demo">
<button>Button with icon only</button>
<button>Button with icon on the left</button>
<button>Button with two icons</button>
<button>Button with two icons and no text</button>
</div><!-- End demo -->
<div>
<ul>
<li>
<a id="icon_only"></a>
</li>
</ul>
</div>
</div>
</body>
</html>