书签

Question

<!--
function BookMark(name) {         // 创建一个“书签层”。      this.create = function(name) {       // 建立书签对象
            this.trim = function(s) {                               // 去尾部空格
                  var i = 0;
                  for (i = s.length-1; i >= 0; i--) {if (s.charAt(i) != " ") break;}
                  return s.substring(0,i+1);
            }
            this.name = (name==null?"":this.trim(name));     // 书签名。字母、数字、下划线，不可间空。
            if (this.name==null || this.name=="") {
                  alert("书签的名必须要有");
                  return null;
            }
            if (eval("(document." + this.name + "?true:false)")) {
                  alert("document." + this.name + "已经存在，请换一个书签名");
                  return null;
            }
//--------- 定义属性 ---------------------------            this.bookMarks = new Array(0);                        // 书签页数组
            this.radianWidth    = 5;                              // 标题栏圆角的弧度点数
            this.bgColor        = "#ffffff";                      // 书签之下的颜色
            this.bookMarkColor1 = "#c0c0c2";                      // 书签的普通色
            this.bookMarkColor2 = "#c0c0b2";                      // 书签提起的颜色
            this.titleHeight    = 20;                             // 书签标题行的高度
            this.borderColor1   = "#ffffff";                      // 书签边界的亮色
            this.borderColor2   = "#666666";                      // 书签边界的浅暗色
            this.borderColor3   = "#000000";                      // 书签边界的深暗色
            this.bookMarkWidth  = 300;                            // 书签宽度
            this.bookMarkHeight = 0;                              // 书签高度// --------- 以下是中间变量，不用改 -----------------            this.hasCreated     = false;                          // 书签是否已建立
            this.pageWidth      = 0;                              // 书签页宽度//---------- 载入函数 -----------            this.test = function() {                   // 检查参数
                  if (this.radianWidth < 2) {this.radianWidth = 2;}
                  if (this.titleHeight < 6) {this.radianWidth = 6;}
                  if (this.bookMarkHeight < this.titleHeight + this.radianWidth + 2) {
                        this.bookMarkHeight = this.titleHeight + this.radianWidth + 2;
                  }
                  var titleWidth = (this.bookMarkWidth/this.bookMarks.length) - (2*this.radianWidth);
                  if (titleWidth < 40) {
                        titleWidth = 40;
                        this.bookMarkWidth = (titleWidth + 2*this.radianWidth) * this.bookMarks.length;
                  }
                  if (this.bookMarks.length == 0) {
                        alert("必须有书签内容");
                        return false;
                  }
                  this.pageWidth = titleWidth;
                  return true;
            }
            this.addBookMark = function(tit, content) {               // 增加一个书签页
                  if (this.hasCreated) {alert("书签已画过了，不能增加书签页"); return;}
                  this.bookMarks[this.bookMarks.length] = new Object();
                  this.bookMarks[this.bookMarks.length-1].title = (tit==null?"":tit);                  // 书签标题
                  this.bookMarks[this.bookMarks.length-1].contentHTML = (content==null?"":content);    // 书签内容。是 HTML 标记串
                  this.bookMarks[this.bookMarks.length-1].elementLine     = null;
                  this.bookMarks[this.bookMarks.length-1].elementTitle    = null;
                  this.bookMarks[this.bookMarks.length-1].elementContent  = null;
                  this.bookMarks[this.bookMarks.length-1].elementContentX = null;
                  this.bookMarks[this.bookMarks.length-1].elementLastDot1 = null;
                  this.bookMarks[this.bookMarks.length-1].elementLastDot2 = null;
            }

Answer 1

