Те, кто уже разрабатывал собственные интерфейсы в K2 smartforms, наверняка встречались с ситуацией, когда на форме требовалось создать несколько закладок (табов), чтобы пользователь мог свободно переключаться между ними, заполняя ту или иную информацию.
При этом, из-за особенностей предустановленной разметки страницы, в дизайнере K2 smartforms не было возможности разместить изображение заголовка над элементом табуляции стандартными средствами. То есть форма, примерно, могла выглядеть так:
Стандартная функциональность, решающая эту проблему, будет добавлена в K2 smartforms в одном из следующих релизов, пока же я покажу как решить эту проблему достаточно просто нестандартными средствами.
Прежде всего нам понадобится установить дополнительный контрол HTML Literal. Несмотря на то, что он не входит в стандартную поставку, я настоятельно рекомендую его скачать и установить, т.к. варианты его применения очень широки.
Итак добавим этот контрол на нашу форму:
и изменим его свойство HTML, добавив туда следующий текст (не забыв изменить URL изображения на собственное):
<img border=0 id='headerpic' src='http://k2.denallix.com/Designer/Runtime/Image.ashx?ImID=1' />
<script language="javascript" type="text/javascript">
$('#headerpic').insertBefore(".tabs-top");
</script>
После чего сохраним форму, удалим изображение, которое было на странице до этого, и протестируем работу обновленной формы:
Как видно из примера, теперь заголовок отображается над табуляцией.
При этом, из-за особенностей предустановленной разметки страницы, в дизайнере K2 smartforms не было возможности разместить изображение заголовка над элементом табуляции стандартными средствами. То есть форма, примерно, могла выглядеть так:
Стандартная функциональность, решающая эту проблему, будет добавлена в K2 smartforms в одном из следующих релизов, пока же я покажу как решить эту проблему достаточно просто нестандартными средствами.
Прежде всего нам понадобится установить дополнительный контрол HTML Literal. Несмотря на то, что он не входит в стандартную поставку, я настоятельно рекомендую его скачать и установить, т.к. варианты его применения очень широки.
Итак добавим этот контрол на нашу форму:
и изменим его свойство HTML, добавив туда следующий текст (не забыв изменить URL изображения на собственное):
<img border=0 id='headerpic' src='http://k2.denallix.com/Designer/Runtime/Image.ashx?ImID=1' />
<script language="javascript" type="text/javascript">
$('#headerpic').insertBefore(".tabs-top");
</script>
После чего сохраним форму, удалим изображение, которое было на странице до этого, и протестируем работу обновленной формы:
Как видно из примера, теперь заголовок отображается над табуляцией.
Комментариев нет:
Отправить комментарий