Один из компонентов Bootstrap — popover — создаёт оформление и показывает текст подсказки при нажатии на контейнер. Рассмотрим более сложный кейс использования этого компонента, а именно, создание контента для popover на лету.
Стандартный шаблон использования:
|
1 |
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> |
Как видим data-content содержит текст, который будет показан при клике на контейнер. Если требуется произвести вычисления для рендеринга контента, то можно использовать ручную инициализацию компонента следующего вида:
|
1 2 3 4 5 6 7 8 9 |
(function ($) { $("[data-toggle=popover]").popover({ html : true, content: function() { var content = " ........ "; return content; }, }); })(jQuery); |
Так как контент вычисляется внутри функции, то атрибут data-content нужно опустить. Далее рассмотрим более конкретный пример использования данного подхода.
Дополнительно зададим собственный атрибут (т.е. не используемый bootstratp) data-popover-content куда будем задавать id контейнера, содержащего html текст подсказки.
|
1 |
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" data-popover-content="#conten-container-id">Click to toggle popover</button> |
Тогда инициализация контейнера пример вид:
|
1 2 3 4 5 6 7 8 9 |
(function ($) { $("[data-toggle=popover]").popover({ html : true, content: function() { var content = $(this).attr("data-popover-content"); return $(content).html(); }, }); })(jQuery); |