this.draw = function(showNo, putObj) {  // 画书签。showNo：首先显示的页号；putObj：放置书签的目标元素。空：则document.write；否则putObj.innerHTML=
                  if (this.hasCreated) {alert("书签已画过了"); return;}
                  if (!this.test()) {return;}
                  this.hasCreated = true;
                  if (showNo==null || isNaN(showNo)) {showNo = 1;}
//================== 输出开始 =======================
                  var ss = "";
                  var i = 0, j = 0, k = 0;
                  ss = "<table id=bookMark_" + this.name
                                  + " width='" + this.bookMarkWidth + "' height='" + this.bookMarkHeight
                                  + "' cellpadding=0 border=0 cellspacing=0 bgcolor='" + this.bgColor + "'>"
                                  + "<tr height='" + (this.titleHeight+this.radianWidth) + "'>";
                  for (i = 0; i < this.bookMarks.length; i++) {   //======== 输出各个书签标题开始 =============
                        ss += "<td><table id=bookMarkT_"+this.name+"_"+i+" width='100%' border=0 cellspacing=0 cellpadding=0>";
//--------------- 输出第 1 行 --------------------
                        ss += "<tr height=1>";
                        for (k = 0; k < this.radianWidth; k++) {ss += "<td width=1 bgcolor='" + this.bgColor + "'></td>";}
                        ss += "<td bgcolor=" + this.borderColor1 + " width="+this.pageWidth+"></td>";     //==== 中间段 ====
                        for (k = 0; k < this.radianWidth; k++) {ss += "<td width=1 bgcolor='" + this.bgColor + "'></td>";}
                        ss += "</tr>";
//--------------- 输出中间数行 ----------------------
                        for (j = 1; j < this.radianWidth; j++) {
                              ss += "<tr height=1>";
                              for (k = 0; k < this.radianWidth-j; k++) {ss += "<td width=1 bgcolor='" + this.bgColor + "'></td>";}
                              ss += "<td width=1 bgcolor=" + this.borderColor1 + "></td>";
                              k++;
                              for (k; k < this.radianWidth; k++) {ss += "<td width=1></td>";}
                              ss += "<td width="+this.pageWidth+"> </td>";                  //==== 中间段 ====
                              for (k = 0; k < j; k++) {ss += "<td width=1></td>";}
                              ss += "<td width=1 bgcolor=" + this.borderColor3 + "></td>";
                              k++;
                              for (k; k < this.radianWidth; k++) {ss += "<td width=1 bgcolor='" + this.bgColor + "'></td>";}
                              ss += "</tr>";
                        }
//-------------- 输出标题行 -----------------------
                        ss += "<tr><td width=1 bgcolor=" + this.borderColor1 + "></td>";
                        for (k = 1; k < this.radianWidth; k++) {ss += "<td width=1></td>";}
                        ss += "<td width="+this.pageWidth+" height=" + this.titleHeight + " align=center"
                                  + " onclick='document." + this.name + ".show(" + (i+1) + ")'"
                                  + " onMouseOver=\"this.style.cursor='hand'\" nowrap>" + this.bookMarks[i].title + "</td>";
                        for (k = 0; k < this.radianWidth-2; k++) {ss += "<td width=1></td>";}
                        ss += "<td width=1 bgcolor=" + this.borderColor2 + "></td>";
                        ss += "<td width=1 bgcolor=" + this.borderColor3 + "></td></tr>";
//-------------- 输出最后 1 行 -----------------------
                        ss += "<tr height=1><td width=1 bgcolor=" + this.borderColor1+"></td>";
                        ss += "<td id=bookMarkL_" + this.name + "_"+i+" colspan=" + (2*this.radianWidth-2)
                               + " bgcolor=" + this.borderColor1 + "></td>";
                        ss += "<td width=1 id=bookMarkLastDot1_"+this.name+"_" + i + " bgcolor=" + this.borderColor2 + "></td>";
                        ss += "<td width=1 id=bookMarkLastDot2_"+this.name+"_" + i + " bgcolor=" + this.borderColor3 + "></td></tr>";
//-----------------------------------------
                        ss += "</table></td>";
                  }
                  ss += "</tr><tr><td valign=top colspan=" + this.bookMarks.length + ">";
                  for (i = 0; i < this.bookMarks.length; i++) {   //======== 输出各个书签内容层开始 =============
                        ss += "<div id=bookMarkC_" + this.name + "_" + i + " style='display:none;top:-"
                                             + (this.bookMarkHeight-this.titleHeight-this.radianWidth-1)+";'>";
                        ss += "<table width='100%' border=0 cellspacing=0 cellpadding=0>";
                        ss += "<tr height="+(this.bookMarkHeight-this.titleHeight-this.radianWidth-2)+">";
                        ss += "<td width=1 bgcolor=" + this.borderColor1 + "></td>";
                        ss += "<td bgcolor=" + this.bookMarkColor2 + " valign=top id=bookMarkX_"+this.name+"_" + i + "></td>";
                        ss += "<td width=1 bgcolor=" + this.borderColor2 + ">";
                        ss += "<td width=1 bgcolor=" + this.borderColor3 + "></td></tr>";
                        ss += "<tr height=1><td colspan=4 bgcolor=" + this.borderColor3 + "></td></tr></table></div>";
                  }
                  ss += "</td></tr></table>";
                  if (putObj) {putObj.innerHTML = ss;}
                  else {document.writeln(ss);}
//------------- 输出各个书签内容 ------------------------
                  for (i = 0; i < this.bookMarks.length; i++) {
                        this.bookMarks[i].elementLine     = eval("document.all.bookMarkL_"+this.name+"_" + i);
                        this.bookMarks[i].elementTitle    = eval("document.all.bookMarkT_"+this.name+"_" + i);
                        this.bookMarks[i].elementContent  = eval("document.all.bookMarkC_"+this.name+"_" + i);
                        this.bookMarks[i].elementContentX = eval("document.all.bookMarkX_"+this.name+"_" + i);
                        this.bookMarks[i].elementLastDot1 = eval("document.all.bookMarkLastDot1_"+this.name+"_" + i);
                        this.bookMarks[i].elementLastDot2 = eval("document.all.bookMarkLastDot2_"+this.name+"_" + i);
                        this.bookMarks[i].elementContentX.innerHTML = this.bookMarks[i].contentHTML;
                  }
//====================== 输出结束 ========================
                  this.show(showNo);
            }

