Ross Wan's World!

Python, Ajax, PHP and Linux.

Archive for the ‘jQuery’ Category

jQuery: 表格排序插件

Posted by Ross Wan 于 2009/01/11

这是本人写的一个简单的表格排序插件。支持字符串和数字的排序。

代码

/*
* jtablesortable plugin for jQuery。表格排序插件
*
* @author mrwlwan#gmail.com
*/
(function($){
    // 定义可排序的数据类型,以及所对应的排序方法
    var sortFuns = {
        'default': sortDefault,
        'string': sortDefault,
        'num': sortNum,
        'date': sortDefault,
        'none': null
    };
    // 二维数组排序的默认比较函数
    function sortDefault(item1, item2){
        if(item1[1] == item2[1]){
            return 0;
        }
        if(item1[1] > item2[1]){
            return 1;
        }
        if(item1[1] < item2[1]){
            return -1;
        }
    }

    // 二维数组排序的数字比较函数
    function sortNum(item1, item2){
        item1[1] = parseFloat(item1[1]);
        item2[1] = parseFloat(item2[1]);
        return sortDefault(item1, item2);
    }

    // 表格排序函数
    function sortTable(jRows,sortFun, col, jThis){
        // 创建一临时的二维数组,元素数组的第一个元素是 jRows 行的索引,第二个元素是该行的 col 列的值
        var tempArray = [];
        for(var i=0;i<jRows.length;i++){
            tempArray.push([i, $.trim(jRows.eq(i).children('td').eq(col).text())]);
        }
        // 对 tempArray 数组进行排序
        tempArray.sort(sortFun);
        // 重排表格行
        for(var i=0;i<tempArray.length;i++){
            jRows.eq(tempArray[i][0]).appendTo(jThis);
        }
    }

    // 表格反转函数
    function reverseTable(jRows, jThis){
        $.each(jRows.get().reverse(), function(index, item){
            $(item).appendTo(jThis);
        });
    }

    //////////////////////////////////////////////////

    $.fn.extend({
        // 参数是可变的
        jtablesortable: function(){
            // 取得参数数组
            var args = arguments;
            // 设置当前 this 的一个引用。用于部分函数内部
            var jThis = this;

            // 设置 tr 对象样式
            this.find('tr').css({
                cursor: 'default'
                // 设置 thead 样式
            }).eq(0).css({
                cursor: 'pointer'
                //
            }).children().each(function(index, el){
                // 将当前项的索引保存到当前项对象的数据里
                $(el).data('col', index);
                // 取得当前项的排序方式
                var sortFun = 'default';
                if(index < args.length && ($.trim(args[index]) in sortFuns)){
                    sortFun = $.trim(args[index]);
                }
                // 如果为 none,表示当前项不进行排序操作
                if(sortFun == 'none'){
                    return;
                }
                // 将当前项的排序方式保存到当前项对象的数据里
                $(el).data('sortfun', sortFun);
                // 添加图标,并且处理单击事件
                $(el).append($('<img class="itemimg000" src="bg.gif"/>')).click(function(){
                    // 取得被单击项的索引值
                    var col = $(this).data('col');
                    // 取得当前表格的所有列
                    var jRows = jThis.children('tbody').children('tr');
                    // 取出 this 对象 sortcol 里的值,并判断是否该列上次进行排序过。如果是,则直接调用表格反转函数
                    if(jThis.data('sortcol') == col){
                        // 处理图标。先对当前排序是升序还是降序当出判断
                        var desc = $(this).data('desc');
                        var sortImg = desc ? 'asc.gif' : 'desc.gif';
                        $(this).children('.itemimg000').attr('src', sortImg);
                        $(this).data('desc', !desc);
                        // 反转表格
                        reverseTable(jRows, jThis);
                        return;
                    }
                    // 处理图标
                    $(this).parent('tr').children('td, th').eq(jThis.data('sortcol')).children('.itemimg000').attr('src', 'bg.gif');
                    $(this).children('.itemimg000').attr('src', 'desc.gif');
                    // 设置当前为降序
                    $(this).data('desc', true);
                    // 将当前列的索引保存到 jThis 对象的数据里
                    jThis.data('sortcol', col);

                    // 进行排序
                    sortTable(jRows, sortFuns[$(this).data('sortfun')], col, jThis);
                });
            });
        }
    });
})(jQuery);

