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

0：发布时间降序；

1：发布时间升序；

2：固顶降序；

3：置顶降序；

4：日点击降序；

5：周点击降序；

6：月点击降序；

7：季点击降序；

8：年点击降序；

9：总点击降序

recommend

是否推荐

0

0：所有文章

1：推荐文章

titLen

标题长度

20

自定义

target

链接打开目标

0

0：原窗口打开

1：新窗口打开

headMark

文章标题图标

0

0：无图标

1：黑色小圆点

2：红色小圆点

3：蓝色单箭头

4：蓝色双箭头

自定义图标：填写图标路

lineHeight

文章列表每行的行高

空

自定义

bottomLine

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

0

0：无分隔线

1：默认分隔线

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

ctgForm

文章类别形式

0

0：不显示文章类别

1：显示栏目类别

2：显示站点名称

ctgClass

文章类别的css-class

空

自定义css样式的class名

dateFormat

文章发布日期显示格式

0

0：不显示日期

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

2：”年-月-日” 格式

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

4：”月-日” 格式

datePosition

日期排列位置

1

1：紧跟标题之后

2：右对齐

3：左对齐

isPage

是否显示分页

0

0：否；1：是

count

每页列表显示数量

20

自定义

cssStyle

连接的样式

空

自定义

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

picWidth

按百分比显示图片宽度

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

自定义

picHeight

每行图片显示高度

110

自定义

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

flashWidth

焦点图宽度

296（px）

自定义

flashHeight

焦点图总高度

200（px）

自定义

textHeight

焦点图文本高度

20（px）

自定义

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

rollDisplayHeight

显示区高度

28

自定义

rollLineHeight

行高

28

自定义

rollCols

列数（一行中包含几列）

1

自定义

rollSpeed

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

1

自定义

isSleep

是否停顿

1

0：不停顿；

1：停顿

rollSleepTime

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

50

自定义

rollCount

一次滚动的行数

1

自定义

rollSpan

一次滚动的像素

1

自定义

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

searchKey

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

空

自定义关键字

style

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

1

1：普通列表

sysTpl

指定系统模板

1

自定义

sysContent

系统内容样式

0

自定义

userContent

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

空

自定义

sysPage

系统分页样式

0

自定义

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>
---------------------
作者：itjoy
来源：CSDN
原文：https://blog.csdn.net/itjoy/article/details/7447932
版权声明：本文为博主原创文章，转载请附上博文链接！