极湖 - by OU

用土办法记忆可编辑 div 内的光标位置

Monday, 5. May 2008, 15:21:12

可编辑 div 内光标位置的记忆和恢复实在是太难，情急之下想了个很土的办法：做一个不可见的 span 紧跟光标，在光标位置插入内容的时候只需找到这个 span 即可。

程序如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>(jQuery) Cursor Position Test </title>
<script type="text/javascript" src="jquery.pack.js"></script>
<style type="text/css" media="all">
#editor {
        width:500;
        height:100;
        margin:10px;
        padding:2px;
        border:1px solid #0000FF;
        overflow:auto;
}
#info {
        width:500;
        height:200;
        margin:10px;
        padding:2px;
        border:1px solid #00FF00;
        background-color:#F8F8F8;
        overflow:auto;
}
#caret_pos {
        display:none;
        cursor:default;
}
</style>
<script type="text/javascript">
    function trace(obj) {
        if(typeof(obj) == 'object') {
            for(var x in obj) {
                $('#info').append(x + '<br/>');
            }
        } else {
            $('#info').append(obj + '<br/>');
        }
    }
        
    $(document).ready(function(){
        var caretRange;
        //update Caret Pos
        function updateCaretPos(e) {
                caretRange = document.selection.createRange();
                if(caretRange.text != '') {
                        return;
                }
                var caretHtml = '<span id="caret_pos"></span>';
                if($('#caret_pos').length > 0) {
                        $('#caret_pos').remove();
                }
                caretRange = document.selection.createRange();
                caretRange.pasteHTML(caretHtml);
                caretRange.collapse(true);
        }

        //insert HTML at Caret Pos
        function insertAtCaret(sHtml) {
                $('#caret_pos').before(sHtml);
                var caret = document.getElementById('caret_pos');
                var txtRange = document.body.createTextRange();
                txtRange.moveToElementText(caret);
                txtRange.select();
        }
        $('#editor').keyup(function(e){
                updateCaretPos(e);
        }).click(function(e){
                updateCaretPos(e);
        }).focus(function(e){
                updateCaretPos(e);
        });
            
        $('#insert').click(function(e){
                insertAtCaret($('#instext').val());
        });
        $('#editor_html').click(function(e){
                $('#info').text($('#editor').html());
        });
        $('#clear_info').click(function(e){
                $('#info').html('');
        });
    });
</script>
</head>
<body>
        <div><h2>Caret Position Test</h2></div>
    <div id="editor" contentEditable="true">
        <span>start</span>
    </div>
    &nbsp;&nbsp;
    <input type="button" id="editor_html" value="Html in Editor" />
    &nbsp;&nbsp;
    <input type="text" id="instext" value="" />
    &nbsp;
    <input type="button" id="insert" value="Insert" />
    &nbsp;&nbsp;
    <div id="info">
    </div>
    &nbsp;&nbsp;
    <input type="button" id="clear_info" value="Clear Info" />
</body>
</html>

注：以上程序仅适用于IE。Mozilla系浏览器只需修改pasteHTML部分的代码

0 Comments

CodeMirror：浏览器内的高亮文本编辑器

Saturday, 3. May 2008, 04:30:16

编辑器, Editor, JavaScript

因为要做编辑器，所以找了很多 OpenSource 的 WYSIIWYG 编辑器代码，当然都是 JavaScript。无意间发现一个好东西——CodeMirror，看了这个东西，我吃惊不少，因为它几乎已经达到了桌面程序的水平，写程序代码能够高亮彩显（目前支持 HTML 和 Javascript），还有自动缩进、匹配提示等功能，而且比较流畅。

看了一下 CodeMirror 的代码，觉得很不一般，称得上短小精悍，一看就知道作者的 JavaScript 功底相当深厚，称得上是大师级的水平。作者在他网站上还发布了一本 JavaScript 的教程——Eloquent JavaScript，我看也是个难得的东西，初学者或者是有经验的开发人员都可以参考。

用 JavaScript 写的类似编辑器还有

以上列表也是 CodeMirror 的作者介绍的，看看这些东西，也许您会和我一样惊叹：JavaScript 实在是神奇！

0 Comments

jQuery 鼠标位置测试

Friday, 2. May 2008, 07:11:08

jQuery, Mouse, JavaScript

废话不多说，直接贴程序：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Mouse Test</title>
<script type="text/javascript" src="jquery.pack.js"></script>
<style type="text/css" media="all">
    table.simple_grid {
        width:100%;
        height:100%;
        margin:0;padding:0;
        border:1px dashed #FF0000;
        border-collapse:collapse;
        border-spacing:0;
    }

    table.simple_grid td {
        border: 1px dashed #FF0000;
        text-align:center;
        vertical-align:middle;
    }
