网站首页 | 网页制作 | 网络编程 | 图形图象 | 冲浪宝典 | 操作系统 | 软件教学 | 网络安全 | 认证考试 | 下载中心 | 游戏下载
| 网页制作首页 | HTML/CSS | Dreamweaver | FrontPage | Javascript | DHTML | 心得技巧 | 网站运营 |
您现在的位置: 超人气学院 >> 网页制作 >> Dreamweaver >> 文章正文 用户登录 新用户注册
仿DW8代码折叠的HTML编辑器, Dreamweaver 使用           
仿DW8代码折叠的HTML编辑器, Dreamweaver 使用
作者:佚名 文章来源:不详 点击数: 更新时间:2007-1-2 0:21:43
【摘 要】本文将详细介绍如何仿DW8代码折叠的HTML编辑器。

测试版(仅支持ie5.5+,且一个页面里只能放一个)
收集意见

功能:
1.动态分析,智能折叠,ctrl+Enter强制重建
2.tab键输出两个空格(若选区为多行,各行前加入两空格,同时按shift键反之),Ctrl+T替换\t为俩空格
3.回车自动缩进
4.Ctrl+W预览

限制:
1.取消了右键菜单(复制剪切粘贴可使用键盘)
2.暂不支持文本拖放
3.Ctrl+Z将撤销所有操作
4.块起止测试并不严格,且未考虑vbscript
5.运行效率有待改进

<style>
body{
  text-align:center;
  }
#oTxt,#oBox{
  height:440px;
  border:none;
  border:1px solid #666666;
  }
#oTxt{
  width:740px;
  color:#333333;
  background-color:#f0f0f0;
  font-family:verdana;
  font-size:11px;
  line-height:13px;
  margin-left:16px;
  overflow:auto;
  border-left:none;
  scrollbar-arrow-color:#666666;
  scrollbar-base-color:#666666;
  scrollbar-darkshadow-color:#f0f0f0;
  scrollbar-face-color:#f0f0f0;
  }
#oBox{
  position:absolute;
  width:15px;
  overflow-y:hidden;
  background-color:#e0e0e0;
  padding-top:1px;
  margin-top:1px;
  padding-bottom:19px;
  border-right:none; 
  }
</style>
<script>
/*
  测试版(仅支持ie5.5+,且一个页面里只能放一个)
  收集意见
 
  功能:
  1.动态分析,智能折叠,ctrl+Enter强制重建
  2.tab键输出两个空格(若选区为多行,各行前加入两空格,同时按shift键反之),Ctrl+T替换\t为俩空格
  3.回车自动缩进
  4.Ctrl+W预览
 
  限制:
  1.取消了右键菜单(复制剪切粘贴可使用键盘)
  2.暂不支持文本拖放
  3.Ctrl+Z将撤销所有操作
  4.块起止测试并不严格,且未考虑vbscript
  5.运行效率有待改进
*/
window.onload=function(){
  oBox.mLine="http://free.txd.cn/mozart0/img/line.gif";
  oBox.mPlus="http://free.txd.cn/mozart0/img/plus.gif";
  oBox.mMinus="http://free.txd.cn/mozart0/img/minus.gif";
  oBox.mEnd="http://free.txd.cn/mozart0/img/end.gif";
  oBox.isPlus=function(o){
    return /plus\./.test(o.src);
    }
  oBox.isMinus=function(o){
    return /minus\./.test(o.src);
    }
  oBox.isLine=function(o){
    return /line\./.test(o.src);
    }
  oBox.isEnd=function(o){
    return /end\./.test(o.src);
    }
  oBox.childrenVisible=function(index){
    var t=this.children[index];
    while(t.style.display=="none")
      t=t.nextSibling;
    var x=t.offsetTop/t.height;
    while(x<index){
      t=t.nextSibling;
      if(t.style.display!="none")
        x++;
      }
    return t;
    }
  oBox.hideBlock=function(index){
    var n=1,x=1;
    var c=this.children;
    c[index].src=this.mPlus;
    while(++index<c.length&&n){
      var t=c[index];
      if(t.style.display!="none"){
        x++;
        t.style.display="none";
        }
      if(this.isEnd(t))
        n--;
      else if(!this.isLine(t))
        n++;
      }
    return x;   
    }
  oBox.showBlock=function(index,b){
    var index0=index,c=oBox.children;
    c[index].src=b?this.mMinus:this.mPlus;
    c[index].style.display="block";
    index++;
    if(b)
      while(index<c.length){
        var t=c[index];
        if(this.isLine(t)){
          t.style.display="block";
          index++;
          }
        else if(this.isEnd(t)){
          t.style.display="block";
          break;
          }
        else
          index+=this.showBlock(index,this.isMinus(t))
        }
    else{
      var n=1

[1] [2] [3] [4] [5] 下一页

[ 收藏此页到: 天天|和讯|博采|ViVi|狐摘|我摘|天极 ] 文章录入:kinda    责任编辑:kinda 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    专 题 栏 目
    最 新 热 门
     DreamweaverMX2004 多[338]
     用DW MX制作新闻公告系[203]
     Dreamweaver MX2004视[122]
     DW快捷键[119]
     DreamweaverMX2004 多[110]
     菜鸟学用DreamWeaver做[110]
     dddddddddddddddddd[109]
     下拉菜单全攻略-用Dre[92]
     Dreamweaver的使用[87]
     Dreamweaver MX中应用[84]
    相 关 文 章
    制作DW里可控制的横向滚动
    DW中加入1像素竖直线的办法
    DW MX和ACCESS一起制作企业
    谈DW状态栏
    学习DW技巧:属性检查器和
    实现在DW中按下左右光标时
    Google推进Urchin与AdWrod
    提高网站访问量的必胜之道
    体验DWMX2004CSS新功能
    在DW MX 2004中用CSS轻松实
    Css在dw4中的属性
    仿DOS窗口的HTM代码
    教您去掉DW2004中表格辅助
    《UndocumentedWindows200
    《UndocumentedWindows200
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)