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:

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')),
        )),
    ),
));

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.

Leave a Reply