source: Dev/trunk/src/client/dojox/mobile/tests/index.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 4.2 KB
RevLine 
[483]1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2<html>
3<head>
4        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
5        <title>dojox.mobile</title>
6        <style>
7        body {
8                font-family: Helvetica;
9                font-size: 17px;
10        }
11        .section {
12                font-weight: bold;
13                color: #008080;
14        }
15        .titleBar {
16                padding: 10px 0;
17        }
18        .contents {
19                margin-left: 30px;
20                font-weight: normal;
21                color: #000000;
22        }
23        .item {
24                position: relative;
25                border-bottom: 1px solid gray;
26        }
27        .anchor {
28                display: block;
29                padding: 10px 0;
30                text-decoration: none;
31        }
32        </style>
33        <script src="index.js"></script>
34        <script>
35                function setRightIcon(icon){
36                        icon.src = "../themes/common/domButtons/compat/mblDomButtonBlackRightArrow16.png";
37                }
38                function setDownIcon(icon){
39                        icon.src = "../themes/common/domButtons/compat/mblDomButtonBlackDownArrow16.png";
40                }
41                function isRightIcon(icon){
42                        return (icon.src && icon.src.indexOf("Right") !== -1);
43                }
44
45                function sort(keys){
46                        var data = [];
47                        for(var i = 0; i < keys.length; i++){
48                                var key = keys[i];
49                                var items = [];
50                                items.label = key.label;
51                                for(var j = 0; j < tests.length; j++){
52                                        var item = tests[j];
53                                        var url = item.url;
54                                        var label = item.label || item.url;
55                                        var tags = item.tags ? item.tags.split(/,/) : [];
56                                        for(var k = 0; k < tags.length; k++){
57                                                if(tags[k] === key.tag){
58                                                        items.push(item);
59                                                }
60                                        }
61                                }
62                                data.push(items);
63                        }
64                        return data;
65                }
66                function init(){
67                        var theme = document.getElementById("sel1").value;
68                        var container = document.getElementById("container");
69                        container.innerHTML = "";
70                        var data = sort(categories);
71                        for(var i = 0; i < data.length; i++){
72                                var items = data[i];
73                                if(items.length == 0){ continue; }
74
75                                var section = document.createElement("div");
76                                section.className = "section";
77                                container.appendChild(section);
78
79                                var titleBar = document.createElement("div");
80                                titleBar.className = "titleBar";
81                                titleBar.onclick = toggleSection;
82                                section.appendChild(titleBar);
83
84                                var icon = document.createElement("img");
85                                icon.className = "icon";
86                                setRightIcon(icon);
87                                titleBar.appendChild(icon);
88
89                                var title = document.createElement("label");
90                                title.className = "title";
91                                title.innerHTML = items.label + " (" + items.length + ")";
92                                titleBar.appendChild(title);
93
94                                var contents = document.createElement("div");
95                                contents.className = "contents";
96                                contents.style.display = "none";
97                                section.appendChild(contents);
98
99                                for(var j = 0; j < items.length; j++){
100                                        var item = items[j];
101                                        var url = item.url;
102                                        var label = item.label || item.url;
103
104                                        var item = document.createElement("div");
105                                        item.className = "item";
106                                        contents.appendChild(item);
107
108                                        var anchor = document.createElement("a");
109                                        anchor.className = "anchor";
110                                        anchor.href = url + (theme ? "?theme=" + theme : "");
111                                        anchor.target = "_blank";
112                                        anchor.innerHTML = label;
113                                        item.appendChild(anchor);
114                                }
115                        }
116                }
117
118                function toggleSection(e) {
119                        e = e || event;
120                        var node = e.srcElement ? e.srcElement : e.target;
121                        var titleBar = (node.className == "titleBar") ? node : node.parentNode;
122                        var img = titleBar.childNodes[0];
123                        var label = titleBar.childNodes[1];
124                        var contents = titleBar.nextSibling;
125                        if (isRightIcon(img)){
126                                setDownIcon(img);
127                                contents.style.display = "block";
128                        }
129                        else {
130                                setRightIcon(img);
131                                contents.style.display = "none";
132                        }
133                        e.cancelBubble = true;
134                }
135
136                function onThemeChange(){
137                        var theme = document.getElementById("sel1").value;
138                        var nodes = document.getElementsByTagName("a");
139                        for(var i = 0; i < nodes.length; i++){
140                                var a = nodes[i];
141                                a.href = a.href.replace(/(\?theme=.*)?$/, theme ? "?theme=" + theme : "");
142                        }
143                }
144        </script>
145</head>
146<body onload="init()">
147        <select id="sel1" onchange="onThemeChange()">
148                <option value=""></option>
149                <option value="iPhone">iPhone</option>
150                <option value="Android">Android</option>
151                <option value="Holodark">Holodark</option>
152                <option value="BlackBerry">BlackBerry</option>
153                <option value="WindowsPhone">WindowsPhone</option>
154                <option value="Custom">Custom</option>
155        </select><br>
156        <div id="container"></div>
157</body>
158</html>
Note: See TracBrowser for help on using the repository browser.