最近想自己写一些标签,看了一下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.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT></p>