0

我将实现 twitter bootstrap 的轮播，以便一次显示五个项目。我的系统使用模板引擎 smarty。

我已经熟悉 smarty 基础知识了。以下代码将显示我的所有项目：

<ul class="thumbnails">
{foreach $items as $item}
    <li class="span2">
        <div class="caption">
            <h5>{$item.title}</h5>
        </div>
        <div class="thumbnail">
            <img src="{$item.image}" alt="">
        </div>
    </li>        
{/foreach}
</ul>

不幸的是，twitter bootstrap 的轮播需要将所有项目分成块，如下所示：

<ul class="thumbnails">
    <div class="item active">
        <ul class="thumbnails">
            <li class="span2 offset1">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
        </ul>
    </div>
    <div class="item">
        <ul class="thumbnails">
            <li class="span2 offset1">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
            <li class="span2">...</li>
        </ul>
    </div>
    ...
  </ul>

我如何通过使用 smarty 的 foreach 循环来实现这一点：

  • 将 5 个项目放入一个 div.item，接下来的 5 个项目放入下一个 div.item，依此类推
  • 第一个 div.item 应该让类“活动”
  • 每个 div.item 中的第一项应该获得类 '.offset1'
4

1 回答 1

2

Smarty 定义了一些神奇的变量，让您可以查看循环执行了多少次（有关所有详细信息，请参阅文档{foreach}）。

在您的情况下，您要检查：

  • {$item@first}打开第一个活动的 div.item
  • {$item@iteration is div by 5}关闭和打开下一个 div.item，并给它的第一个 lioffset1类
  • {$item@last}关闭最后一个 div.item 是否可以被 5 整除
于 2013-03-16T17:29:38.763 回答