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

Question

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

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

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

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

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

Answer 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