您当前位置:首页 > 文章中心 > SCSCMS

scscms插件-滑动标签2

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2010-11-03   阅读次数: 108   查看权限: 游客查看

新版功能:滑动标签顺序由s_cat决定,实现排序可自定义;代码更简洁;分类错误时可提示!第一版升级第二版只需要更换Function div_tab(str,s_cat,id,lr)函数即可,其他可不更换。

先查看效果:http://www.scscms.com/scscms/tab_2.asp

步骤一:在inc/scs_function.asp添加以下代码

'**************************************************
'函 数 名:div_tab(str,s_cat,id,lr)
'作    用:滑动标签第二版
'说    明:str是类别(如news,Article,software等),s_cat:分类集(如1,2 多个分类ID用,隔开),id:区别ID(只要保证同函数中字符是唯一性) lr:是浮左还是浮右(left或right)
'新版功能:滑动标签顺序由s_cat决定,实现排序可自定义;代码更简洁;分类错误时可提示!第一版升级第二版只需要更换Function div_tab(str,s_cat,id,lr)函数即可,其他可不更换。
'*************************************************
Function div_tab(str,s_cat,id,lr)
Dim F_List,B_List,i_arrcat,f_icat
i_arrcat=Split(s_cat,",")
F_List="<div class=""article_div_"&lr&"""><div class=""div_tab"">"
B_List="</div>"
	If IsArray(i_arrcat) Then
     i_Total=UBound(i_arrcat)
     For i=0 To i_Total
			f_icat=i_arrcat(i)
			F_List=F_List&"<div id='dtab_"&id&f_icat&"'"
			B_List=B_List&"<div id='list_"&id&f_icat&"'"
			If i=0 Then
				F_List=F_List&" class='div_on' "
				B_List=B_List&" style='display:'"
			Else
				F_List=F_List&" class='div_off' "
				B_List=B_List&" style='display:none'"
			End If
			F_List=F_List&"onmouseover=""div_tab('"&id&"',"&f_icat&",'"&s_cat&"')""><a href=""/"&str&"/CatList_"&f_icat&".html"">"&Get_Cat_Name(f_icat)&"</a></div>"
			B_List=B_List&">"

			s_Sql="Select Top 6 "&str&"_id,"&str&"_date,"&str&"_title,user_view,"&str&"_pic,"&str&"_summary,web_url From [Scs_"&str&"] where passed=1 and cat_id in("&f_icat&ReadSubId(f_icat)&") Order By "&str&"_pic<>'',istop=1,"&str&"_id desc"
           Set s_Rs = Server.CreateObject("Adodb.RecordSet")
           s_Rs.open s_Sql,Conn,1,1
           If s_Rs.Eof Then
				B_List=B_List&"<ul class=""article_ul""><li>暂无内容</li>"
			Else
			i_Total=0
         Do While Not s_Rs.Eof
			   s_PicURl=s_Rs(4)
			   s_Title=scscms.clear_html("<[^>]*>",s_Rs(2))
			   If i_Total=0 Then
					B_List=B_List&"<div class=""article_div_pic"">"&scs_getpic(s_PicURl,s_Title,"/images/scscms.jpg",130,90,"align='left'")
					B_List=B_List&"<a href="""&s_Rs(6)&"""><strong>"&s_Title&"</strong></a><br/>"&scscms.clear_html("<[^>]*>",s_Rs(5))&"</div><ul class=""article_ul"">"
			   Else
					B_List=B_List&"<li><img src=""/images/ico/article_pt.gif"" width=11 height=11 align=""absmiddle"" />&nbsp;<a href="""&s_Rs(6)&""">"&s_Title&"</a> "&s_Rs(1)
						If DateDiff("d",s_Rs(1),Now())<CInt(newtime) Then B_List=B_List&"&nbsp;<img src=""/images/ico/new.gif"" border=""0"" width=30 height=10 />"
					B_List=B_List&"</li>"
			   End If
			   i_Total=i_Total+1
			   s_Rs.MoveNext
               Loop
            End If
            s_Rs.Close:Set s_Rs=Nothing
            B_List=B_List&"</ul></div>"           
        Next
    End If    
    div_tab=F_List&B_List&"</div>"
End Function

步骤二:在images/xzy_css.css添加代码

.div_on,.div_off{
	width:80px;
	float:left;
	height:21px;
	color:#999999;
	cursor:pointer;
	padding-top:6px;
	text-align:center;	
	font-size:14px;
	background-image: url(/images/scs_bg.png);
	background-repeat:repeat-x;
	background-position:0px -200px;
	border-right:1px solid #99CC99;
}
.div_on{
	background-position:0px -230px;
	border-bottom:0px solid #99CC99;
}

步骤三:在inc/index.js添加代码

function div_tab(s,n,a){
	var arr=a.split(",");
	for(var i=0;i<arr.length;i++){
		$("dtab_"+s+arr[i]).className="div_off";
		$("list_"+s+arr[i]).style.display="none";
	}
	$("dtab_"+s+n).className="div_on";
	$("list_"+s+n).style.display="";
}

步骤四:在default.asp首页或者需要的地方添加代码

<div class="artdiv_left">
	<%=div_tab("software","36","soft","left")%>	
	<%=div_tab("media","61,66","media","right")%>	
	<%=div_tab("article","5,17,23","artl","left")%>	
	<%=div_tab("article","23,17,9,5","artr","right")%>	
</div>

重复说明div_tab(str,s_cat,id,lr)函数的参数:
str:可以是news(新闻)或article(文章)或media(影音)或software(下载)或picture(图片)或product(产品)
s_cat:有多少个分类就有多少个滑动标签,分类之间用,符号隔开
id:主要是用来区分ID用,建议取不同的英文字符串即可。
lr:指排版时是在左还是在右,left与right两者选一。最好是交替使用!

关键词: scscms,插件开发,滑动标签   编辑时间: 2010-11-03

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博  匿名评论  验证码:  点击更新
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐
  • kendo ui简介