左下角环形弹出样式webkit菜单

By admin at 2018-02-04 • 0人收藏 • 501人看过

blob.png

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>


登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...