[ELMA3] Всплывающие подсказки
Для создания подсказок используется: http://craigsworks.com/projects/qtip/. Всплывающая подсказка состоит из 2-х частей: заголовок и текст. Для того чтобы подсказка сформировалась достаточно задать только текст. Есть несколько способов навешивания всплывающий подсказки на HTML элемент.
Меню
Добавлены 2 свойства для у ActionToolbarItem: ToolTipHeader и ToolTip. Задать их можно как напрямую, так и с помощью билдера.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | @(Html.Toolbar().Group().ToolbarButton(new ActionToolbarItem(Html.GenerateName()){Text = SR.T("Отправить"),IconUrl = "#x24/run_doc.gif",ToolTipHeader = SR.T("Отправка"),ToolTip = SR.T("Работа с документами"),Items ={new ActionToolbarItem(Html.GenerateName()){Text = SR.T("Отправить на согласование"),ToolTip = SR.T("Отправить на согласование. Исполнители должны высказать свое согласие или несогласие с содержанием документа") },new ActionToolbarItem(Html.GenerateName()){Text = SR.T("Отправить на ознакомление"),ToolTip = SR.T("Отправить на ознакомление. Исполнители должны подтвердить прочтение документа") }} })) |
1 2 3 4 5 6 7 8 9 10 11 12 | @(Html.Toolbar().Group().Buttons(b =>{b.ContentAction(ContentActionProvider.CreateDocument).ToolTipHeader(SR.T("Создание нового документа")).ToolTip(SR.T("Создает документ в текущей папке"));b.ContentAction(ContentActionProvider.CreateFolder).ToolTipHeader(SR.T("Создание папки")).ToolTip(SR.T("Создает новую папку в текущей")).IconUrl(Url.Image("#x24/folders.gif")).Text(SR.T("Папка")).Buttons(bi => bi.ContentAction(ContentActionProvider.CreateFolder));})) |
HTML атрибуты
Для формирования подсказки используется 2 атрибута: tooltipheader - заголовок и tooltiptext - текст подсказки. Для примера:
1 2 3 4 5 6 7 8 | @Html.ImageButton("#x16/place_add.gif", "", Html.OpenPopup("AddNomenclaturePopup").ToString(), anchorHtmlAttributes: new { @class = "tree-item-button", tooltipheader = SR.T("Добавить место регистрации"), tooltiptext = SR.T("Создать новое место регистрации или выбрать существующее") })@Html.ImageButton("#x16/nomen_add.gif", "", string.Format("OpenDepositoryGroupPopup(0, {0});", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltipheader = SR.T("Добавить раздел в номенклатуру"), tooltiptext = SR.T("Перейти к созданию нового раздела в номенклатуре") })@Html.ImageButton("#x16/delo_add.gif", "", string.Format("OpenDepositoryPopup(0, {0});", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltipheader = SR.T("Добавить дело в номенклатуру"), tooltiptext = SR.T("Перейти к созданию нового дела в номенклатуре") })@Html.ImageButton("#x16/delo_add_link.gif", "", string.Format("OpenDepositoryLinkPopup(0, {0});", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltipheader = SR.T("Добавить ссылку на дело"), tooltiptext = SR.T("Перейти к созданию ссылку на выбранное дело") })@if (item.TypeUid != InterfaceActivator.UID(typeof(IRegistrationPlaceItem))) {@Html.ImageButton("#x16/edit.gif", "", string.Format("EditObject({0})", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltiptext = SR.T("Изменить") })@Html.ImageButton("#x16/delete.gif", "", string.Format("DeleteRepositoryGroup({0})", (object)item.Value), anchorHtmlAttributes: new { @class = "tree-item-button", tooltiptext = SR.T("Удалить") })} |
Скриптом
Для формирования скрипта сделан билдер Html.Tooltip("selector"). В качестве селектора используется jquery-селектор. У билдера 2 метода Header("text") и Text("text"), для задания заголовка и текста всплывающей подсказки.
1 2 3 | $(document).ready(function() {@(Html.Tooltip("#elementid").Header(SR.T("Заголовок")).Text(SR.T("Текст всплывающей подсказки")).Script())}); |