标题: 软景目录多列显示方法 [打印本页]
作者: 无极    时间: 2012-6-12 01:43
标题: 软景目录多列显示方法
出差在外，发个帖也方便。过几天又有事！
软景生成的目录默认是一列，不好改成多列的！想了一种改成多列显示的方法。原理还是利用类此HP那样生成一个数组来实现。具体过程如下。
用软景自带的模板做个例子
一、生成pages数组
这是软景生成后，默认的效果图
[attach]58065[/attach]
其默认的整个网页代码如下
  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>
  82. <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>
  83. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc001.htm" >第〇〇二节</A><BR>
  84. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc002.htm" >第〇〇三节</A><BR>
  85. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc003.htm" >第〇〇四节</A><BR>
  86. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc004.htm" >第〇〇五节</A><BR>
  87. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc005.htm" >第〇〇六节</A><BR>
  88. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc006.htm" >第〇〇七节</A><BR>
  89. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc007.htm" >第〇〇八节</A><BR>
  90. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc008.htm" >第〇〇九节</A><BR>
  91. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc009.htm" >第〇一〇节</A><BR>
  92. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc010.htm" >第〇一一节</A><BR>
  93. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc011.htm" >第〇一二节</A><BR>
  94. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc012.htm" >第〇一三节</A><BR>
  95. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc013.htm" >第〇一四节</A><BR>
  96. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc014.htm" >第〇一五节</A><BR>
  97. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc015.htm" >第〇一六节</A><BR>
  98. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc016.htm" >第〇一七节</A><BR>
  99. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc017.htm" >第〇一八节</A><BR>
  100. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc018.htm" >第〇一九节</A><BR>
  101. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc019.htm" >第〇二〇节</A><BR>
  102. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc020.htm" >第〇二一节</A><BR>
  103. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc021.htm" >第〇二二节</A><BR>
  104. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc022.htm" >第〇二三节</A><BR>
  105. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc023.htm" >第〇二四节</A><BR>
  106. <img src="icon.gif" align="absmiddle"> <A HREF="mydoc024.htm" >第〇二五节</A><BR>
  107. <!--HTMLBuilderInsertPoint--></div></td><td width="20"> </td></tr></table></div> <br>
  108. <br>
  109. </p></td>
  110. <td> </td>
  111. </tr>
  112. <tr>
  113. <td height="45"> </td>
  114. <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="9">
  115. <tr>
  116. <td align="right">  </td>
  117. <td width="150"> </td>
  118. </tr>
  119. </table>
  120. <span class="9"><font color="#CCCCCC">创建时间：2012-6-12 </font></span></td>
  121. <td> </td>
  122. </tr>
  123. </table></td>
  124. </tr>
  125. </table>
  126. </div></td>
  127. </tr>
  128. </table></td>
  129. </tr>
  130. </table>
  131. <a href="http://www.ruanjing.com?a=hb2" target="_blank"><font color="#999999" face="Arial, Helvetica, sans-serif" style="font-size:8pt;">Power
  132. by Softscape HTML Builder 3</font></a>
  133. </center>
  134. </div>
  135. </body>
  136. </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>
复制代码
作者: 无极    时间: 2012-6-12 02:09
此时目录如下
[attach]58066[/attach]


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

表格样式比较难看，这个自己去修改吧。看球去了
作者: 健少    时间: 2012-6-12 13:39
好贴！进来瞅瞅~
作者: 梦千寻    时间: 2012-6-12 19:53
又见高手出动啦！
作者: 无极    时间: 2013-6-24 21:45
最近看软景书，用这个整理下



欢迎光临 (http://imap.zasq.net/~zazww/) Powered by Discuz! X3.2