鱼杆鱼堂 » jquery

JQuery元素位置插件(dimensions)

pumaboyd — Sun, 16 Nov 2008 23:15:17 +0000

有时候要在当前点击的位置显示一个对话框。这个时候就需要用到JQuery的元素位置方法。
$(‘#elem4′).offset(); 是jquery版本自带的，基本很好用。但当页面有滚动条的时候，这个定位是没有考虑滚动条的距离的。所以，还需要自己写一个方法获取当前窗口的滚动条大小的：

var scrollLeft = (document.documentElement.scrollLeft ?
            document.documentElement.scrollLeft : document.body.scrollLeft);
var scrollTop = (document.documentElement.scrollTop ?
            document.documentElement.scrollTop : document.body.scrollTop);

JQuery也有一个dimensions插件，配合这些，基本上可以完成所有的元素位置操作

这个页面有详细的实例:

http://jsgears.com/thread-76-1-1.html

JQuery-Dialog(弹出窗口，遮蔽窗口)

pumaboyd — Wed, 12 Nov 2008 04:08:51 +0000

在Ajax中经常用到的弹出窗口和遮蔽窗口。自己写肯定是一个最佳方案，但时间和成本上，还是决定了寻找现成的吧。大概罗列一下。需要我满足我几个条件

一定要简洁方便
拥有遮蔽功能，Model Dialog ，所谓的模态窗口
可以根据HTML弹出窗口
可以定义弹出窗口的位置，大小

其实我只需要一个框，我更希望框的内容我自己控制，这样通用性就强了。而且一定要简洁，不能弹个框也要配置复杂。

最后挑选下来最满意的Boxy

http://onehackoranother.com/projects/jquery/boxy/

Boxy生产的HTML代码也是很乱的。但Boxy的设置最简单，所以上手很容易（关注ing，发现CUP有些偏高）。

–=Other Links=–

http://www.ericmmartin.com/projects/simplemodal/

http://dev.iceburg.net/jquery/jqModal/#examples

simplemodal、jqModal 。这两个是最简单的，灵活性很好，但需要自己配制的多，而且官方的DEMO和我要的需求不是很相同。需要配置的多，学习成本高了。
如果你希望定制自己的Dialog，这两个插件，可以作为基础包，在基础包在封装一下。就可以很方便的满足你的要求。

http://www.malsup.com/jquery/block/

BlockUI效果很好。而且官方的帮助也很详细，如果只是简单的使用遮蔽，推荐使用，上手也容易。

http://jquery.com/demo/thickbox/

貌似很复杂，而且偏向于图片，直接就否决了

http://docs.jquery.com/UI/Dialog

官方的要，还要引几个扩展的JS,支持窗口缩放什么的，但生产的代码也太复杂了，不推荐。

网络上整理的一些Dialog列表

http://hi.baidu.com/freezesoul/blog/item/2889b44580e2fd23cffca3fb.html

http://vision-media.ca/resources/jquery/jquery-popup-plugin-review

Custom JavaScript Dialog Boxes

http://hi.baidu.com/freezesoul/blog/item/63a10bfa6e54109259ee90d8.html

JQuery-labelOver插件

pumaboyd — Sun, 09 Nov 2008 03:17:29 +0000

不知道中文名这么叫，其实就是在搜索框中有灰色的提示字，但点击或真正搜索的时候，就自动隐藏。当然自己实现不麻烦，但有现成的就用呗！

具体地址:
http://remysharp.com/wp-content/uploads/2007/03/label_over_example.html

JQuery-Truncate插件(更多,截字)

pumaboyd — Sun, 09 Nov 2008 02:54:59 +0000

继续我的开源之旅。成本、开发、快速、分享这就是开源带给我的乐趣。(*^__^*)，总算给我找到了。
平时用到很多这种类似的，长文本需要添加一个显示更多的按钮或是希望截取多少字的情况。web网站用的很多，做法有很多种。比如：程序代码截取，ajax在“更多”按钮取出全部内容。这可能是很好的方式，也最小的HTML传输。但我还是倾向于javascript的截取方式，原因很简单，对程序的改动最小。开发人员有更多的精力做更多有益的事情。当然我不否认会使用ajax的方式，有特殊的地方还是要用的，但不想极端。多一点HTML，我可以接受。
明白我的意思，就不讨论这种方式会造成页面文件大的观点。

快速开发，快速完成任务。
官方网址：http://www.reindel.com/truncate/
主要有4个DEMO，用来说明文字截取，支持文本中有HTML的截取，支持单纯截字处理。
用法:

//单纯截字
$(".example_2").truncate( 60 );

//More Text
    $(".example_3").truncate( 120,{
        chars: /\s/,
        trail: [ " ( more . . . )", "( . . . less )" ]
    });

DEMO下载(Box.net | uushare)

JQuery画图插件(flot)

pumaboyd — Sat, 01 Nov 2008 05:03:52 +0000

最近公司比较流行画图。但我不喜欢使用服务器端直接生成图片的方式，正好看到JQuery的画图插件jquery.flot，顺便学习一下，修改了例子。效果还不错。生成的网站aleax排名。

DEMO下载(Box.net,cnblogs)