无限星辰工作室-客户无限互联网动力之源

标题: 应用currentorder标签让discuz的列表实现自动编号（非CSS有序列表方式） [打印本页]

作者: crx349 时间: 2016-7-10 23:24
标题: 应用currentorder标签让discuz的列表实现自动编号（非CSS有序列表方式）
通常可能有以下两个需求：1、自动编号；2、不同序号的样式不同。我们可能会想到程序上和CSS上来做工夫，程序上一般采用分步调出数据或者采用脚本才进行DOM操作，但这样的操作方式相对复杂，甚至对于很多新手朋友都不能做。如果采用CSS就需要利用ol有序表样式以及CSS伪类，一则ol我们可控制的比较有限，另外就是旧版本浏览器不支持某些CSS伪类。而对于discuz来说，就算是一个只掌握了基本的html和css的朋友都可以比上面更完美的实现我们的需求。那就是使用currentorder标签，其实这得益于discuz使用了php的模板引擎。比如下面的这个效果就是连在一起的一个DIY模块，而是仅仅利用了额外的HTML+CSS（不含伪类控制）就实现的。
(, 下载次数: 1154)
接下来我们讲具体的方法，我们首先来看看dz给我们默认的一个最简单标题+作者用户名列表的模板数据，当然这样的是给完全没有任何代码基础的站长使用的

<div class="module cl xl xl1">
<ul>
<li>
<em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em>
<a href="{url}" title="{title}"{target}>{title}</a>
</li>
<ul>

复制代码

上面这种显然是不能够的，而如果用下面的就可以轻易实现了

<div class="module cl xl xl1">
<ul>
<li><em><a href="home.php?mod=space&uid={authorid}"{target}>{author}</a></em>
<i class="all_i i_{currentorder}">{currentorder}.<i><a href="{url}" title="{title}"{target}>{title}</a>
</li>
<ul>

复制代码

大家可以看到我是在里面加了一个<i>，重点也是这部分，其中我加了一个文本（{currentorder}.），加了两个class选择器（all_i i_{currentorder}）。那么实现出来的效果就是，如果这里是8条数据，那么文本依次为1.——8.了。而对于选择器all是公共的，而后面的选择器则是对应于某一个的特有选择器。比如如果当前数据是第五条，那么这个<i>对应的选择器是all和i_5了。而且i_{currentorder}这种选择器的写法可以应用到其他的html标签，比如ul、li等等。到这里大家就可以轻易对任何一条数据的样式进行操作了。

欢迎光临无限星辰工作室-客户无限互联网动力之源 (https://xmspace.net/)