私は Yii を初めて使用し、Yii と CMenu に関するドキュメントを探していました。私は Phalcon や同様のオプションを持つ他のさまざまなフレームワークを使用してきましたが、Yii のメニュー エンジンは初めてです。
次のように、それぞれにサブメニュー項目がある2つのドロップダウンメニューボタンを持つボタンメニューを作成しようとしています: ドロップダウンボタングループ
しかし、Yii CMenu エンジンによってレンダリングされているのは、互いにオーバーレイされた 2 つのドロップダウン メニューであり、両方とも同じボタンによってトリガーされています。このように: ここに画像の説明を入力してください
レンダリングされたコードを見ると、2 つのドロップダウン メニューが CMenu (またはブートストラップが有効になっているライブラリ) によって「ドロップダウン メニュー」クラスに割り当てられているように見えます。クラスが割り当てられている場合、両方のドロップダウンを同時に開いています。
だから私の質問は簡単です.CMenuメニュー配列を使用して、同じ中に2つのドロップダウンを持つことさえ可能です. メニュー項目のプロパティに追加できるメニュー「項目オプション」または「HTML オプション」はありますか?これらすべてが 2 つの異なる css タグを参照します。私は何かが欠けていることを知っています。
メニューがビューでどのように構築されているかを次に示します。
$this->menu = array_merge($this->menu, array(
array(
'label' => '<span class="hidden-xs hidden-sm">' . Yii::t('app', 'Export') . '</span>',
'encodeLabel' => false,
'htmlOptions' => array('id' => 'export-or-email-btn', 'class' => 'navbar-btn btn-sm',),
'items' => array(
array(
'label' => Yii::t('app', 'Export'),
'icon' => 'fa fa-file-excel-o',
'visible' => true,
'itemOptions' => array('class' => 'work-order-export-btn'),
),
array(
'label' => Yii::t('app', 'Email Export'),
'icon' => 'fa fa-envelope-o',
'visible' => true,
'itemOptions' => array('id' => $model->getClassName(), 'class' => 'email-export-btn', 'data-grid-id' => 'work-order-grid'),
),
array(
'label' => Yii::t('app', 'Export as Import Template'),
'icon' => 'fa fa-file-excel-o fa-lg',
'visible' => true,
'itemOptions' => array('class' => 'work-order-export-import-btn'),
),),),);
$this->menu = array_merge($this->menu, array(
array(
'label' => '<span class="hidden-xs hidden-sm">' . Yii::t('app', 'Actions') . '</span>',
'encodeLabel' => false,
'htmlOptions' => array(
'id' => 'work-order-actions-btn work-order-actions',
'class' => 'navbar-btn btn-sm',
'style' => 'margin: 0 0 0 15px;',
),
'items' => array(
array(
'icon' => 'fa fa-print fa-lg',
'label' => Yii::t('app', 'Print to PDF'),
'visible' => true,
'itemOptions' => array(
'class' => 'work-order-print-pdf',
),),
array(
'icon' => 'fa fa-print fa-lg',
'label' => Yii::t('app', 'Print'),
'visible' => true,
'itemOptions' => array(
'class' => 'work-order-print-selected',
),),))));
レンダリングされたコード スニペットは次のとおりです。
<div class="btn-toolbar">
<div class="operations btn-group-sm btn-group open">
<button id="export-or-email-btn" class="navbar-btn btn-sm btn btn-primary dropdown-toggle" data-toggle="dropdown" name="yt7" type="button">
<span class="hidden-xs hidden-sm">Export</span>
<span class="caret"></span>
</button>
<ul id="yw6" class="dropdown-menu">
<li class="work-order-export-btn nav-header" data-ol-has-click-handler="">
<a href="#"><i class="fa fa-file-excel-o"></i> Export</a>
</li>
<li id="WorkOrder" class="email-export-btn nav-header" data-grid-id="work-order-grid" data-ol-has-click-handler="">
<a href="#"><i class="fa fa-envelope-o"></i> Email Export</a>
</li>
<li class="work-order-export-import-btn nav-header" data-ol-has-click-handler="">
<a href="#"><i class="fa fa-file-excel-o fa-lg"></i> Export as Import Template</a>
</li>
</ul>
<button id="work-order-actions-btn work-order-actions" class="navbar-btn btn-sm btn btn-primary dropdown-toggle" style="margin: 0 0 0 15px;" data-toggle="dropdown" name="yt8" type="button">
<span class="hidden-xs hidden-sm">Actions</span>
<span class="caret"></span>
</button>
<ul id="yw7" class="dropdown-menu">
<li class="work-order-print-pdf nav-header">
<a href="#"><i class="fa fa-print fa-lg"></i> Print PDF</a>
</li>
<li class="work-order-print-selected nav-header">
<a href="#"><i class="fa fa-print fa-lg"></i> Print Selected</a>
</li>
</ul>
</div>
</div>