左下角环形弹出样式webkit菜单
By
admin
at 2018-02-04 • 0人收藏 • 1256人看过
import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程25";right=279;bottom=249;border="none";mode="popup")
mainForm.add()
/*}}*/
//导入webkit支持库
import web.kit.form;
import web.kit.layeredWindow;
//创建webkit浏览器窗口
var wbKitView = web.kit.layeredWindow(mainForm);
//使用external接口定义网页脚本可调用的本地函数
wbKitView.external = {
aardioCall = function(index){
//mainForm.msgbox(index);
select(index) {
case 0 {
mainForm.msgbox("下载!!")
}
case 1 {
mainForm.msgbox("收藏!!")
}
case 2 {
mainForm.msgbox("主页!!")
}
case 3 {
mainForm.msgbox("锁定!!")
}
else {
mainForm.msgbox(index)
}
}
};
}
import wsock.tcp.simpleHttpServer;
wbKitView.go( wsock.tcp.simpleHttpServer.startUrl("/html/bottom-left-corner.html") );
//限定最大化范围
import win.ui.minmax;
win.ui.minmax(mainForm);
mainForm.show();
win.loopMessage();这里利用了
https://github.com/caiogondim/blooming-menu.js
所述的js菜单
html代码如下:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<script src='js/blooming-menu.min.js'></script>
<style>
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
body .blooming-menu__container {
left: 50;
bottom: 0;
top: auto;
position: absolute;
}
.blooming-menu__item:nth-of-type(1) .blooming-menu__item-btn {
background-image: url(img/get-app.svg);
background-size: 35%;
}
.blooming-menu__item:nth-of-type(2) .blooming-menu__item-btn {
background-image: url(img/grade.svg);
}
.blooming-menu__item:nth-of-type(3) .blooming-menu__item-btn {
background-image: url(img/home.svg);
}
.blooming-menu__item:nth-of-type(4) .blooming-menu__item-btn {
background-image: url(img/lock.svg);
background-size: 35%;
}
.blooming-menu__item-btn:hover {
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2);
opacity: 1;
}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<script>
var bloomingMenu = new BloomingMenu({
startAngle: -90,
endAngle: 0,
radius: 100,
itemsNum: 4,
itemAnimationDelay: 0.08
})
bloomingMenu.render()
bloomingMenu.props.elements.items.forEach(function (item, index) {
item.addEventListener('click', function () {
//alert('Item #' + index + 'was clicked')
external.aardioCall(index)
})
})
</script>
</body>
</html>登录后方可回帖