Using Twitter Bootstrap’s popups like real menu items

Twitter Bootstrap framework is fabulous and thanks to many Yii extensions supporting it (Yii-Boostrap, Yii-Booster, Yiistrap, YiiWheels and more) using it in own application is like snapping with fingers.

One of the best features of Bootstrap is a very easy way of creating menus and adding popup menus to elements (like buttons). However, in default implementation popups are oriented toward working just like a fancy links — i.e. redirecting browser to destination URL. In this article, you’ll find how force them to work as real menu items — i.e. capturing their onclick event and doing something with content.

Here is an example:

[code language=”php”]
echo($form->textFieldRow($model, ‘type’));

Yii::app()->clientScript->registerScript(‘group-popup-on-click-handler’,
‘
$(".group-popup-item").on("click", function(event)
{
$("#Lookup_type").val($(this).text());
});
‘, CClientScript::POS_READY);

$this->widget(‘bootstrap.widgets.TbButtonGroup’, array
(
‘type’=>’success’,
‘buttons’=>array
(
array(‘label’=>”, ‘items’=>array
(
array(‘label’=>’Action’, ‘url’=>’#’, ‘linkOptions’=>array(‘class’=>’group-popup-item’)),
array(‘label’=>’Another action’, ‘url’=>’#’, ‘linkOptions’=>array(‘class’=>’group-popup-item’)),
array(‘label’=>’Something else’, ‘url’=>’#’, ‘linkOptions’=>array(‘class’=>’group-popup-item’)),
array(‘label’=>’Separate link’, ‘url’=>’#’, ‘linkOptions’=>array(‘class’=>’group-popup-item’)),
)),
),
));
[/code]

Thanks to this, a button should appear next to your field. Whenever user select any item from button’s popup, its title will be copied to prepending field.

Cover field with div having pull-left class and button with another div having pull-right to have both elements in the same line.