mirror of https://github.com/toddmotto/echo.git
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.
85 lines
12 KiB
85 lines
12 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> |
|
<meta charset="utf-8" /> |
|
<title>test page</title> |
|
<style> |
|
html,body,.container{ |
|
width: 100%; |
|
height: 100%; |
|
margin: 0; |
|
overflow: hidden; |
|
} |
|
.main{ |
|
height: calc(100% - 41px); |
|
background-color: #eee; |
|
overflow-x: hidden; |
|
overflow-y: auto; |
|
} |
|
.listTitle{ |
|
height: 40px; |
|
line-height: 40px; |
|
margin: 0; |
|
font-size: 18px; |
|
text-align: center; |
|
border-bottom: 1px solid #007ACC; |
|
} |
|
.main{ |
|
list-style-type: none; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
.item{ |
|
padding: 10px 0 10px 10px; |
|
border-bottom: 1px solid #999; |
|
} |
|
.item>img{ |
|
float: left; |
|
width: 50px; |
|
height: 50px; |
|
} |
|
.item>p{ |
|
height: 50px; |
|
line-height: 50px; |
|
margin:0 0 0 60px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<p class="listTitle">Tlists</p> |
|
<ul class="main"> |
|
<li class="item"> |
|
<img src="about:blank" data-echo="" alt="" /> |
|
<p>title and describe</p> |
|
</li> |
|
</ul> |
|
</div> |
|
<script src="../src/echo.js"></script> |
|
<script> |
|
var main=document.body.querySelector(".main"), |
|
emptyImgBg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC", |
|
picture=[ |
|
"data:image/jpeg;base64,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", |
|
|
|
"data:image/jpeg;base64,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", |
|
|
|
"data:image/jpeg;base64,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" |
|
], |
|
html="", |
|
index; |
|
|
|
for(var cont=0;cont<3;cont++){ |
|
for(var i=0;i<10;i++){ |
|
index=~~(3*Math.random()); |
|
html+="<li class=\"item\"><img src=\""+emptyImgBg+"\" data-echo=\""+picture[index]+"\" alt=\"\" /><p>title and describe</p></li>"; |
|
} |
|
} |
|
main.innerHTML=html; |
|
echo.init({ |
|
container:main |
|
}); |
|
</script> |
|
</body> |
|
</html> |