SpinningWheel integration & events question
Nimbus Software
Pn7Rk) successfully in my project. For jQT you will need to modify
some of SW's CSS. See comment #75 on cubiq's SW page to get it to
work. You can open the picker in Safari and Coda, but you won't be
able to spin the wheels. The object is fully functional in an iPod
touch, iPhone or the simulator. My only WTF moment is when you have a
panel with an open SW and you touch the panel's back button. The page
will navigate out but the SW object will not close! I've got a work-
around that fires off a SpinningWheel.close() event when the page
starts its animation. A better solution would be to prevent the any
events above the spinner. Here's my example. First-off, download the
SpinningWheel code-->http://cubiq.org/dropbox/sw/sw.zip?v=1.4
Done with that? Ok, then...
<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--required for jQTouch r133 -->
<script src="lib/jqtouch/jquery.1.3.2.min.js" type="application/x-
javascript"></script>
<script src="lib/jqtouch/jqtouch.js" type="application/x-javascript"></
script>
<style type="text/css" media="screen">@import "lib/jqtouch/
jqtouch.css";</style>
<style type="text/css" media="screen">@import "lib/jqtouch/themes/
apple/theme.css";</style>
<!-- spinning wheel -->
<script src="lib/spinningwheel/spinningwheel-min.js" type="application/
x-javascript"></script>
<style type="text/css" media="screen">@import "lib/spinningwheel/
spinningwheel-min.css";</style>
<script type="text/javascript">
$.jQTouch({statusBar: 'black'});
</script>
</head>
<body>
<div id="jqt">
<!-- pnlHome -->
<div id="pnlHome">
<div class="toolbar">
<h1>Start</h1>
</div>
<ul class="rounded">
<li class="arrow"><a href="#pnlSW">SpinningWheel</a></li>
</ul>
</div>
<!-- pnlSW -->
<div id="pnlSW">
<div class="toolbar">
<h1>SW Test</h1>
<a class="button back" href="#">Back</a>
</div>
<ul class="rounded">
<li id="default" class="SW">Touch here & then touch the back
button<small class="setting"></small></li>
</ul>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".SW").click(function () {
SpinningWheel.addSlot({0:0,1:1,2:2,3:3,4:4,5:5,6:6,7:7,8:8,9:9,10:10});
SpinningWheel.setCancelAction(function(){
SpinningWheel.close();
});
SpinningWheel.setDoneAction(function(){
SpinningWheel.close();
});
SpinningWheel.open();
})
})
</script>
</body>
</html>
In you're favorite touch device touch the "SpinningWheel" <li>, touch
the "Touch here & then touch the back button" <li> and then, well,
touch the back button. BTW, this effect doesn't happen on cubiq's demo
page so there's some mod that will have to be done.
P.S.: So you want my work-around, eh?
$("#pnlWHATEVER").bind("pageAnimationStart", function (e, data) {
if (data.direction === "out"){
if($("#sw-wrapper").css("top") != undefined){
SpinningWheel.close();
}
}
})
Nimbus Software
/
*******************************************************************************
.back
Extend class to close any open SpinningWheels
*******************************************************************************/
$(".back").click(function () {
if($("#sw-wrapper").css("top") != undefined){
SpinningWheel.close();
}
})