Question

我正在尝试使用Yii Bootstrap添加下拉登录表单，就像附加的教程一样，但我无法将HTML表单添加到TbNavbar items。我该如何适应它？

关注教程：http://mifsud.me/adding-dropdown-login-form-bootstraps-navbar/

代码：

        <?php $this->widget('bootstrap.widgets.TbNavbar',array(
                'items'=>array(
                    array(
                        'class'=>'bootstrap.widgets.TbMenu',
                        'htmlOptions'=>array('class'=>'pull-right'),
                        'items'=>array(
                            array('label'=>'Login', 'url'=>'#', 'visible'=>Yii::app()->user->isGuest, 'items'=>array(
                                'FORM HTML CODE', // here is the problem, the HTML Form is not working.
                            )),
                        ),
                   ),
            )); ?>

Answer 1

将您的按钮和表单移出TbMenu项数组并进入TbNavbar项数组。 TbNavBar允许使用html而不是TbMenu。

    <?php $this->widget('bootstrap.widgets.TbNavbar',array(
            'items'=>array(
                array(
                    'class'=>'bootstrap.widgets.TbMenu',
                    'htmlOptions'=>array('class'=>'pull-right'),
                    'items'=>array(

                    ),
               ),

              '<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;">
                          <!-- Login form here -->
                       </div>
                   </li>
               </ul>'
            ),
        )); ?>

Answer 2

此外，为了将html标记保持在最低限度，您还可以使用“模板”数组键：

<?php $this->widget('bootstrap.widgets.TbNavbar',array(
'items'=>array(
    array(
        'class'=>'bootstrap.widgets.TbMenu',
        'htmlOptions'=>array('class'=>'pull-right'),
        'items'=>array(
            array('label'=>'Login', 'url'=>'#', 'visible'=>Yii::app()->user->isGuest, 'items'=>array(
                array(
                    'label'=>'{menu}',
                    'template'=>'<form class="navbar-form pull-left" style="padding-left:15px;padding-right:15px;">
                                    <input type="text" class="span2" placeholder="Login">
                                    <input type="password" class="span2" placeholder="Password">
                                    <button type="submit" class="btn">Submit</button>
                                </form>'
                )
            )),
        ),
    ),
))); ?>

在定义的模板字符串中，您还可以使用{menu}占位符替换为您的链接。

TbNavbar下拉项目内的表格

2 个答案: