alloytouch
Version:
super tiny size touch and physical motion library for the web
220 lines (192 loc) • 5.83 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>AlloyTouch</title>
<style>
html, body, ul, li {
margin: 0;
padding: 0;
border: 0;
}
.iselect-wrap {
position: fixed;
left: 0;
top: 0;
z-index: 1200;
width: 100%;
background: rgba(0, 0, 0, 0.4);
overflow: hidden;
display: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.iselect {
width: 100%;
height: 190px;
bottom: -190px;
overflow: hidden;
position: absolute;
visibility: hidden;
background-color: white;
bottom: 0px;
}
.iselect-options {
width: 100%;
height: 150px;
bottom: 0;
overflow: hidden;
position: absolute;
}
.iselect-scroll {
position: absolute;
top: 0px;
width: 100%;
z-index: 7;
text-align: center;
top: 60px;
}
.iselect-scroll li {
list-style: none;
height: 30px;
line-height: 30px;
font-size: 18px;
}
.iselect-mask1 {
position: absolute;
width: 100%;
height: 60px;
top: 0px;
background-color: white;
opacity: 0.7;
z-index: 9;
}
.iselect-mask2 {
position: absolute;
width: 100%;
height: 60px;
bottom: 0;
background-color: white;
opacity: 0.7;
z-index: 10;
}
.iselect-toolbar {
top: 0px;
height: 40px;
font-size: 13px;
font-weight: bold;
width: 100%;
background-color: #fcfcfc;
border-top: 1px solid #ccc;
}
.iselect-toolbar-ok {
position: absolute;
right: 12px;
border-radius: 3px;
top: 7px;
padding: 3px 6px;
color: white;
background-color: #0283FD;
}
.iselect-toolbar-cancel {
position: absolute;
left: 12px;
border-radius: 3px;
top: 7px;
padding: 3px 6px;
color: white;
background-color: #0283FD;
}
/*.iselect-toolbar-ok:hover {
color: #e4e3e3;
background-color: #0261bb;
}*/
</style>
<style>
.button {
background-color: #00ABEB;
border: 1px solid #c3c8cc;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
height: 29px;
font-size: 14px;
color: white;
text-align: center;
line-height: 26px;
width: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -15px;
}
.button.active {
background-color: #006389;
}
</style>
<style>
.b1:after {
display: block;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.b1:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}
.b1.bb:after {
border-bottom: 1px solid #e4e4e4;
}
.b1.bt:after {
border-top: 1px solid #e4e4e4;
}
.b1.bl:after {
border-left: 1px solid #e4e4e4;
}
.b1.br:after {
border-right: 1px solid #e4e4e4;
}
</style>
</head>
<body>
<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 1313; width: 140px; height: 140px;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
<div class="button" id="button">AlloyTouch Button</div>
<script src="../../transformjs/transform.js"></script>
<script src="../../index.js"></script>
<script src="../../alloy_touch.button.js"></script>
<script src="alloy_touch.select.infinite.js"></script>
<script>
var i = 0, options = [];
for (; i < 60; i++) {
options.push({ value: i, text: i < 10 ? "0" + i+" ms" : i + " ms" });
}
var iselect = new AlloyTouch.Select({
options: options,
selectedIndex: 11,
change: function (item, index) {
},
complete: function (item, index) {
document.body.insertAdjacentHTML("beforeEnd", "<br/>选了第" + index + "项<br/>value:" + item.value + "<br/>text:" + item.text);
}
})
iselect.show();
new AlloyTouch.Button("#button", function () {
iselect.show();
}, "active");
</script>
</body>
</html>