Question

我正在使用Yii Framework和Yii Booster扩展作为bootstrap。我正在尝试在下拉列表中创建一个登录表单。我有一个TbNavbar，下面是下拉代码，但当我在下拉列表中添加登录表单时，它只显示下拉列表中的代码。

我用这篇文章作为指南：

这是我的代码与表单，它只是不起作用：

<?php  $this->beginWidget('bootstrap.widgets.TbNavbar', array(
'type'=>'inverse',
'brand' => 'Title',  
'fixed'=>'bottom',  
'collapse'=>true,  
'items'=>array(
array(
  'class'=>'bootstrap.widgets.TbMenu',
  'type'=>'inverse',
  'items'=>array(
    array('label'=>'Home', 'url'=>'#', 'active'=>true),
    array('label'=>'Link', 'url'=>'#'),
    array('label' => 'DropDown', 'items' => array(
          array('label' => 'Item1', 'content' => 'Item1 Content'),
          array('label' => 'Item2', 'content' => 'Item2 Content')
        )),
    array('label'=>'Dropdown', 'url'=>'#', 'items'=>array(
      array('label'=>'Action', 'url'=>'#'),
      array('label'=>'Another action', 'url'=>'#'),
      array('label'=>'Something else here', 'url'=>'#'),
      '---',
      array('label'=>'NAV HEADER'),
      array('label'=>'Separated link', 'url'=>'#'),
      array('label'=>'One more separated link', 'url'=>'#'),


    )),
  ),
),


'<ul class="nav pull-right">
               <li><a href="/users/sign_up">Sign Up</a></li>
               <li class="divider-vertical"></li>
               <li class="dropdown">
                   <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                   <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
                       <?php $form = $this->beginWidget(\'bootstrap.widgets.TbActiveForm\', array(
                          \'id\'=>\'verticalForm\',
                          \'htmlOptions\'=>array(\'class\'=>\'well\'),
                      )); ?>

                      <?php echo $form->textFieldRow($model, \'textField\', array(\'class\'=>\'span3\')); ?>
                      <?php echo $form->passwordFieldRow($model, \'password\', array(\'class\'=>\'span3\')); ?>
                      <?php echo $form->checkboxRow($model, \'checkbox\'); ?>
                      <?php $this->widget(\'bootstrap.widgets.TbButton\', array(\'buttonType\'=>\'submit\', \'label\'=>\'Login\')); ?>

                      <?php $this->endWidget(); ?>
                    </div>
               </li>
           </ul>'  ),)); ?>
<?php $this->endWidget(); ?>

Answer 1

试试这样。这对我有用

        <?php
        $this->beginWidget('bootstrap.widgets.TbNavbar', array(
            'type' => 'inverse',
            'brand' => 'Title',
            'fixed' => 'bottom',
            'collapse' => true,
            'items' => array(
                array(
                    'class' => 'bootstrap.widgets.TbMenu',
                    'type' => 'inverse',
                    'items' => array(
                        array('label' => 'Home', 'url' => '#', 'active' => true),
                        array('label' => 'Link', 'url' => '#'),
                        array('label' => 'DropDown', 'items' => array(
                                array('label' => 'Item1', 'content' => 'Item1 Content'),
                                array('label' => 'Item2', 'content' => 'Item2 Content')
                        )),
                        array('label' => 'Dropdown', 'url' => '#', 'items' => array(
                                array('label' => 'Action', 'url' => '#'),
                                array('label' => 'Another action', 'url' => '#'),
                                array('label' => 'Something else here', 'url' => '#'),
                                '---',
                                array('label' => 'NAV HEADER'),
                                array('label' => 'Separated link', 'url' => '#'),
                                array('label' => 'One more separated link', 'url' => '#'),
                        )),
                    ),
                ),
                '<ul class="nav pull-right">
            <li><a href="/users/sign_up">Sign Up</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
                <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">' . html($this,$model) . '</div>
            </li>
        </ul>'),
                )
        );
        ?>
        <?php $this->endWidget(); ?>

功能定义

    <?php
    function html($obj,$model)
    {
        $html='';
        $form = $obj->beginWidget('bootstrap.widgets.TbActiveForm', array(
            'id' => 'verticalForm',
            'htmlOptions' => array('class' => 'well')
                ));
        $html.=$form->textFieldRow($model, 'textField', array('class' => 'span3'));
        $html.=$form->passwordFieldRow($model, 'password', array('class' => 'span3'));
        $html.=$form->checkboxRow($model, 'checkbox');
        $html.=CHtml::submitButton('Login',array('class'=>'btn btn-info'));    
        $obj->endWidget();

        return $html;
    }
    ?>

编辑 ::根据以下评论

您可以在内置下拉内容时停止Bootstrap Drop-down的默认传播。

        <script type="text/javascript">
            $(document).ready(function()
            {        
                $('.dropdown-menu').click(function(e)
                {            
                    e.stopPropagation();            
                }); 
            });
        </script>

Answer 2

将此代码放入主布局头部。这将加载javascript，菜单应该可以使用它。

<?php Yii::app()->bootstrap->registerAssetJs('');?>

TbNavbar下拉物品YiiBooster内的表格

2 个答案: