如何在 yii 中的两个小部件之间切换

【问题标题】：How to toggle between two widgets in yii如何在 yii 中的两个小部件之间切换
【发布时间】：2013-09-27 11:44:35
【问题描述】：

我在一个视图中有两个小部件，其中一个是 yii CGridView 小部件，另一个是日历小部件

基本上，日历和网格都执行相同的任务来显示事件，但样式不同。

我需要在顶部放置一个按钮，然后单击该按钮，我的小部件将切换

假设当前正在显示gridview，如果我单击按钮，则将显示日历视图，反之亦然

请帮助我如何在不使用 jquery 的情况下完成此操作。

【问题讨论】：

标签： yii cgridview

【解决方案1】：

您可以这样做：

<span id="grid">Grid</span><span id="calendar" style="display:none;">Calendar</span>

<button id="tglBtn">Toggle</button>

<script type="text/javascript">
var btn = document.getElementById('tglBtn');
var grid = document.getElementById('grid');
var calendar = document.getElementById('calendar');

btn.addEventListener('click', toggle);
function toggle() {
    grid.style.display = (grid.style.display == 'none') ? 'block' : 'none';
    calendar.style.display = (calendar.style.display == 'none') ? 'block' : 'none';
}</script>

您所做的基本上是，使用 css 隐藏其中一个小部件，然后将单击事件侦听器附加到处理切换的切换按钮。

希望对你有所帮助：D

【讨论】：