JEECMS的几个细节

最近想自己写一些标签，看了一下JEECMS，感觉有些标签还是很值得学习的。

1、图片新闻：可以实现类似于flash切换图片的那种效果

效果：

代码：

[@cms.ArtiList chnlId=” attr=’3′ count=’6′ sysContent=’3-1′ titLen=’35’ flashWidth=’507′ flashHeight=’338’/]

其中sysContent=’3-1’指的就是以flash方式显示图片新闻。

类似的内容样式还有：

1-1：普通标题列表

1-2：图文列表

2-1：标题列表翻滚

2-2：图文列表翻滚

3-1：焦点图

2、新闻列表：

代码：

[@cms.ArtiList chnlId=’14’ count=’7′ sysContent=’1-1′ titLen=’36’ lineHeight=’3′ dateFormat=’4′ datePosition=’2′ headMark=’3′ target=’1’/]

具体参数太多了，还是拷贝一下吧：

属性名称	属性说明	默认值	可选值
chnlId	栏目ID，栏目页中可不设置，系统会自动获取当前栏目ID	当前栏目ID	空：显示全站文章列表；栏目ID：指定栏目文章

attr

文章属性ID

空

1：普通 2：图文

3：焦点 4：头条

5：滚动

sysContent

列表显示方式

1-1

1-1：普通标题列表

1-2：图文列表

2-1：标题列表翻滚

2-2：图文列表翻滚

3-1：焦点图

orderBy

排序方式

0：发布时间降序；

1：发布时间升序；

2：固顶降序；

3：置顶降序；

4：日点击降序；

5：周点击降序；

6：月点击降序；

7：季点击降序；

8：年点击降序；

9：总点击降序

recommend

是否推荐

0：所有文章

1：推荐文章

titLen

标题长度

自定义

target

链接打开目标

0：原窗口打开

1：新窗口打开

headMark

文章标题图标

0：无图标

1：黑色小圆点

2：红色小圆点

3：蓝色单箭头

4：蓝色双箭头

自定义图标：填写图标路

lineHeight

文章列表每行的行高

空

自定义

bottomLine

每行标题下是否带下划分隔线

0：无分隔线

1：默认分隔线

自定义样式：css中定义的样式名称

ctgForm

文章类别形式

0：不显示文章类别

1：显示栏目类别

2：显示站点名称

ctgClass

文章类别的css-class

空

自定义css样式的class名

dateFormat

文章发布日期显示格式

0：不显示日期

1：”年-月-日时-分-秒” 格式

2：”年-月-日” 格式

3：”月-日时-分” 格式

4：”月-日” 格式

datePosition

日期排列位置

1：紧跟标题之后

2：右对齐

3：左对齐

isPage

是否显示分页

0：否；1：是

count

每页列表显示数量

自定义

cssStyle

连接的样式

空

自定义

仅当sysContent=’1-2’（图文列表）时，以下标签属性才有效

picWidth

按百分比显示图片宽度

25（即每个图片占总宽度的25%，每行可放四张图片）

自定义

picHeight

每行图片显示高度

110

自定义

仅当sysContent=’3-×’（焦点图）时，以下标签属性才有效

flashWidth

焦点图宽度

296（px）

自定义

flashHeight

焦点图总高度

200（px）

自定义

textHeight

焦点图文本高度

20（px）

自定义

仅当sysContent=’2-×’（特效显示）时，以下标签属性才有效

rollDisplayHeight

显示区高度

自定义

rollLineHeight

行高

自定义

rollCols

列数（一行中包含几列）

自定义

rollSpeed

滚动速度，值越小越快，最小为1

自定义

isSleep

是否停顿

0：不停顿；

1：停顿

rollSleepTime

停顿时间，值越大停顿越久

自定义

rollCount

一次滚动的行数

自定义

rollSpan

一次滚动的像素

自定义

其它高级标签属性（用于用户个性设置）

searchKey

在标题、tags和描述中搜索指定关键字的文章列表，用于搜索页模板

空

自定义关键字

style

标签内部样式，如果指定sysContent或userContent，则该项无效

1：普通列表

sysTpl

指定系统模板

自定义

sysContent

系统内容样式

自定义

userContent

用户内容样式，当sysContent=1时有效

空

自定义

sysPage

系统分页样式

自定义

userPage

用户分页样式，当sysPage=1时有效

空

自定义

upSolution

指定其它模板方案样式

空

自定义

upWebRes

指定其它站点样式

空

自定义

pageClass

分页栏css样式的class名称

空

自定义

pageStyle

分页栏css自定义style样式

空

自定义

3、显示栏目名称：

[@cms.ChnlList hasContent=’1′ inner=’1′;c]

<div class=”news_list_m”><a href=”${c.url}”>${c.name}</a></div>

[/@cms.ChnlList]

4、实现图片滚动效果（类似跑马灯）：

这个还真是费了些周折，本来JEECMS文档中说支持这种滚动效果，可试了半天就是不“滚动”，我试的代码：

[@cms.ArtiList chnlId=” attr=’3′ sysContent=’2-2′]

后来没办法，自己写了一个：

<div id=”expert” style=”width: 507px; height: 130px; color: #ffffff; overflow: hidden”>

<table border=”0″ cellpadding=”0″ align=”left” cellspace=”0″>

<tbody>

<tr>

<td align=”center”><img alt=”” width=”170″ height=”130″ src=”${root}/fwjn/article/img/tu7.jpg” /></td>

<td align=”center”>

<div id=”demo” style=”width: 337px; height: 80px; color: #ffffff; overflow: hidden;valign:center”>

<table border=”0″ cellpadding=”0″ align=”left” cellspace=”0″>

<tbody>

<tr>

<td id=”demo1″ valign=”center”>

<table border=”0″ cellspacing=”0″ cellpadding=”5″>

<tbody>

<tr align=”center”>

[@cms.ArtiList chnlId=’21’ attr=’5′ orderBy=’9′ inner=’1′;ca]

[#if ca.imgUrl?length lte 10 ]

[#else]

<td width=”60″> <a target=”_blank” href=”${ca.url}”> <img alt=”${ca.title}” width=”60″ height=”80″ src=”${ca.imgUrl}”/> </a> </td>

[/#if]

[/@cms.ArtiList]

</tr>

</tbody>

</table>

</td>

<td id=”demo2″ valign=”center”></td>

</tr>

</tbody>

</table>

</div>

</td>

</tr>

</tbody>

</table>

</div>

<p><SCRIPT>

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.οnmοuseοver=function() {clearInterval(MyMar)}

demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}

</SCRIPT></p>

原文链接：https://blog.csdn.net/itjoy/article/details/7447932

你可能也喜欢