鉴于后台的ASBlog与皮肤主题都是来源于ASBloger的开源支持与共享，这里我也不能藏私。今天一上微博便发现有人询问了海兰国度里的分页显示，这里便把源码贡献出来。让大家一起改进和优化自己的博客站。
同时，作为抛砖引玉，希望有能力的人继续改进这个小功能。里面对于随机日志的调用，我是至今也搞不明白。
此部分功能代码分为三段：
第一部分：页面显示代码。针对于ASBlog的自定义内容管理中，填写以下代码，便于此后各个页面的调用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <div id="con">
<ul id="tags">
<li><a onmouseover="selectTag('tagContent0',this)" href="javascript:void(0)">随机</a><span style="color: #ff0066;">|</span></li>
<li class="selectTag"><a onmouseover="selectTag('tagContent1',this)" href="javascript:void(0)">推荐</a><span style="color: #ff0066;">|</span></li>
<li><a onmouseover="selectTag('tagContent2',this)" href="javascript:void(0)">热门</a><span style="color: #ff0066;">|</span></li>
<li><a onmouseover="selectTag('tagContent3',this)" href="javascript:void(0)">最新</a></li>
</ul>
<div id="tagContent">
<div id="tagContent0" style="display: none;"><a id="sealango2010" name="sealango2010"> </a><a id="sealango2010" name="sealango2010"></a>
</div>
</div>
</div>
1111
</div>
<div id="tagContent1" style="display: block;"><a id="sealango2009" name="sealango2009"> </a><a id="sealango2009" name="sealango2009"></a>
<script src="/Js/Index.Asp?Path=1&Show=BestLog&ListNum=10&TitleNum=15&LogClassID=0&Target=_blank" type="text/javascript"></script>
</div>
<div id="tagContent2" style="display: none;"><a id="sealango2008" name="sealango2008"> </a>
<a id="sealango2008" name="sealango2008"></a>
<script src="/Js/Index.Asp?Path=1&Show=HotLog&ListNum=10&TitleNum=15&LogClassID=0&Target=_blank" type="text/javascript"></script>
</div>
<div id="tagContent3" style="display: none;"><a id="sealango2007" name="sealango2007"> </a><a id="sealango2007" name="sealango2007"></a>
<script src="/Js/Index.Asp?Path=1&Show=NewLog&ListNum=10&TitleNum=15&LogClassID=0&Target=_blank" type="text/javascript"></script>
</div> |
第二部分：分页显示代码。鉴于每个页面都会用到这个分页显示，以下javascript需要写到主题风格的部分中
1 2 3 4 5 6 7 8 9 10 | <!--Tab分页开始-->
<script type="text/javascript">// <![CDATA[
function selectTag(showContent,selfObj)
{
// 操作标签
var tag = document.getElementById("tags").getElementsByTagName("li");
var taglength = tag.length;
for(i=0; i<taglength ; i++) { tag[i].className = ""; } selfObj.parentNode.className = "selectTag"; // 操作内容 for(i=0; j=document.getElementById("tagContent"+i); i++) { j.style.display = "none"; } document.getElementById(showContent).style.display = "block"; }
// ]]></script>
<!--Tab分页结束--> |
第三部分：CSS样式部分。只要记住几个关键的标签，里面的样式随便改。就算是我这下面的代码，也有多余的部分，只要不影响大局，基本上是懒得改了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | /*sealango侧栏日志分页浏览*/
OL LI {
MARGIN: 8px}
#con {
MARGIN: 0px auto;
WIDTH: 100%;}
#tags{
PADDING: 0px;
MARGIN: 0px auto;
WIDTH: 200px;
HEIGHT: 30px}
#tags LI {
FLOAT: left;
padding: 5px 0;}
#tags LI A {
PADDING: 0 9px;
FLOAT: left;
}
#tags LI a:hover {
COLOR: #FF0066;
Text-Decoration: None; }
#tags LI.emptyTag {
BACKGROUND: none transparent scroll repeat 0% 0%;
WIDTH: 4px}
#tags LI.selectTag {
MARGIN-BOTTOM: -2px;
POSITION: relative;
HEIGHT: 25px}
#tags LI.selectTag A {
COLOR: #FF0066;}
#tags LI.selectTag a:hover {
COLOR: #FF0066;
Text-Decoration: None; }
#tagContent {
width: 200px;
PADDING: 5px;
}
#tagContent DIV.selectTag {
DISPLAY: block;
width: 96%;
text-align: center;}
#tagContent DIV.tagtittle7 {
padding: 5px;
Border-Top: 1px solid #86C61E;
Color: #0954A6;
} |
如果以上代码，你能成功的使用在自己的博客上，还希望你能找到随机日志的调用代码，找到时别忘通知我一声，不胜感激！
谢谢，我试一下，如果有问题还要请教的。 [reply=Sealango,16/01/2011 18:28:26]欢迎再来。[/reply]