# JavaScript GTK 中的菜單和工具欄 > 原文： [http://zetcode.com/gui/javascriptgtktutorial/menustoolbars/](http://zetcode.com/gui/javascriptgtktutorial/menustoolbars/) 在 JavaScript GTK 編程教程的這一部分中，我們將使用菜單和工具欄。 菜單欄是 GUI 應用中最常見的部分之一。 它是位于各個菜單中的一組命令。 在控制臺應用中，您必須記住所有這些神秘命令，在這里，我們將大多數命令分組為邏輯部分。 這些公認的標準可進一步減少學習新應用的時間。 ## 簡單菜單 在第一個示例中，我們將創建一個帶有一個文件菜單的菜單欄。 該菜單將只有一個菜單項。 通過選擇項目，應用退出。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example shows a simple menu. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; Gdk = imports.gi.Gdk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Simple menu"); w.set_position(Gtk.WindowPosition.CENTER); w.modify_bg(Gtk.StateType.NORMAL, new Gdk.Color({red:6400, green:6400, blue:6440})); var mb = new Gtk.MenuBar(); var filemenu = new Gtk.Menu(); var filem = new Gtk.MenuItem.with_label("File"); filem.set_submenu(filemenu); var exitmu = new Gtk.MenuItem.with_label("Exit"); exitmu.signal.activate.connect(Gtk.main_quit); filemenu.append(exitmu); mb.append(filem); vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(mb, false, false, 0); w.add(vbox); w.show_all(); } } }); var window = new Example(); Gtk.main(); ``` 這是一個最小的菜單欄功能示例。 ```js var mb = new Gtk.MenuBar(); ``` `MenuBar`小部件已創建。 這是菜單的容器。 ```js var filemenu = new Gtk.Menu(); var filem = new Gtk.MenuItem.with_label("File"); filem.set_submenu(filemenu); ``` 創建頂層`MenuItem`。 ```js var exitmu = new Gtk.MenuItem.with_label("Exit"); exitmu.signal.activate.connect(Gtk.main_quit); filemenu.append(exitmu); ``` 將創建出口`MenuItem`，并將其附加到文件`MenuItem`中。 ```js mb.append(filem); ``` 頂級`MenuItem`被附加到`MenuBar`小部件。 ```js vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(mb, false, false, 0); ``` 與其他工具包不同，我們必須自己照顧菜單欄的布局管理。 我們將菜單欄放入垂直框中。  圖：簡單菜單 ## 子菜單 我們的最后一個示例演示了如何創建子菜單。 子菜單是另一個菜單中的菜單。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example shows a submenu. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; Gdk = imports.gi.Gdk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Submenu"); w.set_position(Gtk.WindowPosition.CENTER); w.modify_bg(Gtk.StateType.NORMAL, new Gdk.Color({red:6400, green:6400, blue:6440})); var mb = new Gtk.MenuBar(); var filemenu = new Gtk.Menu(); var filem = new Gtk.MenuItem.with_label("File"); filem.set_submenu(filemenu); mb.append(filem); var imenu = new Gtk.Menu(); var importm = new Gtk.MenuItem.with_label("Import"); importm.set_submenu(imenu); var inews = new Gtk.MenuItem.with_label("Import news feed..."); var ibookmarks = new Gtk.MenuItem.with_label("Import bookmarks..."); var imail = new Gtk.MenuItem.with_label("Import mail..."); imenu.append(inews); imenu.append(ibookmarks); imenu.append(imail); filemenu.append(importm); var emi = new Gtk.MenuItem.with_label("Exit"); emi.signal.activate.connect(Gtk.main_quit); filemenu.append(emi); var vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(mb, false, false, 0); w.add(vbox); w.show_all(); } } }); var window = new Example(); Gtk.main(); ``` 在此示例中，我們創建一個子菜單。 ```js var imenu = new Gtk.Menu(); ``` 子菜單是`Menu`。 ```js var importm = new Gtk.MenuItem.with_label("Import"); importm.set_submenu(imenu); ``` 它是菜單項的子菜單，它會登錄到頂級文件菜單。 ```js var inews = new Gtk.MenuItem.with_label("Import news feed..."); var ibookmarks = new Gtk.MenuItem.with_label("Import bookmarks..."); var imail = new Gtk.MenuItem.with_label("Import mail..."); imenu.append(inews); imenu.append(ibookmarks); imenu.append(imail); ``` 子菜單有其自己的菜單項。  圖：子菜單 ## 圖像菜單 在下一個示例中，我們將進一步探索菜單。 我們將圖像和加速器添加到我們的菜單項中。 加速器是用于激活菜單項的鍵盤快捷鍵。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial In this example, we explore image menu items, a separator, accelerators. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; Gdk = imports.gi.Gdk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Image menu"); w.set_position(Gtk.WindowPosition.CENTER); w.modify_bg(Gtk.StateType.NORMAL, new Gdk.Color({red:6400, green:6400, blue:6440})); var mb = new Gtk.MenuBar(); var filemenu = new Gtk.Menu(); var filem = new Gtk.MenuItem.with_label("File"); filem.set_submenu(filemenu); var agr = new Gtk.AccelGroup(); w.add_accel_group(agr); var newi = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_NEW, agr); newi.signal.activate.connect(function() {print("new")}); filemenu.append(newi); var openm = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_OPEN, agr); filemenu.append(openm); var sep = new Gtk.SeparatorMenuItem(); filemenu.append(sep); var exitmu = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_QUIT, agr); exitmu.signal.activate.connect(Gtk.main_quit); filemenu.append(exitmu); mb.append(filem); var vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(mb, false, false, 0); w.add(vbox); w.show_all(); } } }); var window = new Example(); Gtk.main(); ``` 我們的示例顯示了具有三個子菜單項的頂級菜單項。 每個菜單項都有一個圖像和一個加速器。 退出菜單項的加速器退出應用。 新菜單項的加速器將`"new"`打印到控制臺。 ```js var agr = new Gtk.AccelGroup(); w.add_accel_group(agr); ``` 要使用加速器，我們創建一個全局`AccelGroup`對象。 稍后將使用。 ```js var newi = new Gtk.ImageMenuItem.from_stock(Gtk.STOCK_NEW, agr); newi.signal.activate.connect(function() {print("new")}); filemenu.append(newi); ``` `ImageMenuItem`已創建。 圖片來自圖片庫。 自動創建 `Ctrl + N` 加速器。 我們將匿名方法插入菜單項。 它將消息打印到控制臺。 ```js var sep = new Gtk.SeparatorMenuItem(); filemenu.append(sep); ``` 這些行創建一個分隔符。 它用于將菜單項放入邏輯組。  圖：圖像 menu 菜單將我們可以在應用中使用的命令分組。 使用工具欄可以快速訪問最常用的命令。 ## 簡單的工具欄 接下來，我們創建一個簡單的工具欄。 工具欄提供對應用最常用功能的快速訪問。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial In this example, we create a simple toolbar. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(250, 200); w.set_title("Toolbar"); w.set_position(Gtk.WindowPosition.CENTER); var toolbar = new Gtk.Toolbar(); toolbar.set_style(Gtk.ToolbarStyle.ICONS); var newtb = new Gtk.ToolButton.from_stock(Gtk.STOCK_NEW); var opentb = new Gtk.ToolButton.from_stock(Gtk.STOCK_OPEN); var savetb = new Gtk.ToolButton.from_stock(Gtk.STOCK_SAVE); var sep = new Gtk.SeparatorToolItem(); var quittb = new Gtk.ToolButton.from_stock(Gtk.STOCK_QUIT); toolbar.insert(newtb, 0); toolbar.insert(opentb, 1); toolbar.insert(savetb, 2); toolbar.insert(sep, 3); toolbar.insert(quittb, 4); quittb.signal.clicked.connect(Gtk.main_quit); var vbox = new Gtk.VBox.c_new(false, 2); vbox.pack_start(toolbar, false, false, 0); w.add(vbox); w.show_all(); } } }); var window = new Example(); Gtk.main(); ``` 該示例顯示了一個工具欄和四個工具按鈕。 ```js var toolbar = new Gtk.Toolbar(); ``` `Toolbar`小部件已創建。 ```js toolbar.set_style(Gtk.ToolbarStyle.ICONS); ``` 在工具欄上，我們僅顯示圖標。 沒有文字。 ```js var newtb = new Gtk.ToolButton.from_stock(Gtk.STOCK_NEW); ``` 創建帶有庫存圖像的`ToolButton`。 該圖像來自圖像的內置庫存。 ```js var sep = new Gtk.SeparatorToolItem(); ``` 這是一個分隔符。 它可用于將工具欄按鈕放入邏輯組。 ```js toolbar.insert(newtb, 0); toolbar.insert(opentb, 1); ... ``` 工具欄按鈕插入到工具欄小部件中。 `insert()`方法的第一個參數是工具按鈕。 第二個是工具欄上的位置。  圖：工具欄 在 JavaScript GTK 教程的這一章中，我們展示了如何使用菜單和工具欄。