用法

$('#tableid').jtablesortable('default', 'num', 'string', 'date', 'num', 'none');

参数指定对应列的数据类型,插件会根据不用的数据类型选择不同的方法来进行排序。支持的类型有 default(默认的字符串排序方法)、string(字符串)、num(数字)、date(日期)。还有一个是 none,表示对应列不进行排序。

注: 某数据类型还未实现,可能在以后会跟进。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+ 。

Posted in Ajax, Javascript, jQuery | Tagged: , , , | Leave a Comment »

imgslideshow: 基于 jQuery 的图片幻灯片插件

Posted by Ross Wan 于 2008/12/11

现在,越来越多的网站首页,都以放置一个图片幻灯片来显示”头条”内容。于是,为了方便使用,制作了一个功能简单的图片幻灯片插件。

代码

(function($){
    $.fn.extend({
        'imgSlideShow': function(options){
            // 扩展参数
            var op = $.extend({
                'itemclass': null,
                'desclass': null,
                'delay': 2000
            }, options);
            // 设置窗口的样式
            this.css({
                position: 'relative',
                overflow: 'hidden'
            });
            // 设置图片项的样式
            this.children('.' + op.itemclass).css({
                clear: 'both',
                display: 'none'
            });
            // 添加数字标签项窗口
            $('<div id="imgslideshow_label0000"></div>').appendTo(this).css({
                position: 'absolute',
                bottom: '2px',
                right: '2px',
                width: '100%',
                height: '22px',
                'z-index': 10000,
                overflow: 'hidden'
            });
            // 取得所有图片项
            var items = $('.' + op.itemclass, this);
            // 图片项的数目
            var itemsLength = items.length;
            // 当前的图片项索引
            var curItemIndex = 0;
            // 当前的 timeout 函数返回值
            var timeoutReturn;

            // 添加数字标签项
            for(var i=itemsLength-1;i>=0;i--){
                $('<div class="label0000" id="label0000' + i + '">' + (i + 1) + '</div>').appendTo('#imgslideshow_label0000').css({
                    float: 'right',
                    width: '20px',
                    height: '20px',
                    'line-height': '20px',
                    'text-align': 'center',
                    'font-weight': 'bold',
                    'background-color': '#EFEBD6',
                    'opacity': 0.8,
                    'border': '1px solid #000',
                    'cursor': 'pointer',
                    'margin-left': '2px'
                    // 标签项的单击事件
                }).click(function(e){
                    // 停止当前的图片项动画并将其隐藏和设置回透明度为1
                    items.eq(curItemIndex).stop().hide().css({
                        opacity: 1
                    });
                    // 阻止事件流
                    e.stopPropagation();
                    // 暂停当前的 timeout 函数
                    clearTimeout(timeoutReturn);
                    // 设置标签项的样式
                    $('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
                    items.eq(curItemIndex).hide();
                    $('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
                    // 从当前的索引开始,重新开始图片动画
                    curItemIndex = parseInt($(this).text()) - 1;
                    imgSlideShowProcess();
                });
            }
            // 图片动画执行函数
            var imgSlideShowProcess = function(){
                $('#label0000' + curItemIndex).css('background-color', '#FF8210');
                items.eq(curItemIndex).fadeIn(300, function(){
                    timeoutReturn = setTimeout(imgFadeOut, op.delay);
                });
            };
            // 淡出图片
            var imgFadeOut = function(){
                items.eq(curItemIndex).fadeOut(1, function(){
                    $('#label0000' + curItemIndex).css('background-color', '#EFEBD6');
                    curItemIndex = (curItemIndex + 1) % itemsLength;
                    imgSlideShowProcess();
                });
            };
            // 开始图片动画
            imgSlideShowProcess();

            return this;
        }
    });
})(jQuery);

使用示例

<html>
    <head>
        <script type="text/javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript" src="jquery-imgslideshow.js"></script>
        <script type="text/javascript">
            $(function(){
                $('#container').imgSlideShow({itemclass: 'item', 'delay': 3000})
            });
        </script>
    </head>
    <body>
        <div id="container">
            <div class="item">
                <img src="imgs/1.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/2.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/3.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/4.jpg"/>
            </div>
            <div class="item">
                <img src="imgs/5.jpg"/>
            </div>
        </div>
    </body>
</html>

可选参数 delay 是设置每幅图片的显示时间。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+

Posted in Ajax, Javascript, jQuery | Tagged: , , , | 1 Comment »

pyquery: Python 中的 jQuery

Posted by Ross Wan 于 2008/12/09

别误会,这不是一个可以将 Python 解释为 javascript 的库(类似于 GWT)。pyquery 是一个以 jQuery 的方式处理 xml 文档的库。

使用 PyQuery 类来加载一个 xml 文档 ──── 可以来自符合 xml 格式的字符串、lxml 文档或者 url:

>>> from pyquery import PyQuery
>>> from lxml import etree
>>> d = PyQuery("<html></html>")
>>> d = PyQuery(etree.fromstring("<html></html>"))
>>> d = PyQuery(url='http://google.com/')
>>> d = PyQuery(filename=path_to_html_file)

现在,就可以用 jQuery 的方式来处理 xml 文档:

>>> d("#hello")
[<p#hello.hello>]
>>> p = d("#hello")
>>> p.html()
'Hello world !'
>>> p.html("you know <a href='http://python.org/'>Python</a> rocks")
[<p#hello.hello>]
>>> p.html()
'you know <a href="http://python.org/">Python</a> rocks'
>>> p.text()
'you know Python rocks'

使用方式与 jQuery 是完全一样的,具体可以参阅 jQuery 的官方文档:

Posted in jQuery, Python | Tagged: , , , | Leave a Comment »

jQuery: 页面 Mask

Posted by Ross Wan 于 2008/12/07

何为页面 Mask (遮罩)?看过 jQuery 的 Lightbox 插件的一定不会陌生。就是在页面上建一个透明层遮盖住页面的全部内部。在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask。因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用。

代码

(function($){
    $.extend({
        documentMask: function(options){
            // 扩展参数
            var op = $.extend({
                opacity: 0.8,
                z: 10000,
                bgcolor: '#000'
            }, options);

            // 创建一个 Mask 层,追加到 document.body
            $('<div class="jquery_addmask">&nbsp;</div>').appendTo(document.body).css({
                position: 'absolute',
                top: '0px',
                left: '0px',
                'z-index': op.z,
                width: $(document).width(),
                height: $(document).height(),
                'background-color': op.bgcolor,
                opacity: 0
            }).fadeIn('slow', function(){
                // 淡入淡出效果
                $(this).fadeTo('slow', op.opacity);
            }).click(function(){
                // 单击事件,Mask 被销毁
                $(this).fadeTo('slow', 0, function(){
                    $(this).remove();
                });
            });

            return this;
        }
    });
})(jQuery);

使用方法

$.documentMask();

$.documentMask({
    'opacity': 0.6,
    'bgcolor': '#E79673',
    'z': 1000000
});

参数中,z 表示 z-index。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+

Posted in jQuery | Tagged: , , | Leave a Comment »

jQuery: 随滚动居中效果

Posted by Ross Wan 于 2008/12/05

随滚动居中的效果,平时都会经常使用到,于是写成一个 jQuery 的插件。同时,这是我写的第一个插件。呵呵。纪念一下。

该插件可以令所选择的 Elements 永远浮动在窗口中央,无论是滚动还是窗口的大小发生改变。

代码

(function($){
    $.fn.extend({
        // 兼容不同的浏览器取得窗口的大小
        getWindowSize: function(){
            if($.browser.opera){
                return {width: window.innerWidth, height: window.innerHeight};
            }
            return {width: $(window).width(), height: $(window).height()};
        },

        // 主函数
        scrollCenter: function(options){
            // 扩展参数
            var op = $.extend({
                z: 1000000
            }, options);

            // 追加到 document.body 并设置其样式
            var windowSize = this.getWindowSize();
            this.appendTo(document.body).css({
                'position': 'absolute',
                'z-index': op.z,
                'top': (windowSize.height - this.height())/2+$(window).scrollTop() + 'px',
                'left': (windowSize.width - this.width())/2+$(window).scrollLeft() + 'px'
            });

            // 保存当前位置参数
            var bodyScrollTop =  $(document).scrollTop();
            var bodyScrollLeft =  $(document).scrollLeft();
            var movedivTop = this.offset().top;
            var movedivLeft = this.offset().left;

            var thisjQuery = this;

            // 滚动事件
            $(window).scroll(function(e){
                var tmpBodyScrollTop = $(document).scrollTop();
                var tmpBodyScrollLeft = $(document).scrollLeft();

                movedivTop += tmpBodyScrollTop - bodyScrollTop;
                movedivLeft += tmpBodyScrollLeft - bodyScrollLeft;
                bodyScrollTop = tmpBodyScrollTop;
                bodyScrollLeft = tmpBodyScrollLeft;

                // 以动画方式进行移动
                thisjQuery.stop().animate({
                    'top': movedivTop + 'px',
                    'left': movedivLeft + 'px'
                });
            });

            // 窗口大小重设事件
            $(window).resize(function(){
                var windowSize = thisjQuery.getWindowSize();
                movedivTop = (windowSize.height - thisjQuery.height())/2+$(document).scrollTop();
                movedivLeft = (windowSize.width - thisjQuery.width())/2+$(document).scrollLeft();

                thisjQuery.stop().animate({
                    'top': movedivTop + 'px',
                    'left': movedivLeft + 'px'
                });
            });

            return this;
        }
    });
})(jQuery);

使用方法

$(selector).scrollCenter();

$(selector).scrollCenter({z:1000000});

参数 z 是设置其 z-index(默认设为1000000),以免被其它的层所遮盖。

兼容性

支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+ 。

示例

后记

遇到的问题主要还是浏览器的兼容性问题,取得窗口大小的方法上,IE、FF、Safari 浏览器都可以通过 $(window).width() 和 $(window).height() 来取得窗口的宽和高。但在 Opera 上,只能通过 window.innerWidth 和 window.innerHeight。

Posted in jQuery | Leave a Comment »

jsTree: 基于 jQuery 的树插件

Posted by Ross Wan 于 2008/11/14

jsTree 是一个基于 jQuery 的,将数据以树型结构显示的插件。jsTree 即将发布首个 1.0 版本,目前的版本是 0.9.1。

jsTree 的特点

  • 支持多种数据源

    • 预设支持 HTML ─ 将嵌套的列表转换为树
    • JSON
    • XML
  • 异步加载(async loading) ─ 仅支持远程的 XML 和 JSON 数据源

  • 树节点支持打开、关闭、重命名、新建、删除的操作

  • 支持事件 ─ 如 onchange, oncreate, ondelete, onload 等等

  • 支持树节点间的拖放操作

  • 支持选择多个树节点

  • 本地化支持

  • 支持 Right-to-left

  • 图标、节点图案、背景、字体等等都可以在 CSS 文件上自定义

  • 支持动画方式的打开或者关闭树节点(需要配置)

  • 支持利用键盘快捷方式来浏览树(可选择的)

  • 支持多棵树间的操作 – 如将树节点从一棵树移动或者复制到另一棵树

参考资料

Posted in Javascript, jQuery | Tagged: , , , , | Leave a Comment »

jTPS:基于 jQuery 的 Datagrid 插件

Posted by Ross Wan 于 2008/09/06

       基于 jQuery 的 Grid 插件不少,但都有各自的特点,jTPS 也不例外。jTPS 可以将普通的 HTML 表格转化为 Datagrid,分页时带有滚动效果,支持列的排序,支持 Unicode。简单的代码就可以将一个 Table 生成 Grid:

$(document).ready(function () {
$(’#TABLETOCONTROL’).initTable( {perPages:[5,12,15,50,'ALL']} ).controlTable();
});

注:TABLETOCONTROL 为一个 Table 的 ID。perPages 设置可选的每页显示行数。在 jTPS 网页上可以看下效果:

jTPS.js 下载:

1

Posted in jQuery | Tagged: , , | Leave a Comment »

jQuery:实现网页滚动时动态更新内容

Posted by Ross Wan 于 2008/08/28

      用过 Google Reader 的人都会发觉,当我们阅读的时候,浏览器的滚动条到达底端,新的内容会自动更新到网页的底端。或者看看这个示例,会有更清晰的了解:http://www.webresourcesdepot.com/dnspinger/

注:将上面示例的网页滚动到底端就会看到效果。

      下面,将用 jQuery 来简单实现这个有趣的效果。

      我们将更新的内容放于 Divs 内,下面是其结构:

<div class=”wrdLatest” id=9>content</div>
<div class=”wrdLatest” id=8>content</div>
<div id=”lastPostsLoader”></div>

      下面创建的 lastPostFunc 方法,使用 ajax 向服务器发送一个更新内容的请求,同时将最后一个 Div 的 id 传递过去,并且放置一个“正在加载”的图片。

function lastPostFunc()
{
    $(’div#lastPostsLoader’).html(’<img src=”bigLoader.gif”>’);
    $.post(“scroll.asp?action=getLastPosts&lastID=” + $(“.wrdLatest:last”).attr(“id”),   

    function(data){
        if (data != “”) {
        $(“.wrdLatest:last”).after(data);          
        }
        $(’div#lastPostsLoader’).empty();
    });
};

      当用户滚动网页到底端就会触发 lastPostFunc 方法:

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() – $(window).height()){
           lastPostFunc();
        }
});

注意:代码中使用到 jQuery 的 Dimensions 插件,或者使用 jQuery 1.2.6+,因为已集成了该插件。

Posted in Ajax, Javascript, jQuery | Leave a Comment »

jQuery:下拉列表中“其它”选项的一个简单解决方案

Posted by Ross Wan 于 2008/08/27

对于下拉列表的选项,我们有时候是不可能将所有的选项都包括进去的,于是会在最后提供“其它”这个选项,然后期望用户在出现的文本框中输入自己的文本。下面就是利用 jQuery 来现实这个功能。

示例:http://www.flexiblephilosophy.com/leader.php


<script type=”text/javascript”>
$(function () {

$(‘.leader’).each( function () {
var name = $(this).attr(‘name’);

if ($(this).val()!=’other’) {
$(this).next().removeAttr(‘name’).hide();
}
});

$(‘.leader’).change(onChange);

function onChange(){
var desiredName = $(this).attr(‘name’);
if ($(‘#’+desiredName).val()==’other’) {
$(‘#’+desiredName).next().attr(‘name’,desiredName).fadeIn(‘fast’);
}
else {
$(‘#’+desiredName).next().removeAttr(‘name’).fadeOut(‘fast’);
}
}

});
</script>



当“其它”选项被选择时,下拉列表的 name 属性会被移除,然后显示文本框,并设置其 name 属性为下拉列表原先的 name 属性。


参考资料:http://itknowledgeexchange.techtarget.com/web-standards/jquery-tutorial-select-to-input-toggle/

Posted in Ajax, Javascript, jQuery | Leave a Comment »

jQuery UI 1.5b4 发布

Posted by Ross Wan 于 2008/05/11

       5月5日,jQuery UI 1.5 的最后一个 beta 版发布,RC 版本发布之日已经相当近了(本月内发布),目前仅剩下5个主要的 bugs 待修复。

       尽管这是一个 beta 版本,但已经相当稳定。当中引入了很多新的 API helpers,移除了控件对 dimensions 插件的依赖性。同时,核心引入通用控件工厂模式,使得插件的细度变得更小。UI 组件在事件触发方面也有显著的改进。

       还有一个值得关注的消息是,jQuery Enchant 插件将集成到 jQuery UI 1.5 上。

Posted in jQuery | Leave a Comment »