乔客CMS/乔客CMS的调用代码(2)
来自站长百科
- 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使用手册 | ||
---|---|---|
|