Toolbar

Панель инструментов – это еще один хорошо знакомый элемент управления, который упрощает доступ пользователя к наиболее часто используемым командам. Проще говоря, диджит Toolbar (панель инструментов) представляет собой всего лишь место для размещения коллекции диджитов Button, которые при соответствующей стилизации могут
иметь весьма привлекательный внешний вид. В состав библиотеки Dijit входят различные предопределенные темы, содержащие классы для многих распространенных операций, таких как вырезать/вставить, жирный/курсив и прочих, которые можно указывать в качестве значения атрибута iconClass диджитов Button.

Следующий листинг демонстрирует, как поместить диджит Toolbar в страницу, и затем последовательно присоединяет к каждой кнопке свой обработчик события.
<html>
<head>
<title>Fun with Toolbar!</title>
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />
<script
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
djConfig="parseOnLoad:true,isDebug:true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.Toolbar");
dojo.require("dijit.form.Button");
dojo.addOnLoad(function() {
var bold = function() {console.log("bold");}
var italic= function() {console.log("italic");}
var underline = function() {console.log("underline");}
var superscript = function() {console.log("superscript");}
var subscript = function() {console.log("subscript");}
dojo.query(".dijitEditorIcon").forEach(function(x) {
if (dojo.hasClass(x, "dijitEditorIconBold"))
dojo.connect(x.parentNode, "onclick", bold);
else if (dojo.hasClass(x, "dijitEditorIconItalic"))
dojo.connect(x.parentNode, "onclick", italic);
else if (dojo.hasClass(x, "dijitEditorIconUnderline"))
dojo.connect(x.parentNode, "onclick", underline);
else if (dojo.hasClass(x, "dijitEditorIconSubscript"))
dojo.connect(x.parentNode, "onclick", superscript);
else if (dojo.hasClass(x, "dijitEditorIconSuperscript"))
dojo.connect(x.parentNode, "onclick", subscript);
});
});
</script>
</head>
(body style="padding:100px" class="tundra")
<div dojoType="dijit.Toolbar" style="width:175px">
(button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconBold" )(/button)
(button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconItalic" )(/button)
(button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconUnderline" )(/button)
<span dojoType="dijit.ToolbarSeparator"></span>
(button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconSubscript")(/button)
(button dojoType="dijit.form.Button"
iconClass="dijitEditorIcon dijitEditorIconSuperscript")(/button)
</div>
(/body)
</html>


Интересно отметить, что в настоящее время библиотека Dijit определяет ряд наглядных ярлыков для редактора Editor (определения находятся в таблицах стилей темы), которые могут содержаться в диджите Toolbar.

Диджит Toolbar имеет простой прикладной программный интерфейс, который можно считать типичным для любого потомка класса _Container.
Теги:
Виджеты приложения
Добавлено: 25 Июля 2018 07:28:08 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...