Javascript spinning wheel for iOS and Android

The spinning wheel was developed by Matteo Spinelli. You find the original source code and documentation at his page here: http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch [Link entfernt, weil Linkziel leider nicht mehr verfügbar]

This text assumpts, that you have read the original page and the documentation. Here are only the additional changes! This is only a little quick hack. All thanks should go to Matteo.

Changes:

Support for hires iOS Retina display and Android HD screens
Added two more buttons

Android and iOS:

For support of the higher resolution displays i have simply added some css. Android HD devices have a devicePixelRatio of 1.5 and iOS Retina has 2. When there is a Android device with devicePixelRatio of 2, it wont work, because iOS needs a width of 200% to use the full with.

The Android event handling is a little bit different, so the "Done" and "cancel" buttons react to Touchstart. For this the script has to know your device. It can be set in spinningwheel.js in the head. "i" is for iOS and "a" is for Android. It can be set dynamicaly with
SpinningWheel.setDevice("a")

Buttons:

I am german, so i wanted german text on the button. For this i have added a new function. But for quicker usage i added also 2 new buttons between the "Done" and "Cancel". I use it to switch between input fields, if there are more. The screenshot at the right shows the edit screen of my App "BloodPressureDB" on Android (Yes, there is also a iPhone Version, because i am using PhoneGAP). There are 2 spinners. One for date and time and one for systolic and diastolic blood pressure and pulse. With "< Time" and "Data >" a quick switch between the two spinners is possible.
You can use it like the Done and Cancel in the original:
    SpinningWheel.setButtonlAction(LeftButtonClicked);
    SpinningWheel.setButtonrAction(RightButtonClicked);
For setting the texts is only one function with 4 parameters:
       SpinningWheel.setButtonTexts('Cancel','Done','< Prev','Next >')

The parameters are the text for each button (cancel, done, left, right). You can use null, then nothing is changed. For left and right an empty string will remove the button.
Example:
       SpinningWheel.setButtonTexts('Abbrechen',Fertig',null,null)
will set "Cancel" and "Done" to german version and make no change to the other buttons.
       SpinningWheel.setButtonTexts(null,null,'','')
will remove the additional buttons.
One important thing:
Call setButtonTexts after open. It is just a hack and changes the HTML direct, so it has already to exist.

Download:

sw-hk.zip 12.499 Bytes