Yii2:创建自定义菜单
我已经构建了一个引导菜单,现在我想用yii2nav小部件复制它。这里是初始状态:Yii2:创建自定义菜单,yii2,yii2-widget,Yii2,Yii2 Widget,我已经构建了一个引导菜单,现在我想用yii2nav小部件复制它。这里是初始状态: <nav class="navbar navbar-inverse" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="c
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">BrandLogo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" aria-expanded="true">
<ul class="nav navbar-nav">
<li>
<a href="#1" class="current">simple menu</a>
</li>
<li class="dropdown">
<a href="#4">dropdown menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="#2">Submenu#1</a>
</li>
<li>
<a href="#3">Submenu#2</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group has-feedback search">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</form>
</div>
</div>
</nav>
切换导航
-
-
-
-
下面是它的样子:
现在我想用Nav小部件做同样的菜单。代码如下:
NavBar::begin([
'brandLabel' => 'BrandLogo',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse',
],
]);
$menuItems = [
[
'label' => 'simple menu',
'url' => ['#1']
],
[
'label' => 'dropdown menu',
'url' => ['#4'],
'items' => [
[
'label' => 'Submenu#1',
'url' => ['#1'],
],
[
'label' => 'Submenu#2',
'url' => ['#2'],
],
]
],
[
'label' => '
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group has-feedback search">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</form>',
'encode' => false,
'url' => false,
],
];
if (count($menuItems)) {
echo Nav::widget([
'options' => ['class' => 'navbar-nav'],
'items' => $menuItems,
]);
}
NavBar::end();
导航栏:开始([
“brandLabel”=>“BrandLogo”,
'brandUrl'=>Yii::$app->homeUrl,
“选项”=>[
“类”=>“导航条反向”,
],
]);
$menuItems=[
[
“标签”=>“简单菜单”,
'url'=>['#1']
],
[
“标签”=>“下拉菜单”,
'url'=>['#4'],
'项目'=>[
[
“标签”=>“子菜单#1”,
'url'=>['#1'],
],
[
“标签”=>“子菜单#2”,
'url'=>['#2'],
],
]
],
[
'标签'=>'
',
'encode'=>false,
'url'=>false,
],
];
如果(计数($menuItems)){
echo导航::小部件([
'选项'=>['类别'=>'导航栏导航'],
'items'=>$menuItems,
]);
}
NavBar::end();
问题是结果并不相等。我发现了一些问题:
如何摆脱数据切换=“dropdown”
和类=“dropdown toggle”
我怎样才能去掉不必要的标签
这是因为您没有遵循实际的HTML结构,根据这一点,您需要在
ul
之后添加表单,而不是在li
中添加表单,但是该表单应该是NavBar
的一部分,并且如果您查看定义的话
包含在\yii\bootstrap\begin()
和
\yii\bootstrap\end()
导航栏。您可以使用诸如yii\bootstrap\Nav
或
\yii\widgets\Menu
来构建此类内容
因此,在调用Nav::widget()
之后和调用NavBar::end()
之前,只需将表单移到$items
之外
您可以使用linkOptions
自定义或删除类或与链接相关的任何其他属性
<?php
NavBar::begin([
'brandLabel' => 'BrandLogo',
'brandUrl' => Yii::$app->homeUrl,
'options' => [
'class' => 'navbar-inverse',
],
]);
$menuItems = [
[
'label' => 'simple menu',
'url' => ['#1']
],
[
'label' => 'dropdown menu',
'url' => ['#4'],
'linkOptions' => [
'class' => 'my-class',
'data' => [
'toggle' => ''
]
],
'items' => [
[
'label' => 'Submenu#1',
'url' => ['#1'],
],
[
'label' => 'Submenu#2',
'url' => ['#2'],
],
]
],
];
if( count($menuItems) ){
echo Nav::widget([
'options' => ['class' => 'navbar-nav'],
'items' => $menuItems,
]);
}
?>
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="form-group has-feedback search">
<input type="text" class="form-control" placeholder="Search" />
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</form>
<?php
NavBar::end();
你能添加实际工作的html
结构吗?你必须使用Yii2 NavIt创建/转换导航。第一个代码块名为“初始状态”。如果有人问我为什么要摆脱数据切换
和下拉切换
,我的第二个问题就完全解决了!非常感谢。不幸的是,我仍然在输出html中获得了下拉切换
类<代码>
。现在我可以添加我自己的类,但仍然无法删除现有的类。如果您希望从中完全删除该类,您可能需要覆盖yii\bootstrap\Nav::renderItems()
,因为该类是由小部件添加的,我已经更新了答案,请参见编辑部分@GHopper
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
namespace common\components;
use yii\bootstrap\Nav as BaseNav;
use yii\bootstrap\Html;
use yii\helpers\ArrayHelper;
use yii\base\InvalidConfigException;
class Nav extends BaseNav {
/**
* Renders a widget's item.
* @param string|array $item the item to render.
* @return string the rendering result.
* @throws InvalidConfigException
*/
public function renderItem($item) {
if( is_string($item) ){
return $item;
}
if( !isset($item['label']) ){
throw new InvalidConfigException("The 'label' option is required.");
}
$encodeLabel = isset($item['encode']) ? $item['encode'] : $this->encodeLabels;
$label = $encodeLabel ? Html::encode($item['label']) : $item['label'];
$options = ArrayHelper::getValue($item, 'options', []);
$items = ArrayHelper::getValue($item, 'items');
$url = ArrayHelper::getValue($item, 'url', '#');
$linkOptions = ArrayHelper::getValue($item, 'linkOptions', []);
if( isset($item['active']) ){
$active = ArrayHelper::remove($item, 'active', false);
} else{
$active = $this->isItemActive($item);
}
if( empty($items) ){
$items = '';
} else{
$linkOptions['data-toggle'] = 'dropdown';
Html::addCssClass($options, ['widget' => 'dropdown']);
// Html::addCssClass ( $linkOptions , [ 'widget' => 'dropdown-toggle' ] );
if( $this->dropDownCaret !== '' ){
$label .= ' ' . $this->dropDownCaret;
}
if( is_array($items) ){
$items = $this->isChildActive($items, $active);
$items = $this->renderDropdown($items, $item);
}
}
if( $active ){
Html::addCssClass($options, 'active');
}
return Html::tag('li', Html::a($label, $url, $linkOptions) . $items, $options);
}
}