如何使用TAL创建斑马纹CSS?

马丁·彼得斯(Martijn Pieters)

如何使用Chameleon或Zope页面模板轻松创建CSS斑马条纹?我想向表的每一行添加oddeven类,但是即使使用条件表达式也要使用带有repeat/name/oddrepeat/name/even看起来比较冗长的条件:

<table>
   <tr tal:repeat="row rows" 
       tal:attributes="class python:repeat['row'].odd and 'odd' or 'even'">
       <td tal:repeat="col row" tal:content="col">column text text</td>
   </tr>
</table>

如果您要计算多个类,这将特别繁琐。

马丁·彼得斯(Martijn Pieters)

repeat变量的Zope页面模板实现具有一个文档不足的额外参数,parity它为您提供字符串'odd''even'在迭代之间交替:

<table>
   <tr tal:repeat="row rows" 
       tal:attributes="class repeat/row/parity">
       <td tal:repeat="col row" tal:content="col">column text text</td>
   </tr>
</table>

这也更容易插入到字符串表达式中:

tal:attributes="class string:striped ${row/class} ${repeat/row/parity}"

这也适用于变色龙。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用 CSS 的斑马条纹

来自分类Dev

如何使用 Jinja2 在 dicts 上获得斑马样式?

来自分类Dev

如何在蟒纹\

来自分类Dev

如何使用TAL访问阵列

来自分类Dev

如何在openssl中创建sha256指纹

来自分类Dev

如何获取Xamarin Studio创建的密钥库的SHA-1指纹?

来自分类Dev

如何在WPF中创建具有斜面压纹效果的按钮

来自分类Dev

如何使用CSS创建眉形

来自分类Dev

为什么在通过keytool使用Google Service登录之前创建SHA-1指纹?

来自分类Dev

如何使用CSS或CSS创建附加形状?

来自分类Dev

如何在javascript中使用tal变量?

来自分类Dev

rich:dataTable带有CSS的斑马细胞

来自分类Dev

如何使用CSS创建类似梯形的div

来自分类Dev

如何仅使用CSS创建箭头?

来自分类Dev

如何使用CSS创建多色边框?

来自分类Dev

如何使用纯CSS创建此箭头

来自分类Dev

如何使用CSS创建标头号

来自分类Dev

如何使用CSS创建倾斜的边框

来自分类Dev

如何仅使用CSS创建气泡

来自分类Dev

如何使用CSS创建对角线框?

来自分类Dev

如何使用CSS创建鸥翼形状

来自分类Dev

如何仅使用CSS创建砌体布局?

来自分类Dev

如何使用AngularJS动态创建CSS类

来自分类Dev

如何使用CSS创建汇总内容?

来自分类Dev

如何使用CSS创建粘性背景?

来自分类Dev

Codenameone:如何使用CSS创建圆形徽章?

来自分类Dev

如何使用CSS创建深色覆盖?

来自分类Dev

如何仅使用CSS创建CD的背面?

来自分类Dev

如何使用CSS创建“类似梨子”的形状