# JavaScript GTK 中的對話框 > 原文： [http://zetcode.com/gui/javascriptgtktutorial/dialogs/](http://zetcode.com/gui/javascriptgtktutorial/dialogs/) 在 JavaScript GTK 編程教程的這一部分中，我們將介紹對話框。 對話框窗口或對話框是大多數現代 GUI 應用必不可少的部分。 對話被定義為兩個或更多人之間的對話。 在計算機應用中，對話框是一個窗口，用于與應用“對話”。 對話框用于輸入數據，修改數據，更改應用設置等。對話框是用戶與計算機程序之間進行通信的重要手段。 ## `MessageDialog` 消息對話框是方便的對話框，可向應用的用戶提供消息。 該消息包含文本和圖像數據。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example demonstrates a Message dialog 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("Message dialog"); w.set_position(Gtk.WindowPosition.CENTER); var fixed = new Gtk.Fixed(); var infoButton = new Gtk.Button.with_label("Information"); fixed.put(infoButton, 30, 20); infoButton.signal.clicked.connect(on_info); w.add(fixed); w.show_all(); } function on_info() { var md = new Gtk.MessageDialog({modal:true, title:"Information", message_type:Gtk.MessageType.INFO, buttons:Gtk.ButtonsType.OK, text:"Download completed."}); md.run(); md.destroy(); } } }); var window = new Example(); Gtk.main(); ``` 我們在窗口上顯示一個按鈕。 當我們單擊按鈕時，會顯示一條信息消息。 ```js var infoButton = new Gtk.Button.with_label("Information"); ``` 這是一個按鈕，當我們單擊它時將顯示一個對話框。 ```js function on_info() { var md = new Gtk.MessageDialog({modal:true, title:"Information", message_type:Gtk.MessageType.INFO, buttons:Gtk.ButtonsType.OK, text:"Download completed."}); md.run(); md.destroy(); } ``` 如果單擊信息按鈕，將顯示“信息”對話框。 `Gtk.MessageType.INFO`指定對話框的類型。 `Gtk.ButtonsType.OK`指定對話框中將顯示哪些按鈕。 最后一個參數是顯示的消息。 該對話框使用`run()`方法顯示。 程序員還必須調用`destroy()`或`hide()`方法。  圖：`MessageDialog` ## `AboutDialog` `AboutDialog`顯示有關應用的信息。 它可以顯示徽標，應用名稱，版本，版權，網站或許可證信息。 也有可能對作者，文檔撰寫者，翻譯者和藝術家予以贊揚。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example demonstrates the AboutDialog dialog. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; GdkPixbuf = imports.gi.GdkPixbuf; 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("About dialog"); w.set_position(Gtk.WindowPosition.CENTER); var button = new Gtk.Button.with_label("About"); button.set_size_request(80, 30); button.signal.clicked.connect(on_clicked); var fix = new Gtk.Fixed(); fix.put(button, 20, 20); w.add(fix); w.show_all(); } function on_clicked() { var about = new Gtk.AboutDialog(); about.set_program_name("Battery"); about.set_version("0.1"); about.set_copyright("(c) Jan Bodnar"); about.set_comments("Battery is a simple tool for battery checking"); about.set_website("http://www.zetcode.com"); about.set_logo(new GdkPixbuf.Pixbuf.from_file("battery.png")); about.run(); about.destroy(); } } }); var window = new Example(); Gtk.main(); ``` 該代碼示例使用具有某些功能的`AboutDialog`。 ```js var about = new Gtk.AboutDialog(); ``` 我們創建`AboutDialog`的實例。 ```js about.set_program_name("Battery"); about.set_version("0.1"); about.set_copyright("(c) Jan Bodnar"); ``` 在這里，我們指定程序的名稱，版本和版權。 ```js about.set_logo(new GdkPixbuf.Pixbuf.from_file("battery.png")); ``` 此行創建徽標。  圖：`AboutDialog` ## `FontSelectionDialog` `FontSelectionDialog`是用于選擇字體的對話框。 它通常用于進行一些文本編輯或格式化的應用中。 ```js #!/usr/bin/seed /* ZetCode JavaScript GTK tutorial This example works with the FontSelectionDialog. author: Jan Bodnar website: www.zetcode.com last modified: July 2011 */ Gtk = imports.gi.Gtk; Pango = imports.gi.Pango; Gtk.init(null, null); Example = new GType({ parent: Gtk.Window.type, name: "Example", init: function () { init_ui(this); var label; function init_ui(w) { w.signal.hide.connect(Gtk.main_quit); w.set_default_size(350, 150); w.set_title("Font selection"); w.set_position(Gtk.WindowPosition.CENTER); w.set_border_width(10); var text = "The only victory over love is flight." label = new Gtk.Label.c_new(text); var button = new Gtk.Button.with_label("Select font"); button.signal.clicked.connect(on_clicked); var fix = new Gtk.Fixed(); fix.put(button, 100, 30); fix.put(label, 30, 90); w.add(fix); w.show_all(); } function on_clicked() { var fdia = new Gtk.FontSelectionDialog.c_new("Select font"); var response = fdia.run(); if (response == Gtk.ResponseType.OK) { var fname = fdia.get_font_name(); var font_desc = Pango.Font.description_from_string(fname); if (font_desc) label.modify_font(font_desc); } fdia.destroy(); } } }); var window = new Example(); Gtk.main(); ``` 在代碼示例中，我們有一個按鈕和一個標簽。 單擊按鈕顯示`FontSelectionDialog`。 ```js var fdia = new Gtk.FontSelectionDialog.c_new("Select font"); ``` 我們創建`FontSelectionDialog`。 ```js if (response == Gtk.ResponseType.OK) { var fname = fdia.get_font_name(); var font_desc = Pango.Font.description_from_string(fname); if (font_desc) label.modify_font(font_desc); } ``` 如果單擊“確定”按鈕，則標簽小部件的字體將更改為我們在對話框中選擇的字體。  圖：`FontSelectionDialog` 在 JavaScript GTK 教程的這一部分中，我們介紹了對話框。