bootstrap-ext

create customize dropdown in tabnav bootstrap ext by criss83
3 followers

create customize dropdown in tabnav bootstrap ext by criss83

Requirements

Bootstrap

Usage

  1. downloald and install bootsrap extension by chris83
  2. download and extract file bootstrap-ext to extension path
  3. create tabnav in your layout
//layouts/main.php
 
Yii::setPathOfAlias('_partials', dirname(__FILE__).DIRECTORY_SEPARATOR.'..'.DIRECTORY_SEPARATOR.'_partials');
 
$this->widget('bootstrap.widgets.TbNavbar',array(
        'brand'=>'<small><i class="icon-leaf"></i>Admin</small>',
        'htmlOptions'=>array('class'=>'navbar-inverse'),
        'fluid'=>true,
        'items'=>array(
                array(
                        'class'=>'ext.bootstrap-ext.widgets.TbMenuExt',
                        'htmlOptions'=>array('class'=>'pull-right'),
                        'items'=>array(
                                array(
                                        'icon'=>'icon-tasks',
                                        'label'=>'<span class="badge badge-grey">4</span>',
                                        'url'=>'javascript:void(0)',
                                        'linkOptions'=>array('class'=>'dropdown-toggle','data-toggle'=>'dropdown'),
                                        'itemOptions'=>array('class'=>'grey'),
                                        'class'=>'ext.bootstrap-ext.widgets.TbDropdownExt',
                                        'view'=>'_partials._usermenu_loginform',
                                        'submenuOptions'=>array('class' => 'fixed-panel pull-right dropdown-navbar dropdown-caret dropdown-closer'),
                                ),
                        ),
                ));

simple fixed login panel bootstrap dropdown examample : placed in /themes/yourtheme/views/_partials called by : _partials._usermenu_loginform

or

/protected/views/_partials called by : ext.views._partials._usermenu_loginform

//_usermenu_loginform.php
<li class="login">
    <form>
        <input type="text" name="username" placeholder="Username" value=""/>
        <input type="text" name="password" placeholder="Password" value=""/>
        <button class="login">Login</button>
    </form>
</li>
 
<?php
$cs = Yii::app()->clientScript;
$cs->registerScript('fixed_dropdown','
    jQuery("ul.fixed-panel.dropdown-menu").click(function(){
            return false;
    });
 
    jQuery("ul.dropdown-menu li button.login").click(function(){
 
        //handler your form here
 
        jQuery("li.open").removeClass("open");
    });
',CClientScript::POS_READY);
?>

Total 6 comments

#14417 report it
Sheillendra at 2013/08/09 09:03pm
form handler

use submit ajax and reload page if login success

change your form :

'controlOptions' => array('after' => TbHtml::submitButton('Sign in',array('onclick'=>'return false'))),

change jQuery Script :

$cs = Yii::app()->clientScript;
$cs->registerScript('fixed_dropdown','
    jQuery("ul.fixed-panel.dropdown-menu").click(function(){
            return false;
    });
 
    jQuery("ul.dropdown-menu li button.login").click(function(){
 
        jQuery.ajax({
                url : '', //url controller handling ajax
                data : , //bind data from form
                success : function(res){
                        if(typeof data.loged != 'undefined' && data.loged == true){
                window.location= window.returnUrl;
            }
                }
        });
 
        jQuery("li.open").removeClass("open");
    });
',CClientScript::POS_READY);
#14415 report it
Alegbe Bamidele at 2013/08/09 08:07am
please help with the form handler

please help with the form handler

<?php echo TbHtml::beginFormTb(TbHtml::FORM_LAYOUT_HORIZONTAL,'/user/user/auth'); ?>
<?php echo TbHtml::emailFieldControlGroup('email', '',
array('label' => 'Email', 'placeholder' => 'Email')); ?>
<?php echo TbHtml::passwordFieldControlGroup('password', '',
array('label' => 'Password', 'placeholder' => 'Password')); ?>
<?php echo TbHtml::checkBoxControlGroup('rememberMe', false, array(
'label' => 'Remember me',
'controlOptions' => array('after' => TbHtml::submitButton('Sign in',array('onclick'=>'btn.submit()'))),
)); ?>
<?php echo TbHtml::endForm(); ?>
<?php $cs = Yii::app()->clientScript; $cs->registerScript('fixed_dropdown',' jQuery("ul.fixed-panel.dropdown-menu").click(function(){ return false; }); jQuery("ul.dropdown-menu li button.login").click(function(){ //handler jQuery("class-group controls btn").click(function(){submit();}); jQuery("li.open").removeClass("open"); }); ',CClientScript::POS_READY); ?>
#14032 report it
Sheillendra at 2013/07/12 12:58pm
Fixed Dropdown

this simple login form fixed dropdown bootstrap

<li class="login">
    <form>
        <input type="text" name="username" placeholder="Username" value=""/>
        <input type="text" name="password" placeholder="Password" value=""/>
        <button class="login">Login</button>
    </form>
</li>
 
<?php
$cs = Yii::app()->clientScript;
$cs->registerScript('fixed_dropdown','
    jQuery("ul.fixed-panel.dropdown-menu").click(function(){
            return false;
    });
 
    jQuery("ul.dropdown-menu li button.login").click(function(){
 
        //handler your form here
 
        jQuery("li.open").removeClass("open");
    });
',CClientScript::POS_READY);
?>

add "fixed-panel" to class name of panel in TabNav widget :

'class'=>'ext.bootstrap-ext.widgets.TbDropdownExt',
'view'=>'_partials._usermenu_loginform',
'submenuOptions'=>array('class' => 'fixed-panel pull-right dropdown-navbar'),
#14002 report it
Trần Minh Quang at 2013/07/11 07:41am
Example: _usermenu_task.php: Login form

But when click into textfield on dropdown: Dropdown is hide.

Do you have any solution for this problem?

#13994 report it
Sheillendra at 2013/07/11 03:24am
TbDropdownExt can't find the view "find_partials._usermenu_task".
$themeBaseUrl = Yii::app()->theme->getBaseUrl();
Yii::setPathOfAlias('_partials', dirname(__FILE__).DIRECTORY_SEPARATOR.'..'.DIRECTORY_SEPARATOR.'_partials');

above code for used of themes, if not used of themes, change this code to call

'view'=>'_partials._usermenu_task',

with

'view'=>'ext.views._partials._usermenu_task',

in views folder you must create _partials folder and place _usermenu_task.php there

example _usermenu_task.php :

echo '<li>';
  //your login form or other list
echo '</li>'
#13982 report it
Trần Minh Quang at 2013/07/10 02:08pm
TbDropdownExt can't find the view "find_partials._usermenu_task".

Can you give me a example code please? Thank you!

Leave a comment

Please to leave your comment.

Create extension