Firefox os Action menus

最新推荐文章于 2025-09-13 09:38:45 发布

原创最新推荐文章于 2025-09-13 09:38:45 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

firefox os 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用Mozilla官方提供的CSS文件渲染Action Menus，并通过HTML和JavaScript实现按钮点击后的响应效果。

首先引入mozilla 官方css文件以渲染action menus --->@import url(resources/action_menu.css);我直接将其引入html文件" p# O. L; ?, j4 ~; f( S* J, A
其次是用html创建菜单
<!DOCTYPE html>
<html>
<head>
<title>Action menus</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style/action_menu.css" />
</head>
<body>
<form role="dialog" data-type="action" onsubmit="return false;" id="sample-menu">
<menu>
<button id="button1"> Action 1 </button>
<button id="button2" disabled> Action 2 (disabled) </button>
<button id="button3"> Action 3 </button>
<button id="cancel"> Cancel </button>
</menu>
</form>
</body>
<script type="text/javascript" src="js/action.js"></script>
</html>
JavaScript 创建动作控制

var btn = document.querySelector("#button1");
btn.addEventListener("click", function() {
var title = document.getElementById("sample-title");
title.innerHTML="Button 1";
});

var btn = document.querySelector("#button3");
btn.addEventListener("click", function() {
var title = document.getElementById("sample-title");
title.innerHTML="Button 3";
});
下面是效果图