mirror of
https://github.com/hiloteam/Hilo.git
synced 2025-12-08 20:35:59 +00:00
161 lines
4.6 KiB
HTML
161 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>hilo examples</title>
|
|
<style>
|
|
body,ul,li{
|
|
margin:0px;
|
|
padding:0px;
|
|
}
|
|
|
|
#exampleList{
|
|
list-style: none;
|
|
background: #aaa;
|
|
width:150px;
|
|
margin: 10px;
|
|
}
|
|
|
|
#exampleList li{
|
|
font-size: 16px;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
margin: 1px 1px;
|
|
background: #999;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
#exampleList .active{
|
|
background: #3a383e;
|
|
}
|
|
|
|
#exampleFrame{
|
|
position: absolute;
|
|
right:10px;
|
|
top:10px;
|
|
border:2px solid #333;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<ul id='exampleList'></ul>
|
|
<iframe id='exampleFrame' name='exampleFrame' frameborder="0"></iframe>
|
|
</div>
|
|
<script>
|
|
var listElem = document.getElementById('exampleList');
|
|
var iframeElem = document.getElementById('exampleFrame');
|
|
var examples = [
|
|
'Bitmap',
|
|
'Sprite',
|
|
'Sprite2',
|
|
'Graphics',
|
|
'MouseEvent',
|
|
'Button',
|
|
'BitmapText',
|
|
'LoadQueue',
|
|
'Text',
|
|
'Tween',
|
|
'TweenLink',
|
|
'Ease',
|
|
'WebSound',
|
|
'drag',
|
|
'Camera',
|
|
'Camera3d',
|
|
'Background',
|
|
'align',
|
|
'DOMElement',
|
|
'ParticleSystem',
|
|
'Resize',
|
|
['physics','../src/extensions/physics/demo/index'],
|
|
['dragonbones','../src/extensions/dragonbones/demo/index']
|
|
];
|
|
|
|
function getExampleName(name){
|
|
if(Object.prototype.toString.call(name) === '[object Array]'){
|
|
return name[0];
|
|
}
|
|
else{
|
|
return name;
|
|
}
|
|
}
|
|
|
|
function getExamplePath(name){
|
|
if(Object.prototype.toString.call(name) === '[object Array]'){
|
|
return name[1] + '.html';
|
|
}
|
|
else{
|
|
return name + '.html';
|
|
}
|
|
}
|
|
|
|
var examplesDict = {};
|
|
for(var i = 0;i < examples.length;i ++){
|
|
(function(originName, i){
|
|
var name = getExampleName(originName);
|
|
var elem = document.createElement('li');
|
|
examplesDict[name] = {
|
|
elem:elem,
|
|
originName:originName
|
|
};
|
|
elem.innerHTML = name;
|
|
listElem.appendChild(elem);
|
|
elem.onclick = function(){
|
|
setDemo(originName);
|
|
};
|
|
})(examples[i], i);
|
|
}
|
|
|
|
var winWidth = window.innerWidth || document.documentElement.clientWidth;
|
|
var winHeight = window.innerHeight || document.documentElement.clientHeight;
|
|
|
|
iframeElem.width = winWidth - 220;
|
|
iframeElem.height = winHeight - 20;
|
|
var iframeWindow = iframeElem.contentWindow;
|
|
|
|
var hashName = location.hash.slice(1);
|
|
var currentName = '';
|
|
function setDemo(originName, first){
|
|
var name = getExampleName(originName);
|
|
var path = getExamplePath(originName);
|
|
if(name !== currentName){
|
|
location.hash = name;
|
|
iframeElem.src = path + (first?location.search:iframeWindow.location.search);
|
|
if(examplesDict[currentName]){
|
|
examplesDict[currentName].elem.className = '';
|
|
}
|
|
examplesDict[name].elem.className = 'active';
|
|
currentName = name;
|
|
}
|
|
}
|
|
|
|
setDemo(examplesDict[hashName]?examplesDict[hashName].originName:examples[0], true);
|
|
|
|
window.onkeydown = function(e){
|
|
var index = examples.indexOf(examplesDict[currentName].originName);
|
|
switch(e.keyCode){
|
|
case 38://up
|
|
case 87://w
|
|
index --;
|
|
break;
|
|
case 40://down
|
|
case 83://s
|
|
index ++;
|
|
break;
|
|
}
|
|
if(index < 0){
|
|
index = examples.length - 1;
|
|
}
|
|
else if(index > examples.length - 1){
|
|
index = 0;
|
|
}
|
|
|
|
setDemo(examples[index]);
|
|
};
|
|
|
|
</script>
|
|
</body>
|
|
</html> |