左下角环形弹出样式webkit菜单
By
admin
at 2018-02-04 • 0人收藏 • 1268人看过
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>
登录后方可回帖