SharePoint Ribbon. Использование ColorPicker'а

SharePoint 2010/2013 Ribbon API
SharePoint Ribbon. Использование ColorPicker'а
SharePoint Ribbon. Создание многоуровневого меню

Небольшой сценарий использования ColorPicker'а, встроенного в рибон, с помощью SharePoint Ribbon API. Я опишу процесс создания веб-части, которая будет регистрировать новую вкладку на рибоне с элементами управления. Сама веб-часть будет содержать два div'а, параметры отображения которых мы и будем изменять.

SharePoint Ribbon ColorPicker

Демонстрационная веб-часть

Веб-часть содержит UserControl со следующим HTML-кодом:

  1. <!-- Первый DIV -->
  2. <div style="display:block;width:100px;height:100px; border: solid 2px red;"
  3.     id="DemoBlock1">
  4.     DemoBlock1
  5. </div>
  6. <!-- Второй DIV -->
  7. <div style="display:block;width:100px;height:100px; border: solid 2px brown;"
  8.     id="DemoBlock2">
  9.     DemoBlock2
  10. </div>

И простой клиентский код:

  1. // Раскраска первого DIV'а
  2. function ColorDiv1(properties) {
  3.     ColorDiv('DemoBlock1', properties);
  4. }
  5. // Раскраска второго DIV'а
  6. function ColorDiv2(properties) {
  7.     ColorDiv('DemoBlock2', properties);
  8. }
  9. // Раскраска DIV'а
  10. function ColorDiv(divId, properties) {
  11.     var block = document.getElementById(divId);
  12.     block.innerHTML = properties.Style;
  13.     block.style.backgroundColor = properties.Color;
  14. }

К нему мы ещё вернемся чуть позже.

Вкладка на рибоне

На рибон добавим закладку с единственной группой. Группа будет содержать два FlyoutAnchor'а. При выборе цвета будем раскрашивать div'ы в выбранный цвет и заполнять его текстом, соответствующим выбранному цвету. Вот так это выглядит в SharePoint 2010:

SharePoint Ribbon ColorPicker

Чтобы реализовать это с помощью QASPRibbon, в веб-часть добавим следующий код:

  1. var tab = new RibbonTab("ColorTab""Color my divs")
  2. {
  3.     Groups = new[]
  4.     {
  5.         new RibbonGroup("Block1""Block 1,2")
  6.         {
  7.             Template = RibbonGroupTemplate.OneRow,
  8.             Controls = new RibbonControl[]
  9.             {
  10.                 // Раскрашиваем первый DIV
  11.                 new RibbonFlyoutAnchor("b1""Block 1")
  12.                 {
  13.                     Image = new RibbonImageDefinition
  14.                     {
  15.                         Url32 = "/_layouts/images/menueditpictures.gif"
  16.                     },
  17.                     Sections = new[]
  18.                     {
  19.                         new RibbonMenuSection("s1""Colors")
  20.                         {
  21.                             DisplayMode = RibbonMenuDisplayMode.Menu,
  22.                             Controls = new[]
  23.                             {
  24.                                 new RibbonColorPicker("picker")
  25.                                 {
  26.                                     Colors = RibbonColorPicker.StandardColors,
  27.                                     OnClientClick = "ColorDiv1(properties);"
  28.                                 }
  29.                             }
  30.                         }
  31.                     }
  32.                 },
  33.                 // Раскрашиваем второй DIV
  34.                 new RibbonFlyoutAnchor("b2""Block 2")
  35.                 {
  36.                     Image = new RibbonImageDefinition
  37.                     {
  38.                         Url32 = "/_layouts/images/menueditpictures.gif"
  39.                     },
  40.                     Sections = new[]
  41.                     {
  42.                         new RibbonMenuSection("s1""Colors")
  43.                         {
  44.                             DisplayMode = RibbonMenuDisplayMode.Menu,
  45.                             Controls = new[]
  46.                             {
  47.                                 new RibbonColorPicker("picker")
  48.                                 {
  49.                                     Colors = RibbonColorPicker.StandardColors,
  50.                                     OnClientClick = "ColorDiv2(properties);"
  51.                                 }
  52.                             }
  53.                         }
  54.                     }
  55.                 }
  56.             }
  57.         }
  58.     }
  59. };

Код, я думаю, понятен интуитивно. Мы создаем новую вкладку (RibbonTab), содержащую одну единственную группу (RibbonGroup). Группа содержит два FlyoutAnchor-элемента для выбора цвета и стиля. Для инициализации рибон-элементов использованы конструкторы, принимающий Id элемента и его Title.

Регистрация новой закладки на рибоне происходит с помощью класса QASPRibbon.RibbonManager:

  1. RibbonManager.Current.AddTabToPage(tab, Page);

ColorPicker содержит стандартный набор цветов. В свойстве OnClientClick мы указываем клиентский код, который будет исполнен при выборе пользователем какого-либо цвета. Сам метод просто раскрашивает первый или второй DIV в соответствии с выбранным элементом в ColorPicker'е.

С помощью QASPRibbon можно реализовывать решения с использованием ColorPicker'а. Например, крайне удобно раскрашивать задачи или другие элементы списка (задание свойств элемента списка/библиотеки, используя клиентскую модель + условное форматирования представление списка).


Поделиться

Коментарии