找回密码
 立即注册
搜索
查看: 6574|回复: 4
打印 上一主题 下一主题
收起左侧

软景目录多列显示方法

[复制链接]
跳转到指定楼层
楼主
发表于 2012-6-12 01:43 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
出差在外,发个帖也方便。过几天又有事!
软景生成的目录默认是一列,不好改成多列的!想了一种改成多列显示的方法。原理还是利用类此HP那样生成一个数组来实现。具体过程如下。
用软景自带的模板做个例子
一、生成pages数组
这是软景生成后,默认的效果图

其默认的整个网页代码如下
  1. <!--//Built by Softscape HTML Builder 3.0 http://www.ruanjing.com-->
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>目录</title>
  6. <style>
  7. <!--
  8. .title_index{ /*大标题样式*/
  9.     font-size: 26pt;
  10.     font-family: "隶书";
  11.     color: #669900;
  12.     font-weight: bold;
  13. }
  14. .title_page{ /*题目样式*/
  15.     font-size: 12pt;
  16.     font-family: "黑体";
  17.     color: #669900;
  18.     font-weight: bold;
  19. }
  20. .content{/*内容样式*/
  21.     font-size: 12pt;
  22.     font-family: "宋体";
  23.     line-height: 16pt;    /*行距*/   
  24. }
  25. .content img {
  26.     margin: 7px;
  27. }
  28. .9{ font-size: 9pt }
  29. .TitleLinks{ /*索引列表的停靠方位*/
  30.     text-align: center;
  31. }
  32. .TitleLinks .content { /*索引页使用文字列表符时,修改行距*/
  33.     line-height: 20pt;
  34. }
  35. .TitleLinks .content img { /*索引页使用图形列表符时,修改行距*/
  36.     margin-top: 7px;
  37.     margin-bottom: 7px;   
  38. }
  39. A:link    {text-decoration: none; color:#0033CC}
  40. A:visited  {text-decoration: none; color: #0033CC}
  41. A:active {text-decoration: none; color: #0000ff }
  42. A:hover {text-decoration: underline; color: #FF0000 }
  43. .b1 {
  44.     background-image: url(images/NA00760_.GIF);
  45.     background-repeat: no-repeat;
  46. }
  47. .b2 {
  48.     background-image: url(images/NA00760_2.GIF);
  49.     background-repeat: no-repeat;
  50.     background-position: right bottom;
  51. }
  52. -->
  53. </style>
  54. </head>
  55. <body bgcolor="#FFFFFF" background="images/GRNSAND.JPG">
  56. <div align="center">
  57. <center>
  58. <table border="0" cellpadding="1" cellspacing="0" width="90%">
  59. <tr>
  60. <td width="90%" bgcolor="#000000"><table width="100%" height="293" border="0"
  61.     cellpadding="0" cellspacing="0" bgcolor="#FEEDFE">
  62. <tr>
  63. <td width="100%"  class="b1"><DIV class="content">
  64. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  65. <tr>
  66. <td height="246" valign="top" class="b2"><table width="100%" height="358" border="0" cellpadding="0" cellspacing="0">
  67. <tr>
  68. <td width="9%" height="29"> </td>
  69. <td width="82%" valign="bottom"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="9">
  70. <tr>
  71. <td width="65%" align="right"> </td>
  72. <td width="35%"><div align="right">  </div></td>
  73. </tr>
  74. </table></td>
  75. <td width="9%"> </td>
  76. </tr>
  77. <tr>
  78. <td height="284"> </td>
  79. <td valign="top" class="content"><div align="center" class="title_index"><br>
  80. 目录</div>
  81. <p><div class="TitleLinks"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="content"><img src="icon.gif" align="absmiddle"> <A HREF="mydoc000.htm" >第〇〇一节</A><BR>
  82. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc001.htm" >第〇〇二节</A><BR>
  83. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc002.htm" >第〇〇三节</A><BR>
  84. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc003.htm" >第〇〇四节</A><BR>
  85. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc004.htm" >第〇〇五节</A><BR>
  86. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc005.htm" >第〇〇六节</A><BR>
  87. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc006.htm" >第〇〇七节</A><BR>
  88. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc007.htm" >第〇〇八节</A><BR>
  89. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc008.htm" >第〇〇九节</A><BR>
  90. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc009.htm" >第〇一〇节</A><BR>
  91. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc010.htm" >第〇一一节</A><BR>
  92. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc011.htm" >第〇一二节</A><BR>
  93. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc012.htm" >第〇一三节</A><BR>
  94. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc013.htm" >第〇一四节</A><BR>
  95. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc014.htm" >第〇一五节</A><BR>
  96. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc015.htm" >第〇一六节</A><BR>
  97. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc016.htm" >第〇一七节</A><BR>
  98. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc017.htm" >第〇一八节</A><BR>
  99. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc018.htm" >第〇一九节</A><BR>
  100. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc019.htm" >第〇二〇节</A><BR>
  101. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc020.htm" >第〇二一节</A><BR>
  102. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc021.htm" >第〇二二节</A><BR>
  103. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc022.htm" >第〇二三节</A><BR>
  104. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc023.htm" >第〇二四节</A><BR>
  105. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc024.htm" >第〇二五节</A><BR>
  106. <!--HTMLBuilderInsertPoint--></div></td><td width="20"> </td></tr></table></div> <br>
  107. <br>
  108. </p></td>
  109. <td> </td>
  110. </tr>
  111. <tr>
  112. <td height="45"> </td>
  113. <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="9">
  114. <tr>
  115. <td align="right">  </td>
  116. <td width="150"> </td>
  117. </tr>
  118. </table>
  119. <span class="9"><font color="#CCCCCC">创建时间:2012-6-12 </font></span></td>
  120. <td> </td>
  121. </tr>
  122. </table></td>
  123. </tr>
  124. </table>
  125. </div></td>
  126. </tr>
  127. </table></td>
  128. </tr>
  129. </table>
  130. <a href="http://www.ruanjing.com?a=hb2" target="_blank"><font color="#999999" face="Arial, Helvetica, sans-serif" style="font-size:8pt;">Power
  131. by Softscape HTML Builder 3</font></a>
  132. </center>
  133. </div>
  134. </body>
  135. </html>
复制代码
执行下面的EE脚本生成pages数组,并插入到网页头处
注意:如果没有插入到网页中,请自己粘贴到合适的位置
这是生成数组的EE脚本
  1. var str="<script language=\"javascript\">"+"\n";
  2. str+="var pages=new Array();"+"\n";
  3. var reg=new RegExp("<a href=(.*\.htm)[^#].*>(.*)<\/a>","gmi")
  4. document.selection.StartOfDocument();
  5. document.selection.SelectAll();
  6. var txt = document.selection.Text;
  7. var aReturn;
  8. var i=0;
  9. while(1){
  10.     aReturn= reg.exec(txt);
  11.     if(aReturn!=null)
  12.     {
  13.         //去掉字符串本身自带的"
  14.         aReturn[1]=aReturn[1].replace(/\"/gi,"");
  15.         aReturn[2]=aReturn[2].replace(/\"/gi,"");
  16.         str+="pages["+i+"]=[\""+aReturn[1] +"\",\""+aReturn[2]+"\"];"+"\n";
  17.         i++;
  18.     }
  19.     else
  20.     {
  21.         break;
  22.     }
  23. }
  24. str+="<\/script>";
  25. var found=document.selection.Replace("<\/head>",str+"\n"+"<\/head>",eeReplaceAll);//在网页头部插入pages数组
  26. if(found==0)//没有找到网页头结束标签,提醒用户自行粘贴
  27. {
  28.     clipboardData.setData( "Text", str);
  29.     alert("pages数组已经复制到剪贴板,请自行粘贴到文档的合适位置");
  30. }
复制代码
生成的数组如下
  1. <script language="javascript">
  2. var pages=new Array();
  3. pages[0]=["mydoc000.htm","第〇〇一节"];
  4. pages[1]=["mydoc001.htm","第〇〇二节"];
  5. pages[2]=["mydoc002.htm","第〇〇三节"];
  6. pages[3]=["mydoc003.htm","第〇〇四节"];
  7. pages[4]=["mydoc004.htm","第〇〇五节"];
  8. pages[5]=["mydoc005.htm","第〇〇六节"];
  9. pages[6]=["mydoc006.htm","第〇〇七节"];
  10. pages[7]=["mydoc007.htm","第〇〇八节"];
  11. pages[8]=["mydoc008.htm","第〇〇九节"];
  12. pages[9]=["mydoc009.htm","第〇一〇节"];
  13. pages[10]=["mydoc010.htm","第〇一一节"];
  14. pages[11]=["mydoc011.htm","第〇一二节"];
  15. pages[12]=["mydoc012.htm","第〇一三节"];
  16. pages[13]=["mydoc013.htm","第〇一四节"];
  17. pages[14]=["mydoc014.htm","第〇一五节"];
  18. pages[15]=["mydoc015.htm","第〇一六节"];
  19. pages[16]=["mydoc016.htm","第〇一七节"];
  20. pages[17]=["mydoc017.htm","第〇一八节"];
  21. pages[18]=["mydoc018.htm","第〇一九节"];
  22. pages[19]=["mydoc019.htm","第〇二〇节"];
  23. pages[20]=["mydoc020.htm","第〇二一节"];
  24. pages[21]=["mydoc021.htm","第〇二二节"];
  25. pages[22]=["mydoc022.htm","第〇二三节"];
  26. pages[23]=["mydoc023.htm","第〇二四节"];
  27. pages[24]=["mydoc024.htm","第〇二五节"];
  28. </script>
复制代码
插件设计:zasq.net

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

俺下过您的E书了,谢谢啦 。。。查看更多↓

沙发
 楼主| 发表于 2012-6-12 02:09 | 只看该作者
此时目录如下



附件是用师士传说做得例子,和相关关的脚本

表格样式比较难看,这个自己去修改吧。看球去了

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

玄铁会员 - 等级≥主簿

板凳
发表于 2012-6-12 13:39 | 只看该作者
好贴!进来瞅瞅~
回复 支持 反对

使用道具 举报

玄铁会员 - 等级≥主簿

地板
发表于 2012-6-12 19:53 | 只看该作者
又见高手出动啦!
回复 支持 反对

使用道具 举报

5#
 楼主| 发表于 2013-6-24 21:45 | 只看该作者
最近看软景书,用这个整理下
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋| ( Q群816270601 )

GMT+8, 2024-11-16 19:10 , Processed in 1.698991 second(s), 60 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表