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.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </SCRIPT></p> |