You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
4.2 KiB
159 lines
4.2 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<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>
|
|
|