2006年12月27日

绘制一棵树,如:
/*
root ->
    a
    b
    c ->
        d
        e
        f
    g ->
        h ->
            k
            m

*/

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<div id="panel">

</div>

<SCRIPT LANGUAGE="JavaScript">
<!–
function Node(parent,label){
  this.parent = parent;
  this.label = label;
  this.children = [];
  if(parent != null)
    parent.children[parent.children.length] = this;
 
  this.x = 0;
  this.y = 0;

  this.totalH = 0;
  this.totalV = 0;
  this.index = 0;

  return this;
}

function calcTotal(node,index){
  node.index = index;
  var parent = node.parent;
  if(parent == null){
    node.totalH = 1;
  }else{
    node.totalH = parent.totalH + 1;
  }

  if(node.children.length == 0){
    node.totalV = 1;
  }else{
    var result = 0;
    for(var i=0;i<node.children.length;i++){
      var child = node.children[i];
      calcTotal(child,i);
      result += child.totalV;
    }
    node.totalV = result;
  }
}

function calcPosition(node){
  var parent = node.parent;
  if(parent == null){
    node.x = 0;
    node.y = node.totalV * _V_ /2;
  }else{
    node.x = node.totalH * _H_ ;
    var y = parent.y – parent.totalV * _V_ /2;
    for(var i=0;i<node.index;i++){
      var sibling = parent.children[i];
      y += sibling.totalV * _V_ ;
    }
    y += node.totalV * _V_ /2;
    node.y = y;
  }

  for(var i=0;i<node.children.length;i++){
    var child = node.children[i];
    calcPosition(child);
  }
}

var _H_ = 50;
var _V_ = 50;

function drawNode(node){
  var element = document.createElement("DIV");
  element.style.position = "absolute";
  var text = document.createTextNode(node.label);
  element.appendChild(text);
  element.style.left = node.x;
  element.style.top = node.y;
  var panel = document.getElementById("panel"); 
  panel.appendChild(element);

  for(var i=0;i<node.children.length;i++){
    var child = node.children[i];
    drawNode(child);
  }
}

/*
root ->
    a
    b
    c ->
        d
        e
        f
    g ->
        h ->
            k
            m

*/
var root = new Node(null,"root");
var a = new Node(root,"a");
var b = new Node(root,"b");
var c = new Node(root,"c");
var d = new Node(c,"d");
var e = new Node(c,"e");
var f = new Node(c,"f");
var g = new Node(root,"g");
var h = new Node(g,"h");
var k = new Node(h,"k");
var m = new Node(h,"m");

calcTotal(root,0);
calcPosition(root);
drawNode(root);

//–>
</SCRIPT>
</BODY>
</HTML>

效果:

连线都没画,懒人呀~

2006年12月20日

jquery-trim.js

String.prototype.mylength = function(){
  var arr = this.match(/[\u00FF-\uFFFF]/gi);
  if(!arr || arr==null)
      return this.length;
  var len = this.length + arr.length;
  return len;
}

String.prototype.mysubstring = function(limit){
  var len = 0;
  var arr = [];
  for(var i=0;i<this.length;i++){
    var it = this.substring(i,i+1);
    len += it.mylength();
    if(len > limit)
        break;
    arr[arr.length] = it;
  }

  var result = arr.join("");
  return result;
}

jQuery.fn.limit = function(){
  $(this).each(function(){
    
    var mylimit = parseInt($(this).attr("limit"));
    var applied = $(this).attr("applied");
    if(applied)
        return;
    var text = $(this).text();
    var original_text = text;
    if(text.mylength() > mylimit){
      text = text.mysubstring(mylimit);
      text += "…";
      text = "<SPAN style=\"position:relative\"><SPAN class=’tooltip’>" + original_text + "</SPAN>" + text + "</SPAN>";
      $(this).html(text);
      $(this).mouseover(function(){
            $(this).find(".tooltip").css("display","");
          });
      $(this).mouseout(function(){
            $(this).find(".tooltip").css("display","none");
          });
      $(this).find(".tooltip")
          .css({ ‘display’:'block’,
                 ‘position’:'absolute’,
                 ‘top’:'2em’,
                 ‘left’:'2em’,
                 ‘width’:'15em’,
                 ‘border’:'1px solid #0cf’,
                 ‘background-color’:'#cff’,
                 ‘color’:'#000′,
                 ‘text-align’:'center’,
                 ‘word-wrap’:'break-word’,
                 ‘word-break’:'break-all’})
          .css("display","none");
      $(this).attr("applied",true);
    }
  
  });
}

function apply_limit(){
  $("[@limit]").limit();
}

$(document).ready(apply_limit);

html中这样用:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript" src="jquery.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="jquery-trim.js"></SCRIPT>
</HEAD>

<BODY>
这是一行 <br><br>
这是另一行 <span limit="8">这是超级长昂昂昂昂昂昂昂昂昂昂昂的字符串</span>
</BODY>
</HTML>

抓图:

注意到html中<span limit="8">了吗? 后面的文字按“中文两个字符,英文一个字符”的规则截断了,随后只显示…,鼠标移上去,出现完整信息的提示。

2006年12月07日

看银狐999老大本本的桌面用的日程管理软件不赖,原来叫Wallcal,下载用了两天,感觉只能在日期格子里写字,憋屈,胡永登同学推荐了active desktop calendar,搞下来看,果然粉爽,有notes/alarms/tasks一应俱全,还有layers/contacts/pictures的管理。与Wallcal相比,它在桌面的右侧分了两栏显示notes和tasks,只显示最近两日的信息,空间利用很有效。它们都是桌布的外观,半透明效果,几乎不影响桌面图标的使用。

vista也带了日历。

我相信这种"桌面portal"的潜力很大,大家快来抢地盘呀!

2006年12月04日

总结一下rails安装的几种方式,所有内容均以 http://www.rubyonrails.org/down 为准。
当然,第一步是安装ruby,略。

一、常规方式:远程gem
gem install rails –include-dependencies

安装时需要联网。

二、 本地gem方式
仔细分析远程gem方式的安装,发现它首先下载并安装其依赖的其它gem包,它们依次是:
activesupport
activerecord
actionpack
actionmailer
actionwebservice
最后才是 rails
因此,到rubyforge.org分别下载这六个包,像 gem install activesupport –local 依次安装就可以了

三、 zip方式
从http://www.rubyonrails.org/down 上,有stand-alone packages的链接,点进去可以下载zip方式的rails。
解压后是一个空的rails工程,在它上面就可以直接创建rails应用了,运行 ruby script/server 可运行。
这种方式与前两者的区别在于,前两种方式将rails的六个gem安装到了ruby的目录下,而这种方式是放到了 解压目录/rails/vendor/rails下。
昨天按这种方式试报了错误,发生在 解压目录/rails/config/environment.rb的第8行,进去一看,咦,怎么ruby代码有<%xxx%>的东东呢,注释掉,再试,好使了。

四、 InstantRails方式
到 http://instantrails.rubyforge.org/ 下载InstantRails,它把ruby、rails、mysql、apache和两个rails应用打包到一起,解压不需配置就能运行了。只支持windows环境。