<html>
<head>
<title>H5 Menu(Dark)</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-
scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html {
zoom:1.2;
}
body {
width: 100%;
height: 100%;
}
* {
color: #E8E8E8;
font-size: 12px;
font-family: Arial, sans-serif;
/* DebugMode:delete next line to show dashed border */
/*
border: 1px dashed gray;/**/
*:not(input,checkbox,textarea) {
/*禁止文本选择*/
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none; /* Non-prefixed version, currently */
outline: none;
-webkit-tap-highlight-color: transparent;
}
input {
background-color: rgba(0,0,0,0);
height: 30px;
}
button {
height: 30px;
background-color: #E8E8E850;
display: inline-block;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
border: none;
border-radius: 5px;
}
button:active {
transform: translateY(2px);
}
input[type=radio] {
width:20px;
height:20px;
margin-right:6px;
border:none;
outline-style:none;
-webkit-appearance:none;
vertical-align:middle;
border:1px solid #DDDDDDF0;
border-radius:50%;
}
input[type=radio]:checked {
border:6px solid #2F7DCDF0;
background:#FFFFFF;
}
input[type=checkbox]{
visibility: hidden;
vertical-align:middle; margin-bottom:2px;
cursor: pointer;
position: relative;
width: 24px;
height: 24px;
}
input[type=checkbox]::after{
position: absolute;
top: 0;
margin-top:2px;
width: 14px; height: 14px;
border: 1px solid #EEEEEE;
border-radius: 3px;
background-color: rgba(0,0,0,0);
display: inline-block;
visibility: visible;
text-align: center;
content: ' ';
}
input[type=checkbox]:checked::after{
content: "✓";
border-color: #4498F7;
background-color: #4498F7;
font-size: 12px;
font-weight: bold;
}
input[type=range] {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 15px;
cursor: pointer;
animate: 0.2s;
background: #D1D1D130;
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
border: 1px solid #000000;
height: 18px;
width: 16px;
border-radius: 3px;
background: #FFFFFFE0;
cursor: pointer;
-webkit-appearance: none;
margin-top: -2px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #367ebd;
}
/* 滚动条整体部分 */
.scrollbar {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.scrollbar::-webkit-scrollbar {
width: 5px; /* 纵向滚动条宽度 */
height: 5px;/* 横向滚动条高度 */
background-color: #F5F5F5; /* 滚动条整体背景，一般被覆盖着 */
}
/* 滚动条的轨道（里面装有 Thumb） */
.scrollbar::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 滚动条轨道阴影 */
/*border-radius: 10px; /* 滚动条轨道圆角 */
background-color: #F5F5F5; /* 滚动条轨道背景 */
}
/* 滚动条里面的滑块 */
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 15px; /* 滚动条滑块圆角 */
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); /* 滚动条滑块阴影 */
background-color: #B8B8B8; /* 滚动条滑块颜色 */
}
.menubox {
width: 60px;
height: 30px;
line-height: 30px; /*height 和 line-height 设置一样即可文字垂直居中*/
text-align:center;
}
.menubox.current {
background-color: #494949;
}
.menuview {
display:none;
}
.menuview.current {
display:block;
overflow-x: hidden;
overflow-y: scroll;
height: 100%;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
if(typeof $ == 'undefined') alert("网络连接失败, 请重新启动!");
$(document).ready(function(){
//alert();
//绑定菜单点击切换子页面
$("div.menubox").click(function(){
$("div.menubox").removeClass("current");
$("div.menuview").removeClass("current");
$(this).addClass("current");
var menuid = $(this).attr("menu");
$("div#"+menuid).addClass("current");
});
/*禁止文本 Option 和拖动*/
document.body.onselectstart = document.body.ondrag =function(){
return false;
}
$("input").blur(function(){
window.scroll(0,0); //文本框等输入完毕后页面自动滚动到顶部
});
//激活 webkit 的 button:active
document.body.addEventListener('touchstart', function () {});
if(typeof h5gg!='undefined') {
//设置标题栏区域可拖动悬浮窗
setWindowDrag(0, 0, 400, 80);
//设置尺寸和位置
setWindowRect(60,60,300,300);
}
});
function login()
{
if(!$("#username").val()) {
alert("please input your account");
return;
}
if(!$("#password").val()) {
alert("please input your password");
return;
}
alert("test login\n\nusername:"+$("#username").val() + "\n" + "password:"+$
("#password").val());
}
function buttonclick(input)
{
alert("button clicked = "+input.innerText);
}
function checkboxclick(input)
{
alert("checkbox clicked = "+input.parentElement.innerText+" = "+input.checked);
}
function rangechange(input)
{
alert("slider chagne = "+input.value);
}
function radioclick(input)
{
alert("radio clicked: group = "+input.name+" =
"+input.parentElement.innerText+" = "+input.value);
}
</script>
</head>
<body bgcolor="#202C3E" style="margin:0;">
<!--标题栏-->
<div id="titleBar" style="background-color:#122220; padding:5px; margin:0px;">
H5 Menu(DarkStyle)
</div>
<!--用一个表格来布局左右两栏-->
<table id="bodyView" width="100%" style="table-layout:fixed;height: calc(100% -
30px) ;">
<tr>
<td width="30%" style="vertical-align:top">
<div>
<div class="menubox current" menu="menu1">Menu 1</div>
<div class="menubox" menu="menu2">Menu 2</div>
<div class="menubox" menu="menu3">Menu 3</div>
<div class="menubox" menu="menu4">Menu 4</div>
<div class="menubox" menu="menu5">Menu 5</div>
</div>
</td>
<td style="vertical-align:top" class="scrollbar">
<div id="menu1" class="menuview current">
<p>CheckBox</p>
<label><input type="checkbox" checked="checked"
onclick="checkboxclick(this)" />Option1</label>
<label><input type="checkbox" onclick="checkboxclick(this)" />Option2</label>
<p>
<label><input type="checkbox" onclick="checkboxclick(this)" />Option3</label>
<label><input type="checkbox" onclick="checkboxclick(this)" />Option4</label>
<p>
</div>
<div id="menu2" class="menuview">
<p>Button</p>
<button onclick="buttonclick(this)">Button1</button>
<button onclick="buttonclick(this)">Button2</button>
<p>
<button onclick="buttonclick(this)">Button3</button>
<button onclick="buttonclick(this)">Button4</button>
</div>
<div id="menu3" class="menuview">
<p>Slider1</p>
<input type="range" min="0" max="100" style="width:100%"
onchange="rangechange(this)" />
<p>Slider2</p>
<input type="range" min="10" max="20" onchange="rangechange(this)" />
</div>
<div id="menu4" class="menuview">
<p>RadioGroup(page can swipe)</p>
<label><input name="radio-group1" type="radio" value="1" checked
onclick="radioclick(this)" />Option1</label>
<p><label><input name="radio-group1" type="radio" value="2"
onclick="radioclick(this)" />Option2</label>
<p><label><input name="radio-group1" type="radio" value="3"
onclick="radioclick(this)" />Option3</label>
<p>RadioGroup2</p>
<label><input name="radio-group2" type="radio" checked="checked"
onclick="radioclick(this)" />Option1</label>
<p><label><input name="radio-group2" type="radio" onclick="radioclick(this)"
/>Option2</label>
<p><label><input name="radio-group2" type="radio" onclick="radioclick(this)"
/>Option3</label>
<p>RadioGroup3</p>
<label><input name="radio-group3" type="radio" checked="checked"
onclick="radioclick(this)" />Option1</label>
<p><label><input name="radio-group3" type="radio" onclick="radioclick(this)"
/>Option2</label>
<p><label><input name="radio-group3" type="radio" onclick="radioclick(this)"
/>Option3</label>
<p><label><input name="radio-group3" type="radio" onclick="radioclick(this)"
/>Option4</label>
<p><label><input name="radio-group3" type="radio" onclick="radioclick(this)"
/>Option5</label>
</div>
<div id="menu5" class="menuview">
<p>Input</p>
<p><label>Username: <input id="username" name="username" type="text"
placeholder="input your username" /></label>
<p>Password: <input id="password" name="password" type="password"
placeholder="input your password" />
<p align="center"><button onclick="login()">Login</button>
</div>
</td>
</tr>
</table>
</body>
</html>
