|
BasicUsage
The rudiments of pinwheeling a SELECT.
Featured IntroductionGetting a basic Pinwheel up and running is super easy! (It's fine tuning the myriad options that can make things a bit tricky.) Of course, make sure Prototype and Scriptaculous are downloaded and available before trying this at home. DetailsHere's an all-in-one-page, super-quick demo of Pinwheel. Feel free to copy and paste it into a file and check it out in your browser (you might need to change the path to the Javascript). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>pinwheel demo</title>
<!-- load the dependencies -->
<script type="text/javascript" src="javascript/prototype-1.6.js"></script>
<script type="text/javascript" src="javascript/scriptaculous/effects.js"></script>
<script type="text/javascript" src="javascript/pinwheel.js"></script>
<script type="text/javascript">
document.observe('dom:loaded', function() {
new Pinwheel('foo'); // create a pinwheel with default options
});
</script>
<style type="text/css">
#container {
padding: 200px; /* give the pinwheel room to spread its wings */
}
/* a little bit of style so things look a little bit cool */
.pinwheel div {
background-color: silver;
border: 1px solid gray;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<form>
<!-- nothing special needs to happen to the SELECT itself -->
<select id="foo" name="foo">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
|
a little typo in the javascript, the closing ");" is missing
document.observe('dom:loaded', function() { new Pinwheel('foo'); // create a pinwheel with default options });I also think the basic usage should include a way to clearly display the currently selected value.... anyway I can check in firebug that it works fine.
maybe the project is a little young to be posted on scripteka, anyway it looks gorgeous, really looking forward to using it sometime !
cheers juju