乔客CMS/乔客CMS的调用代码（2）
查看全部词条命名空间：Main
- Re:首页动态调用指定分类文章的方法
- 首页动态调用指定分类文章的方法
- 最新新闻的调用,请将鼠标移动到不同的新闻分类上,便可查看效果!
- skin\default\index.html中到
- Code:
- 下面添加
Code:
<SCRIPT language=JavaScript>
var aID=0;
function ShowTabs1(ID){
if(ID!=aID){
TabTitle1[aID].className="main_menu_title1";
TabTitle1[ID].className="main_menu_title2";
Tabs1[aID].style.display="none";
Tabs1[ID].style.display="";
aID=ID;
}
}
</SCRIPT>
在页面中间你要显示的位置添加:
Code:
<div class="MainCenter">
<div class="Block">
<div class="BlockBar">最新文章</div>
<div class="BlockList">
<table cellSpacing=0 cellPadding=0 width="100%" border=0>
<tr vAlign=bottom align=middle>
<td class=main_menu_title2 id=TabTitle1 onmouseover=ShowTabs1(0)
vAlign=bottom align=middle width=105 height=31>文章分类1</td>
<td class=main_menu_title1 id=TabTitle1 onmouseover=ShowTabs1(1)
vAlign=bottom align=middle width=105 height=31>文章分类2</td>
<td class=main_menu_title1 id=TabTitle1 onmouseover=ShowTabs1(2)
vAlign=bottom align=middle width=105 height=31>文章分类3</td>
<td class=main_menu_title1 id=TabTitle1 onmouseover=ShowTabs1(3)
vAlign=bottom align=middle width=105 height=31>文章分类4</td>
<td align=middle width=80 height=31></td>
</tr>
<tr align=middle>
<td align=middle bgColor=#a4813a colSpan=5 height=2></td>
</tr>
</table>
<table cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY id=Tabs1>
<tr>
<td class=menu_tdbg vAlign=top align=left height=217>
<li><%=label.getBlock("article","li_class","classid=1;sql_order=new;
num_row=10;num_topic=50")%></li></td>
</tr>
<TBODY id=Tabs1 style="DISPLAY: none">
<tr>
<td class=menu_tdbg vAlign=top align=left height=217>
<li><%=label.getBlock("article","li_class","classid=2;sql_order=new;
num_row=10;num_topic=50")%></li></td>
</tr>
<TBODY id=Tabs1 style="DISPLAY: none">
<tr>
<td class=menu_tdbg vAlign=top align=left height=217>
<li><%=label.getBlock("article","li_class","classid=3;sql_order=new;
num_row=10;num_topic=50")%></li></td>
</tr>
<TBODY id=Tabs1 style="DISPLAY: none">
<tr>
<td class=menu_tdbg vAlign=top align=left height=217>
<li><%=label.getBlock("narticle","li_class","classid=4;sql_order=new;
num_row=10;num_topic=50")%></li></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</div>
</div>
- 红色为文章分类的ID
skin\default\images\css\style.css中添加样式
Code: .main_menu_title1 { background:url(../bg1.gif);background-position: 1% 100%; background-positionX: center; background-positionY: bottom; background-repeat:no-repeat;color:bbbbbb; } .main_menu_title2 { background:url(../bg2.gif);background-position: 1% 100%; background-positionX: center;background-positionY: bottom; background-repeat:no-repeat;color:ffffff; } .menu_tdbg { line-height: 100%;padding-left:5;padding-right:5; }
- 所用到的两张背景自己做两张,一张深色,一张浅色便可,大小为100*25相素
- common\channel\article\label.xcml
- 找到并加上红色部分
Code:
<configure>
<node>li,li_normal,layer,line,li_class</node>
</configure>
找到</xcml>在之前加上一个节点
Code:
<li_class>
<item><![CDATA[<li><a class="time right">{$time}</a>
<a class="topic" href="{$linkurl}">{$topic}</a></li>]]></item>
<frame><![CDATA[{$tpl}]]></frame>
</li_class>
Re:自动滑门技术代码
<div id="index_sort" class="index_margin">
<div id="sort_top">
<ul>
<li><div id="choose1" onClick="javascript:lshLayer(1);">新闻列表</div></li>
<li><div id="choose2" onClick="javascript:lshLayer(2);">新闻列表</div></li>
<li><div id="choose3" onClick="javascript:lshLayer(3);">新闻列表</div></li>
<li><div id="choose4" onClick="javascript:lshLayer(4);">新闻列表</div></li>
<li><div id="choose5" onClick="javascript:lshLayer(5);">新闻列表</div></li>
</ul>
</div>
<div id="sort_content" class="cont"></div>
<!--内容区域开始 请替换整体table，保留div-->
<div id="page1" class="page" >ggggggg
</div>
<div id="page2" class="page" >sssssssss
</div>
<div id="page3" class="page" >gggggdddddddddddd
</div>
<div id="page4" class="page">fdfdfdfdfdfdfdfd
</div>
<div id="page5" class="page" >fdfdfdfdfdsad2ewwewe
</div>
<!--内容区域结束-->
<script language="javascript">
var num=5;
var picUrl=new Array();
//picUrl[1]="bluebg.jpg"; //按扭背景图片地址
//picUrl[0]="graybg.jpg"; //请注意修改
function getObj(objName){return(document.getElementById(objName));}
function lshLayer(id){
//Effects:
getObj('sort_content').filters.revealTrans.Transition=23;//在这里修改过场效果 数值：1~23
getObj('sort_content').filters.revealTrans.apply();
getObj('sort_content').innerHTML=getObj("page"+id).innerHTML;
getObj('sort_content').filters.revealTrans.play();
//Titles:
for(var i=1;i<=num;i++){
if(i==id) {
//getObj("td"+i).background=picUrl[1];
getObj("choose"+i).className="title0";
}else{
//getObj("td"+i).background=picUrl[0];
getObj("choose"+i).className="title1";
}
}
}
onLoad=lshLayer(1);
</script>
</div>
CSS
.index_margin{
margin:7px 0px 7px 12px;
}
#index_sort{
width:335px;
height:157px;
padding:0px;
float:left;
}
/********** 格式化层样式 **********/
.page {visibility:hidden; position:absolute;}
.cont {padding:5px; filter:revealTrans(Duration=1,Transition=23);
width:100%;}
.title0 {width:68px; color:#000000; font-size:13px; font-weight:normal;
cursor:hand; background-repeat:no-repeat}
.title1 {width:68px; color:#ffffff; font-size:13px; font-weight:normal;
cursor:hand; background-repeat:no-repeat}
Re:间隔图片浏览代码
<div class="space"></div>
<div class="Block">
<div class="BlockBar">活动掠影</div>
<marquee onmouseover="this.stop()" style="LINE-HEIGHT: 150%"
onmouseout="this.start()" scrollAmount="2" scrollDelay="0"
behavior="alternate" width="640" height="15" border="0">
<table cellspacing=0 cellpadding=0 class="tab-gallery-pic3">
<tr>
<label:block("gallery","sql_order=new;num_row=8;num_topic=12")>
<td class="pics">
<table cellspacing=0 cellpadding=0>
<tr><td class="pictrue"><a class="img"
href="{$linkurl}"><img border="0" class="img" src="{$pic.url}"></a></td></tr>
<tr><td class="topic"><a class="topic"
href="{$linkurl}">{$topic}</a></td></tr>
</table>
</td>
</label:end>
</tr>
</marquee> </table>
</div>
<div class="Block">
</div>
相关条目
参考来源
乔客CMS使用手册 | ||
|---|---|---|
|