jQuery - 极湖

Posts tagged with "jQuery"

用土办法记忆可编辑 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

jQuery plugin 改造：Select Box replacement

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

jQuery, Plugin, JavaScript

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

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

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

0 Comments

脂砚斋重评石头记

Tuesday, 22. January 2008, 02:34:30

jQuery, 红楼梦, 在线书籍, JavaScript ...

没事又胡乱做了个小东西——《脂砚斋重评石头记》，该书在网上多处有转载，为什么还要做呢？是因为所有的转载都是批注和正文夹杂在一起，看起来不是很清爽，而且累人。因此我用程序把批注部分处理了一下，取第一个字，做成红色链接，鼠标移到上面，才显示批注内容。经过这样的处理，网络版《脂评石头记》看起来清爽多了，相信会得到“红迷”的欢迎。

网页截图如下：

网址1：
http://geedigg.com/shitouji/
网址2：
http://geelake.com/shitouji/

本网页用 JavaScript + jQuery 实现 Ajax 和显示特效，如果您对程序感兴趣，可以自己查看网页代码，代码很简单。

0 Comments

二十四点

Thursday, 20. December 2007, 10:35:35

jQuery, 游戏, 算法, 数学 ...

这些天研究排列组合的算法，是为了做一个“二十四点”的小程序。
经过几天努力，总算做出了可以自动取得正确算式的程序，就在此发表一下。

程序截图如下：

网址1：
http://geedigg.com/point24/
网址2：
http://geelake.com/point24/

因为用JavaScript做程序，还是借用了jQuery，如果您对程序本身感兴趣，可以自己查看网页代码。

技术要点：
数组操作技巧
排列组合算法
正则表达式
网页元素拖放处理

从今往后,不论你身在何地，如果有人考你24点的算式，只需打开这个网页，答案很快就有啦。

0 Comments

jQuery 扩展小试：取得列表选中项属性

Friday, 7. December 2007, 10:07:34

jQuery, Plugin, JavaScript

想要以 jQuery 的方式取得列表中被选中项的文字，找来找去找不到现成的方法，只好现做一个：

(function($){
    /**
     * Get selected option's property
     */
    $.fn.getSelectedProperty = function(property) {
        var arrValue = Array();
        var a=0;
        this.each( function() {
            for (var i=0; i < this.options.length; i++) {
                if (this.options[i].selected == true) {
                    arrValue[a] = this.options[i][property]; 
                    a++;
                }
            }
        });
    
        if(arrValue.length > 1) {
            return arrValue;
        } else if(arrValue.length == 1) {
            return arrValue[0];
        }
        return '';
    };
})(jQuery);

以上函数，单选返回字符串，多选返回数组。

用法例：

alert($("#select_box_id").getSelectedProperty('text'));

0 Comments

改造一个 jQuery 的文件上传组件

Thursday, 6. December 2007, 10:12:06

JavaScript, upload, jQuery

为了实现 Ajax 方式的文件上传，在网上找到一个 AjaxFileUpload 的 jQuery 插件，能用，不过还是有一些不足，比如不能在文件上传的同时指定其他参数（hidden），还有一些不大不小的 Bug，于是修改了一下其代码。修改之后用法如下：

首先在 HTML 文件头部引入 jQuery 以及该插件：

<script type="text/javascript" src="jquery.pack.js"></script>
<script type="text/javascript" src="jquery.ajaxupload.js"></script>

然后写一个函数：

//*******************************************************
// Ajax文件上传
//*******************************************************
function uploadFile(fileId) {
    $("#uploading").ajaxStart(function(){
        $(this).show();
    }).ajaxComplete(function(){
        $(this).hide();
    });
    $.ajaxFileUpload({
        url: 'upload.php',
        secureuri: false,
        fileElementId: fileId,
        dataType: 'json',
        success: function (data, status) {
            alert("上传成功。\n" + e);
        },
        error: function (data, status, e) {
            alert("发生错误！\n" + e);
        },
        extFields: {
            user : 'guest',
            comment : '好'
        }
    });
    
    return false;
}

和原来相比，增加了 extFields 这个参数。
其中的 upload.php 就不在这儿贴代码了，如果不会写这个，就说不过去了。

最后是调用：

$("#upload_button").click(function () {
    uploadFile("my_file");
});

效果马马虎虎，还算过得去。

下载：
jquery.ajaxupload.js

0 Comments

道德经

Sunday, 4. November 2007, 04:20:05

jQuery, 道德经, JavaScript, 老子

做了逐句自动播放的《论语》，接着就想炮制自动播放的《道德经》。

《道德经》的结构和《论语》有所不同，因此想做成不同风格的东西，可是总也找不到新的创意。不经意在 Opendesigns.org 上发现一款古朴的设计，忍不住就把他炮制成自动播放的《道德经》了。

默认设置的时间间隔是8秒，也就是说，只需用时648秒，即可翻完九九八十一章《道德经》，不到11分钟。

以下是截图：