• 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=" 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=" 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
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    DRF__序列化(1)serializers.Serializer 基本的序列化、反序列化概念
    小整数池以及字符串驻留机制
    Paginator实现分页
    xml代码 解决eclipse乱码问题
    css,解决文字与图片对齐的问题
    鼠标悬停,背景颜色变化问题
    解决html代码文本复制问题,js技术
    解决 点击超链接后,周围出现的虚线框的问题
    将一个html文件引入另一个html文件的div中
    WebStorm出现中文乱码解决代码
  • 原文地址:https://www.cnblogs.com/Jeely/p/11214328.html
Copyright © 2020-2023  润新知