Программное изменение цвета фона заголовка веб части

Недавно я столкнулся со следующей проблемой: на одном из наших проектов было требование: заголовок одной из кастомных веб частей должен был иметь определенный цвет (оранжевый), который отличается от стандартного цвета других веб частей. Т.е. только одна эта веб часть должна была иметь этот цвет заголовка. Все остальные веб части должны были отображаться без изменений со стандартным цветом. Во время исследования я обнаружил, что в сети не так много решений указанной задачи, которые бы подходили под все наши требования. Относительно просто изменить цвет заголовков всех веб частей на сайте: для этого необходимо поработать со стандратным стилем “ms-WPHeader” так, как описано здесь. Но не так просто применить изменения для одной определенной веб части. Например, решение описанное здесь, предполагает что вы должны создать кастомный класс для зон веб частей – наследник WebPartZone (из ASP.Net, не из Sharepoint, т.к. класс WebPartZone из Sharepoint является изолированным), а также кастомный тип хрома (chrome type). Это интересное решение, но с ним вам придется использовать кастомные классы повсюду, где вы хотите иметь возможность изменять цвет заголовка. Также оно предполагает, что так как все веб части из одной зоны имеют одинаковый хром, все они будут иметь одинаковый цвет заголовка (что конечно уже прогресс по сравнению со случаем одинакового цвета для всех веб частей, но по-прежнему не идеально).

Еще одно решение показывает как использовать Content editor веб часть для того, чтобы добавить css стиль, который позволил бы уникально идентифицировать заголовок определенной веб части на DOM уровне (благодаря использованию идентификатора “MSOZoneCell_WebPartWPQ2” в стиле).

В идеале я бы хотел иметь контроль над видом заголовка веб части внутри самой веб части. И конечно, чтобы изменения, сделанные для этой одной веб части, не влияли бы на другие веб части.

Я попробовал несколько способов получить желаемый результат (как серверные так и клиентские с помощью javascript). Например, я пробовал использовать Control Adapter для класса WebPartZone. С помощью этого метода вы можете переопределить метод Render()  и добавить дополнительные стили в заголовок (с технической точки зрения заголовок веб части – это элемент <tr> как будет показано ниже). Это решение работает, но требует модификации .browser файлов и сложных манипуляций с регулярными выражениями. Также переопределение метода Render(), при котором вы рендерите контрол сначала в строку, а затем что-нибудь заменяете в этой строке, может негативно сказаться на производительности.

После экспериментов с решениями на клиентской стороне (с помощью jQuery), я решил объединить серверное решение с клиентским.

Прежде всего нам потребуется ссылка на библиотеку jQuery на нашей master странице:

<SharePoint:ScriptLink ID="ScriptLink4" language="javascript" name="/_layouts/Fiskars/scripts/jquery-1.4.4.min.js" OnDemand="False" LoadAfterUI="False" Localizable="False" runat="server"/>

Затем необходимо добавить следующий javascript код также на master страницу:

<script type="text/javascript">
    function changeTitleColor(id) {
        jQuery('#' + id).parentsUntil("td[id^='MSOZoneCell_']").find('tr.ms-WPHeader').css('background-color', 'Orange');
    }
</script>

Для того, чтобы понять, что он делает, давайте рассмотрим что представляет из себя веб часть в объектной модели документа (DOM):

image_thumb3

Веб части рендерится как таблица (класс s4-wpTopTable) с двумя строками: первая для заголовка и вторая для содержимого веб части. Проблема в том, что находясь внутри веб части, мы можем контролировать только ту часть, которая рендерится во второй строке (т.е. только содержимое – см. рисунок). Остальные части (типа заголовка и бордера) – контролируются хромом веб части, который извлекается из зоны веб части (WebPartZone). Хорошая новость в том, что внутри веб части мы имеем доступ к ее ClientID, который можно использовать для доступа к упомянутым компонентам с помощью jQuery (на рисунке это “ctl00_m_g_72570dc0_fe27_43ca_82b9_8f324b8370eb”). Теперь давайте вернемся к функции changeTitleColor() и посмотрим, что он делает. Прежде всего он проходит по элементам объектной модели до ближайшего родительского элемента с идентификатором, начинающимся со строки “MSOZoneCell_”:

.parentsUntil("td[id^='MSOZoneCell_']")

Как показано на рисунке он останавливается на следующем элементе:

<table class="s4-wpTopTable" border="0" cellpadding="0" cellspacing="0" width="100%">

(функция parentUntil() не включает сам элемент, который удовлетворяет условию). Оставшаяся часть работы простая: мы находим потомок <tr> со стилем “ms-WPHeader” и меняем “background-color” свойство на оранжевый:

.find('tr.ms-WPHeader').css('background-color', 'Orange');

Последнее, что осталось – это вызвать нашу javascript функцию с идентификатором веб части:

protected override void CreateChildControls()
{
    ...
    this.Controls.Add(new LiteralControl(string.Format("<script type=\"text/javascript\">changeTitleColor('{0}');</script>", this.ClientID)));
    ...
}

Это все: после этих шагов у вас появится возможность определять цвет фона заголовка веб части в коде самой веб части.

Реклама

Об авторе sadomovalex

Старший инженер, team lead, консультант. Работаю в стеке .Net. Последние несколько лет занимаюсь разработкой enterprise приложений под Sharepoint, чему и будет в основном посвящена тематика этого блога. Также активно использую и интересуюсь ASP.Net MVC, DDD, TDD, Agile. Активно участвую в жизни многих профессиональных сообществ, SPb .Net UG, SPb ALT.Net, rsdn, Finland SP UG и др.
Запись опубликована в рубрике Sharepoint, UI. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s