SharePoint Ribbon. Использование ColorPicker'а
SharePoint 2010/2013 Ribbon API
SharePoint Ribbon. Использование ColorPicker'а
SharePoint Ribbon. Создание многоуровневого меню
Небольшой сценарий использования ColorPicker'а, встроенного в рибон, с помощью SharePoint Ribbon API. Я опишу процесс создания веб-части, которая будет регистрировать новую вкладку на рибоне с элементами управления. Сама веб-часть будет содержать два div'а, параметры отображения которых мы и будем изменять.
Демонстрационная веб-часть
Веб-часть содержит UserControl со следующим HTML-кодом:
- <!-- Первый DIV -->
- <div style="display:block;width:100px;height:100px; border: solid 2px red;"
- id="DemoBlock1">
- DemoBlock1
- </div>
- <!-- Второй DIV -->
- <div style="display:block;width:100px;height:100px; border: solid 2px brown;"
- id="DemoBlock2">
- DemoBlock2
- </div>
И простой клиентский код:
- // Раскраска первого DIV'а
- function ColorDiv1(properties) {
- ColorDiv('DemoBlock1', properties);
- }
- // Раскраска второго DIV'а
- function ColorDiv2(properties) {
- ColorDiv('DemoBlock2', properties);
- }
- // Раскраска DIV'а
- function ColorDiv(divId, properties) {
- var block = document.getElementById(divId);
- block.innerHTML = properties.Style;
- block.style.backgroundColor = properties.Color;
- }
К нему мы ещё вернемся чуть позже.
Вкладка на рибоне
На рибон добавим закладку с единственной группой. Группа будет содержать два FlyoutAnchor'а. При выборе цвета будем раскрашивать div'ы в выбранный цвет и заполнять его текстом, соответствующим выбранному цвету. Вот так это выглядит в SharePoint 2010:
Чтобы реализовать это с помощью QASPRibbon, в веб-часть добавим следующий код:
- var tab = new RibbonTab("ColorTab", "Color my divs")
- {
- Groups = new[]
- {
- new RibbonGroup("Block1", "Block 1,2")
- {
- Template = RibbonGroupTemplate.OneRow,
- Controls = new RibbonControl[]
- {
- // Раскрашиваем первый DIV
- new RibbonFlyoutAnchor("b1", "Block 1")
- {
- Image = new RibbonImageDefinition
- {
- Url32 = "/_layouts/images/menueditpictures.gif"
- },
- Sections = new[]
- {
- new RibbonMenuSection("s1", "Colors")
- {
- DisplayMode = RibbonMenuDisplayMode.Menu,
- Controls = new[]
- {
- new RibbonColorPicker("picker")
- {
- Colors = RibbonColorPicker.StandardColors,
- OnClientClick = "ColorDiv1(properties);"
- }
- }
- }
- }
- },
- // Раскрашиваем второй DIV
- new RibbonFlyoutAnchor("b2", "Block 2")
- {
- Image = new RibbonImageDefinition
- {
- Url32 = "/_layouts/images/menueditpictures.gif"
- },
- Sections = new[]
- {
- new RibbonMenuSection("s1", "Colors")
- {
- DisplayMode = RibbonMenuDisplayMode.Menu,
- Controls = new[]
- {
- new RibbonColorPicker("picker")
- {
- Colors = RibbonColorPicker.StandardColors,
- OnClientClick = "ColorDiv2(properties);"
- }
- }
- }
- }
- }
- }
- }
- }
- };
Код, я думаю, понятен интуитивно. Мы создаем новую вкладку (RibbonTab), содержащую одну единственную группу (RibbonGroup). Группа содержит два FlyoutAnchor-элемента для выбора цвета и стиля. Для инициализации рибон-элементов использованы конструкторы, принимающий Id элемента и его Title.
Регистрация новой закладки на рибоне происходит с помощью класса QASPRibbon.RibbonManager:
- RibbonManager.Current.AddTabToPage(tab, Page);
ColorPicker содержит стандартный набор цветов. В свойстве OnClientClick мы указываем клиентский код, который будет исполнен при выборе пользователем какого-либо цвета. Сам метод просто раскрашивает первый или второй DIV в соответствии с выбранным элементом в ColorPicker'е.
С помощью QASPRibbon можно реализовывать решения с использованием ColorPicker'а. Например, крайне удобно раскрашивать задачи или другие элементы списка (задание свойств элемента списка/библиотеки, используя клиентскую модель + условное форматирования представление списка).