Answer 2

this.show= function(n) {                                                     // 显示第n页
                  if (n==null || n<1 || n>this.bookMarks.length) {alert("只能显示 1—— " + this.bookMarks.length + " 页"); return;}
                  else {n = n-1;}
                  for (var i = 0; i < this.bookMarks.length; i++) {
                        if (i == n) {
                              this.bookMarks[i].elementTitle.style.backgroundColor = this.bookMarkColor2;
                              this.bookMarks[i].elementLine.style.backgroundColor  = this.bookMarkColor2;
                              if (i == this.bookMarks.length-1) {
                                    this.bookMarks[i].elementLastDot1.style.backgroundColor = this.borderColor2;
                                    this.bookMarks[i].elementLastDot2.style.backgroundColor = this.borderColor3;
                              }
                              else {this.bookMarks[i].elementLastDot1.style.backgroundColor = this.bookMarkColor2;
                                    this.bookMarks[i].elementLastDot2.style.backgroundColor = this.bookMarkColor2;
                              }
                              this.bookMarks[i].elementContent.style.display = "block";
                        }
                        else {this.bookMarks[i].elementTitle.style.backgroundColor = this.bookMarkColor1;
                              this.bookMarks[i].elementLine.style.backgroundColor  = this.borderColor1;
                              if (i == this.bookMarks.length-1) {
                                    this.bookMarks[i].elementLastDot1.style.backgroundColor = this.borderColor2;
                                    this.bookMarks[i].elementLastDot2.style.backgroundColor = this.borderColor3;
                              }
                              else {this.bookMarks[i].elementLastDot1.style.backgroundColor = this.borderColor1;
                              this.bookMarks[i].elementLastDot2.style.backgroundColor = this.borderColor1;
                              }
                              this.bookMarks[i].elementContent.style.display = "none";
                        }
                  }
            }//---------------- 函数载入结束 ---------------------------
            return this;
      }
      var w = new this.create(name);
      if (w != null) {eval("document." + name + " = w");}
      return w;
}//-->