dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
160 lines (148 loc) • 4.33 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<title>dojox.mobile</title>
<style>
body {
font-family: Helvetica;
font-size: 17px;
}
.section {
font-weight: bold;
color: #008080;
}
.titleBar {
padding: 10px 0;
}
.contents {
margin-left: 30px;
font-weight: normal;
color: #000000;
}
.item {
position: relative;
border-bottom: 1px solid gray;
}
.anchor {
display: block;
padding: 10px 0;
text-decoration: none;
}
</style>
<script src="index.js"></script>
<script>
function setRightIcon(icon){
icon.src = "../themes/common/domButtons/compat/mblDomButtonBlackRightArrow16.png";
}
function setDownIcon(icon){
icon.src = "../themes/common/domButtons/compat/mblDomButtonBlackDownArrow16.png";
}
function isRightIcon(icon){
return (icon.src && icon.src.indexOf("Right") !== -1);
}
function sort(keys){
var data = [];
for(var i = 0; i < keys.length; i++){
var key = keys[i];
var items = [];
items.label = key.label;
for(var j = 0; j < tests.length; j++){
var item = tests[j];
var url = item.url;
var label = item.label || item.url;
var tags = item.tags ? item.tags.split(/,/) : [];
for(var k = 0; k < tags.length; k++){
if(tags[k] === key.tag){
items.push(item);
}
}
}
data.push(items);
}
return data;
}
function init(){
var theme = document.getElementById("sel1").value;
var container = document.getElementById("container");
container.innerHTML = "";
var data = sort(categories);
for(var i = 0; i < data.length; i++){
var items = data[i];
if(items.length == 0){ continue; }
var section = document.createElement("div");
section.className = "section";
container.appendChild(section);
var titleBar = document.createElement("div");
titleBar.className = "titleBar";
titleBar.onclick = toggleSection;
section.appendChild(titleBar);
var icon = document.createElement("img");
icon.className = "icon";
setRightIcon(icon);
titleBar.appendChild(icon);
var title = document.createElement("label");
title.className = "title";
title.innerHTML = items.label + " (" + items.length + ")";
titleBar.appendChild(title);
var contents = document.createElement("div");
contents.className = "contents";
contents.style.display = "none";
section.appendChild(contents);
for(var j = 0; j < items.length; j++){
var item = items[j];
var url = item.url;
var label = item.label || item.url;
var item = document.createElement("div");
item.className = "item";
contents.appendChild(item);
var anchor = document.createElement("a");
anchor.className = "anchor";
anchor.href = url + (theme ? "?theme=" + theme : "");
anchor.target = "_blank";
anchor.innerHTML = label;
item.appendChild(anchor);
}
}
}
function toggleSection(e) {
e = e || event;
var node = e.srcElement ? e.srcElement : e.target;
var titleBar = (node.className == "titleBar") ? node : node.parentNode;
var img = titleBar.childNodes[0];
var label = titleBar.childNodes[1];
var contents = titleBar.nextSibling;
if (isRightIcon(img)){
setDownIcon(img);
contents.style.display = "block";
}
else {
setRightIcon(img);
contents.style.display = "none";
}
e.cancelBubble = true;
}
function onThemeChange(){
var theme = document.getElementById("sel1").value;
var nodes = document.getElementsByTagName("a");
for(var i = 0; i < nodes.length; i++){
var a = nodes[i];
a.href = a.href.replace(/(\?theme=.*)?$/, theme ? "?theme=" + theme : "");
}
}
</script>
</head>
<body onload="init()">
<select id="sel1" onchange="onThemeChange()">
<option value=""></option>
<option value="iPhone">iPhone</option>
<option value="ios7">ios7</option>
<option value="Android">Android</option>
<option value="Holodark">Holodark</option>
<option value="BlackBerry">BlackBerry</option>
<option value="WindowsPhone">WindowsPhone</option>
<option value="Custom">Custom</option>
</select><br>
<div id="container"></div>
</body>
</html>