A basic example
A basic test may look something like this:
1: <!DOCTYPE html>
2: <meta charset="utf-8">
3: <html>
4: <head>
5:
6: <!-- Local jqTouch -->
7: <link rel="stylesheet" href="lib/jqtouch-1.0-b4-rc/themes/css/apple.css" title="jQTouch">
8: <script src="lib/jqtouch-1.0-b4-rc/src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
9: <script src="lib/jqtouch-1.0-b4-rc/src/jqtouch.js" type="text/javascript" charset="utf-8"></script>
10:
11: <script type="text/javascript" charset="utf-8">
12: var jQT = new $.jQTouch({ });
13: </script>
14:
15: </head>
16:
17: <body>
18: <div id="colors">
19: <div class="toolbar">
20: <h1>Colors</h1>
21: </div>
22: <ul class="edgetoedge">
23: <li class="arrow"><a href="#blue" class="flip">Blue!</a></li>
24: <li class="arrow"><a href="#red" class="flip">Red!</a></li>
25: </ul>
26: </div>
27:
28: <div id="blue">
29: <div class="toolbar">
30: <a class="button back" href="#">Back</a>
31: </div>
32: <p>Blue</p>
33: </div>
34:
35: <div id="red">
36: <div class="toolbar">
37: <a class="button back" href="#">Back</a>
38: </div>
39: <p>Red</p>
40: </div>
41:
42: </body>
43:
44: </html>
45:
The example can be seen on your mobile device (iOS or Android) scanning the QR code below [1].
JQTouch fires transitions on each hyperlink (<a> elements in lines 23 and 24 in the above example.
The JQTouch library hooks these events for you, without having to worry for anything else. You can select the type of transition by specifying the class for the <a> element (a "flip" transition in the example above).
But what happens when you want to attach "click" events and transitions to a non-hyperlink element? For example, if you want to fire transitions on different elements of a SVG.
Things seem to be less easy in that case.
Here is the easiest way I have found to do the job. The idea is to have empty <a> elements that are fired "manually" when the non-hyperlink elements are "clicked".
Here is a minimal, full-working example:
In lines 26 and 27 we have a couple of these <a> empty elements.
In lines 70 and 71 we attach "click" event listeners on the svg rects that will fire the "tap" events of the empty <a> elements. It is important to fire the "tap" events, or the flip transition will not fire.
You can play with this example in your mobile device scanning the QR code in [2].
This solution is not what I would call an elegant one. In fact I find ugly having to use the empty <a> elements. But it is the only way that I have found to do the trick (and I have dug in the JQTouch code trying to find a better way to solve the problem)
If anyone knows a better solution, please, leave a message below, I would love to hear about it.
QR codes with the examples shown in this post:
[1] [2]
JQTouch fires transitions on each hyperlink (<a> elements in lines 23 and 24 in the above example.
The JQTouch library hooks these events for you, without having to worry for anything else. You can select the type of transition by specifying the class for the <a> element (a "flip" transition in the example above).
Transitions without hyperlinks
But what happens when you want to attach "click" events and transitions to a non-hyperlink element? For example, if you want to fire transitions on different elements of a SVG.
Things seem to be less easy in that case.
Here is the easiest way I have found to do the job. The idea is to have empty <a> elements that are fired "manually" when the non-hyperlink elements are "clicked".
Here is a minimal, full-working example:
1: <!DOCTYPE html>
2: <meta charset="utf-8">
3: <html>
4: <head>
5: <!-- Remote D3.js -->
6: <script src="http://d3js.org/d3.v3.min.js"></script>
7:
8: <!-- Local jqTouch -->
9: <link rel="stylesheet" href="lib/jqtouch-1.0-b4-rc/themes/css/apple.css" title="jQTouch">
10: <!-- <style type="text/css" media="screen">@import "lib/jqtouch-1.0-b4-rc/themes/css/jqtouch.css";</style> -->
11: <script src="lib/jqtouch-1.0-b4-rc/src/lib/zepto.min.js" type="text/javascript" charset="utf-8"></script>
12: <script src="lib/jqtouch-1.0-b4-rc/src/jqtouch.js" type="text/javascript" charset="utf-8"></script>
13:
14: <script type="text/javascript" charset="utf-8">
15: var jQT = new $.jQTouch({ });
16: </script>
17:
18: </head>
19:
20: <body>
21: <div id="colors">
22: <div class="toolbar">
23: <h1>Colors</h1>
24: </div>
25: <div id="mysvg">
26: <a id="redlink" href="#red" class="flip"></a>
27: <a id="bluelink" href="#blue" class="flip"></a>
28: </div>
29: </div>
30:
31: <div id="blue">
32: <div class="toolbar">
33: <a class="button back" href="#">Back</a>
34: </div>
35: <p>Blue</p>
36: </div>
37:
38: <div id="red">
39: <div class="toolbar">
40: <a class="button back" href="#">Back</a>
41: </div>
42: <p>Red</p>
43: </div>
44:
45: <script>
46: var w = document.documentElement.clientWidth;
47: var h = document.documentElement.clientHeight;
48: var svg = d3.select("#mysvg")
49: .append("svg")
50: .append("g");
51:
52: svg
53: .append("rect")
54: .attr("id", "redrect")
55: .attr("width", w)
56: .attr("height", h/2)
57: .attr("x", 0)
58: .attr("y", 0)
59: .style("fill", "red");
60:
61: svg
62: .append("rect")
63: .attr("id", "bluerect")
64: .attr("width", w)
65: .attr("height", h/2)
66: .attr("x", 0)
67: .attr("y", h/2)
68: .attr("fill", "blue");
69:
70: d3.select("#redrect").on("click", function(){$("#redlink").trigger("tap")});
71: d3.select("#bluerect").on("click", function(){$("#bluelink").trigger("tap")});
72: </script>
73:
74: </body>
75:
76: </html>
77:
In lines 26 and 27 we have a couple of these <a> empty elements.
In lines 70 and 71 we attach "click" event listeners on the svg rects that will fire the "tap" events of the empty <a> elements. It is important to fire the "tap" events, or the flip transition will not fire.
You can play with this example in your mobile device scanning the QR code in [2].
This solution is not what I would call an elegant one. In fact I find ugly having to use the empty <a> elements. But it is the only way that I have found to do the trick (and I have dug in the JQTouch code trying to find a better way to solve the problem)
If anyone knows a better solution, please, leave a message below, I would love to hear about it.
QR codes with the examples shown in this post:
[1] [2]
No comments:
Post a Comment