</style>
<script type="text/javascript">
    function getMousePosition(e){
        var x = 0, y = 0;
        var e = e || window.event;
        if (e.pageX || e.pageY) {
            x = e.pageX;
            y = e.pageY;
        } else if (e.clientX || e.clientY) {
            x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
        }
        return { 'x': x, 'y': y };
    }

    $(document).ready(function(){
        $('#mouse_test').mousemove(function(e){
            var o =  $(this).offset();
            var oX = o.left;
            var oY = o.top;
            $('#lblOriginXY').html(oX + ',' + oY);

            var cX = oX + $(this).width()/2;
            var cY = oY + $(this).height()/2;
            $('#lblCenterXY').html(cX + ',' + cY);

            pos = getMousePosition(e);
            var mouseX = pos.x;     //- this.offsetLeft;
            var mouseY = pos.y;     //- this.offsetTop;
            $('#lblMouseXY').html(mouseX + ',' + mouseY);

            if(mouseY < cY) {
                if(mouseX < cX) {
                    $('#lblInfo').html('左上').hide().fadeIn();
                } else {
                    $('#lblInfo').html('右上').hide().fadeIn();
                }
            } else {
                if(mouseX < cX) {
                    $('#lblInfo').html('左下').hide().fadeIn();
                } else {
                    $('#lblInfo').html('右下').hide().fadeIn();
                }
            }
        });
    });
</script>
</head>
<body>
    <div id="mouse_test">
        <table class="simple_grid">
            <tr height="50%">
                <td width="50%">Origin：<label id="lblOriginXY"></label></td>
                <td width="50%">Center：<label id="lblCenterXY"></label></td>
            </tr>
            <tr height="50%">
                <td width="50%">Mouse：<label id="lblMouseXY"></label></td>
                <td><label id="lblInfo"></label></td>
            </tr>
        </table>
    </div>
</body>
</html>

0 Comments

利用 ContentEditable 做 WYSIWYG 编辑器

Sunday, 27. April 2008, 12:50:30

WYSIWYG, JavaScript, DHTML

接下来要做的项目，需要在网页中实现一个拖方式的 WYSIWYG 编辑器，找了很多开源的基于 JavaScript 的编辑器，都难以实现复杂的拖放功能，因为它们几乎都是清一色使用 iframe 的 DesignMode="on" 属性，而跨 frame 的拖放非常困难，在网上很难找到现成的例子。

后来发现除了 Firefox 的其他浏览器，几乎都支持 div 的 ContentEditable="true" 属性，而 Firefox 3 也将支持该属性，所以决定用 div 做编辑器。刚开始觉得不难，然而一开始做就遇到不少难点，最主要是：

输入焦点的控制
光标位置的控制
选取区域的控制

这几个问题不解决，很难做出令人满意的编辑器。因此，正在努力解决以上问题。

0 Comments

jQuery plugin 改造：Select Box replacement

Saturday, 26. April 2008, 08:51:26

jQuery, Plugin, JavaScript

Select Box replacement 是一个用图片和text输入框代替select的Plugin，发现之后想用这个Plugin，试用过程中发现有不少问题，所以修改了一下代码。

由于改动比较多，就不一一细说了。

修改后的代码可以从这儿下载。

0 Comments

让 secureCRT 定时发送命令的脚本

Thursday, 17. April 2008, 13:58:28

secureCRT，JavaScript, Command

想让secureCRT在一定时间后发送命令，为此做了一个脚本如下：

var startTime = (new Date()).getTime();
var afterSeconds = 60;
var executed = false;

function main() {
    crt.Screen.Send("date\n");
    while(!executed) {
        sendCommand();
    }
}

function sendCommand() {
    if((new Date()).getTime() > (startTime + (afterSeconds*1000))) {
        crt.Screen.Send("echo It is time to execute command\n");
        crt.Screen.Send("date\n");
        executed = true;
    }
}

保存成文件，然后通过菜单 script -> Run 选择该文件即可。

0 Comments

s9y

Thursday, 3. April 2008, 07:47:50

s9y, Serendipity, Blog

s9y 是用 php 写的 Blog 系统，同时具有一些基本的 CMS 功能。在众多的开源 Blog 系统中，这是我最喜欢的（也就是说，我并不是很喜欢 Wordpress ）。

