My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
BasicUsage  
The rudiments of pinwheeling a SELECT.
Featured
Updated Nov 21, 2008 by dan.dor...@gmail.com

Introduction

Getting 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.

Details

Here'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>
Comment by julien.r...@gmail.com, Sep 1, 2008

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

Powered by Google Project Hosting