以下示例使用 MenuBuilder 框架以 JSON 数组作为数据源定义一个文本区域的上下文菜单。有关在 XML 中指定相同菜单结构的应用程序，请参阅
示例：XML MenuBuilder 数据源
。
此应用程序由两个文件组成。
第一个文件是菜单数据源，在名为“textContextMenu.js”的文件中。
[
{label: "MenuItem A"},
{label: "MenuItem B", type: "check", toggled: "true"},
{label: "MenuItem C", enabled: "false"},
{type: "separator"},
{label: "MenuItem D", items:
[
{label: "SubMenuItem D-1"},
{label: "SubMenuItem D-2"},
{label: "SubMenuItem D-3"}
]
}
]
第二个文件是应用程序用户界面的源代码（在 application.xml 文件中指定为初始窗口的 HTML 文件）：
<html>
<head>
<title>JSON-based menu data source example</title>
<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript" src="AIRMenuBuilder.js"></script>
<style type="text/css">
#contextEnabledText
{
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 50%
}
</style>
</head>
<body>
<div id="contextEnabledText">This block of text is context menu enabled. Right click or Command-click on the text to view the context menu.</div>
<script type="text/javascript">
// Create a NativeMenu from "textContextMenu.js" and set it
// as context menu for the "contextEnabledText" DOM element:
var textMenu = air.ui.Menu.createFromJSON("textContextMenu.js");
air.ui.Menu.setAsContextMenu(textMenu, "contextEnabledText");
// Remove the default context menu from the page:
air.ui.Menu.setAsContextMenu(null);
</script>
</body>
</html>
