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

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

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>


登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...