Serendipity 1.3 已于3月18日发布，尽管很忙，没有时间同时写几个 Blog，出于对这个系统的喜欢，我还是用它搭了一个系统：
http://weblog.geelake.com ，有兴趣的时候才会去鼓捣一下这个东西。

s9y 是 Serendipity 的缩写，因为 Serendipity 这个单词很长，s 和 y 之间总共有 9 个字符，因此缩写为 s9y 。

看到 s9y 这个缩写，也许您还会想起：

i18n = internationalization
l10n = localization

金庸小说中，有一个人自封头衔“古往今来剑法第一拳脚第一内功第一暗器第一的大英雄大豪杰大侠士大宗师”，这个头衔，也可以如法炮制，缩短成“古31师”。

慈禧太后死后上的谥号为“孝钦慈禧端佑康颐昭豫庄诚寿恭钦献崇熙配天兴圣显皇后”，总共25字，恐怕没几个人能把这25个字一个不漏的记得，因此也应该缩写为“孝23后”。

0 Comments

用 tar 和 NFS 实现网络文件快速拷贝

Wednesday, 2. April 2008, 02:08:46

tar, Linux, Command, NFS

(本文部分翻译自： fast network file copying using tar and nfs)

先在远程机器（例如：192.168.1.3）配置 NFS 的输出路径，允许从本地拷贝文件（例如：/remotedir）。

在本地机器上创建新的空路径，然后 mount 上远程目录。命令如下：

mkdir /remotedir
mount 192.168.1.3:/remotedir /remotedir

完成以上步骤之后，即可在本地机和远程机之间拷贝文件：

tar -c localdir/ | tar -C /remotedir/ -xv

该命令将本地当前路径 localdir 之下的内容全部拷贝到远程机器的 /remotedir 之下。

注：拷贝通常用 cp 命令，以上用的是 tar，是不是更快，需要您自己验证。

0 Comments

用 WinDbg 分析和排除 Windows 系统故障

Tuesday, 1. April 2008, 01:34:32

Windbg, Minidump, WINDOWS

用 WinDbg 分析和排除 Windows 系统故障

最近工作用的电脑频繁出故障，出现系统突然崩溃，重启动的时候总是检查磁盘等现象。从现象上看，似乎是磁盘出了问题，因为这台电脑已经用了四年以上，磁盘老化要报废也在情理之中。

上周末清理了一下电脑，并装上XP SP3 (RC2版)，之后，系统好像稳定了一些，可还是有错误发生。在还没有确认硬盘报废之前，我觉得还是该查找和修复系统错误，于是在网上查找相关信息。

在系统目录下发现了一个叫 Minidump 的目录，下面有一些后缀是 .dmp 的文件：

2008/03/21 22:20 90,112 Mini032108-01.dmp
2008/03/26 17:44 90,112 Mini032608-01.dmp
2008/03/27 09:21 90,112 Mini032708-01.dmp
2008/03/27 09:22 90,112 Mini032708-02.dmp
2008/03/27 09:23 90,112 Mini032708-03.dmp
2008/03/27 09:51 90,112 Mini032708-04.dmp
2008/03/27 10:28 90,112 Mini032708-05.dmp
2008/03/28 13:39 90,112 Mini032808-01.dmp
2008/03/28 13:42 90,112 Mini032808-02.dmp
2008/03/28 13:43 90,112 Mini032808-03.dmp
2008/03/28 18:42 90,112 Mini032808-04.dmp
2008/03/31 21:09 90,112 Mini033108-01.dmp
2008/03/31 21:11 90,112 Mini033108-02.dmp

经确认，这些是系统出故障时候生成的 Dump 文件。

找到一篇文章《How to solve Windows system crashes in minutes》，教你怎么用 Windbg 来分析Windows 的 Dump 文件。

文章很长，连 Windbg 的安装都介绍了，我只是粗略的看了一下，最后找到两个命令：

!analyze –v
lmv

文章主要就是介绍怎样用这两个命令分析 Dump 文件。

启动 Windbg，选择 File -> Open Crash Dump，之后选择一个 Dump 文件，载入，接下来就用命令 !analyze –v 和 lmv 进行分析。

目前发现两个问题，一个由 d347bus.sys (Daemon Toools 的虚拟驱动)引起，另一个由 kmixer.sys （应该是是声卡驱动）引起。

具体的系统错误，目前还在查找分析，也不知道能否修复。以上分析系统错误的方法，以后也有用，因此记录一下。

0 Comments

1 2 3 4 5 ... 37 Next »

Showing posts 1 - 10 of 364.