IT博客网-A JavaScript Fancier-随笔分类-Js框架组件

mapper--图片热点区域高亮组件

Yemoo'S JS Blog — Thu, 03 Apr 2008 04:24:00 GMT

很有意思的一个东西，我们都用过图片热点对多个切片做链接，也用过链接的hover高亮效果，但却没有办法实现图片热点的高亮效果（即鼠标悬停在某个热点区域时该区域高亮显示）。

Mapper就是这样的小组件，利用js绘图和css定义实现了这样一个很有用处的功能。

效果如下：

官方站点及演示：http://www.netzgesta.de/mapper/

Yemoo'S JS Blog 2008-04-03 12:24 发表评论

Jash: JavaScript Shell

Yemoo'S JS Blog — Tue, 22 Jan 2008 12:28:00 GMT

Jash: A Cross-Browser Javascript Command-Line Debugging Tool

Jash是一个基于DHTML开发的命令行JavaScript调试工具，用于调试当前打开的页面。通过该调试工具，你可以快速的进行脚本调试，查看dom、当前页面对象，函数、变量，跟踪执行堆栈，执行任意脚本及为页面定义css等，可运行于IE6+ 、FF1.5+、Safari 3 +下。
程序仅仅是一个大小约为30kb的js文件，无需安装，只需将js放入书签，随时都可以通过点击该书签调出，或者在自己程序中直接嵌入这个js文件即可。

详细请查看官方介绍：http://www.billyreisinger.com/jash/

Yemoo'S JS Blog 2008-01-22 20:28 发表评论

Ext2类继承关系简要结构图

Yemoo'S JS Blog — Tue, 22 Jan 2008 12:27:00 GMT

yemoo整理于2007年12月11日，对其中的类继承关系做了简单的总结，不完善之处希望大家提出。

转载请注明来源：http://www.ajaxbbs.net

由于内容是由word文档导出生成，因此请访问http://www.ajaxbbs.net/blog/attachment/other/Ext-Class-Inhert-Chart.htm。

Yemoo'S JS Blog 2008-01-22 20:27 发表评论

Google Chart

Yemoo'S JS Blog — Wed, 02 Jan 2008 07:38:00 GMT

前面介绍了Jquery的一个Chart插件Slot，这里在推荐一个Google的Chart组件。

Google Chart使用方式比较特别，不是调用js，而是直接在url传入参数即生成对应的Chart，只要掌握了这些参数就可以生成各种需要的chart图表了。
如
http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World
将显示为

可以直接作为图片应用，如：

有兴趣的可以看看，项目的地址为：http://code.google.com/apis/chart/

Yemoo'S JS Blog 2008-01-02 15:38 发表评论

Plot-Jquery图表绘制插件

Yemoo'S JS Blog — Wed, 02 Jan 2008 07:36:00 GMT

受Plotr和PlotKit的启发，Ole Laursen基于jquery开发了一个图表绘制(WEB Chart)插件并命名为flot。名字有点古怪，但当其V0.1版本发布时就吸引了不少人的关注。

项目地址：http://code.google.com/p/flot/
Demo演示：http://people.iola.dk/olau/flot/examples/

以下为Slot的一些示例截图：

Yemoo'S JS Blog 2008-01-02 15:36 发表评论

使用YSlow加快网页加载速度

Yemoo'S JS Blog — Wed, 02 Jan 2008 07:34:00 GMT

YSlow是Yahoo开发的一款用于优化网页性能的Firefox插件，该插件安装后自动与firebug控制台集成到了一起，当前最新版本为0.9。

YSlow通过对网页各个部分的分析然后根据Yahoo“High Performance Web Sites”十条规则提出对加速当前网页性能的建议。

主要包括如下内容：
性能报告
HTTP/HTML摘要显示
页面组件列表(Js/CSS/Images etc)
集成JSlint，便于调试页面js程序。

以下为部分功能图示：

性能视图：如果一个网页有需要改进的地方，则会用红色的字体标出：

状态视图：显示页面缓存状态及cookie信息

组件视图：显示页面的各个组件及各个组件的详细信息如类型, URL, 过期时间, gzip状态, 加载时间, 文件大小, ETag，同时也可以查看各个组件http请求的头信息。

详细介绍见官方：http://developer.yahoo.com/yslow/
相关文档：http://developer.yahoo.com/yslow/help/
插件下载安装地址：https://addons.mozilla.org/en-US/firefox/addon/5369

Yemoo'S JS Blog 2008-01-02 15:34 发表评论

解决Ext2 Form表单项的不正确显示问题

Yemoo'S JS Blog — Wed, 02 Jan 2008 07:31:00 GMT

在使用Ext2 form的过程中，发现了一些表单项外观显示的问题：
1、输入框下边的线消失
2、日期控件及combo控件右侧的图片和左侧输入域垂直方向没有对齐。
这让表单看起来极其难受。

效果如下：

今天在JavaEye中找到了解决办法，赶紧贴出来，希望对同样遇到这些问题的朋友有所帮助。

解决办法：

在Ext-all.css中找到如下内容：
.ext-ie .x-form-text {
margin-top:-1px;
margin-bottom:-1px;
height:22px;
line-height:18px;
}

然后替换 margin-bottom:-1px; 为 margin-bottom:0px;

Yemoo'S JS Blog 2008-01-02 15:31 发表评论

Ext-API详解--core/Ext.js

Yemoo'S JS Blog — Tue, 18 Dec 2007 15:43:00 GMT

1、Ext.apply(Object obj, Object config, Object defaults ) : Object
将config中的所有属性复制到obj中，如果配置了defaults，则先将defaults中的属性传入obj，然后再将config中属性传入，一般defaults用于定义一些默认值。
注意：每个参数都必须是对象object，而不能是function或其他。
创建object可以通过new function(){}、new Object()、{}等方法创建。

2、Ext.emptyFn: Function
用于返回一个空函数，便于在程序中创建空函数。Ext.emptyFn返回function(){}

3、Ext.applyIf(Object obj, Object config) : Object
功能如同Ext.apply,但是只把config中存在而obj不存在的属性复制过去。

4、Ext.addBehaviors( Object obj ) : void
为页面中一个或多个元素添加事件
元素使用css规则查找，其中元素与事件用@隔开

Ext.addBehaviors({
   //为id为foo的元素下的所有a元素添加click事件
   '#foo a@click' : function(e, t){
       // do something
   },
   // 为多个选择器添加相同的事件(mouseover)。在@之前使用逗号分开
   '#foo a, #bar span.some-class@mouseover' : function(){
       // do something
   }
});

5、Ext.id( [Mixed el], [String prefix] ) : String
返回一个唯一的id值。
如果只需要获取一个唯一的id值，则直接调用Ext.id()；
如果需要为某个元素设定一个唯一的id值并返回id则调用Ext.id(el)，el为元素Id、Dom对象或Ext的Element对象。
如果需要指定特定的前缀，则需要传入第二个参数，如Ext.id(el,”myPrix-”)，默认前缀为ext-gen，如默认返回id可能为ext-gen4，指定了前缀后可能返回myPrix-4。

6、Ext.extend( Object subclass, Object superclass, [Object overrides] ) : void
实现对象继承，目前还不太了解具体原理？？？

7、Ext.namespace( String namespace1, String namespace2, String etc ) : void
创建命名空间：
如Ext.namespace("Company","MyNS.mydata","Data.format.string")
然后可以创建如MyNS.mydata.doit=function(){…}的接口
注：命名空间的简易调用：Ext.ns()，在Ext Api中未给出此用法。

8、Ext.urlEncode( Object o ) : String
将一个json对象转换称url参数串，支持通过数组为一个参数设定多个值。
如将{a:1,b:2,c:[1,3,5,7]}转换为a=1&b=2&c=1&c=3&c=5&c=7

9、Ext.urlDecode( String string, [Boolean overwrite] ) : Object
将url参数串转换为json对象，overwrite如果为true，则后面的同名参数值覆盖前面的同名参数值（默认为false即不覆盖而以数组形式返回）。
如

Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7")
返回的对象内容为{a:1,b:2,c:[1,3,5,7]}
Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7",true)
返回{a:1,b:2,c:7}

10、Ext.each( Array/NodeList/Mixed array, Function fn, Object scope ) : void
遍历array并对每项分别调用fn函数。如果array不是数组则只执行一次。
如果某项fn执行结果返回false（必须是false，undefined无效），遍历退出，后面的array项将不被遍历。
遍历过程中每次为fn传入参数分别为[当前数组项]，[当前索引]和[数组array]三个参数。
Scope用于设定fn函数中的this指针。
如

Ext.each([1,3,5,7],function(v,i,a){
alert("index: "+i+" value: "+v+" array.length："+a.length)
});

将循环弹出：
index:0 value:1 array.length：4
index:1 value:3 array.length：4
index:2 value:5 array.length：4
index:3 value:7 array.length：4

Ext.each([1,3,5,7],function(v,i,a){
alert("index: "+i+" value: "+v+" array.length："+a.length);
return v!=5; //到第三项后遍历退出
});

将循环弹出：
index:0 value:1 array.length：4
index:1 value:3 array.length：4
index:2 value:5 array.length：4

11、Ext.combine(arg1,arg2..argn) : Array    //该方法在Ext2不推荐再使用
用于实现对数组的合并，如果是字符串则作为只有一项的数组合并。
如

var a1=[1,3,5],b1=["a","b","c"];var c1="xxyznbde";
Ext.combine(a1,b1,c1) 返回[1,3,5,a,b,c,xxyznbde]

12、Ext. escapeRe( String str ) : String
将属于正则里的特殊字符进行转义。
如

Ext.escapeRe("(ab)$\sa342{}[dd]")将返回$ab$\$sa342\{\}\[dd\]。

13、Ext.callback(cb, scope, args, delay) :void //该方法为Ext的内部方法
调用一个函数或延迟调用一个函数。
Cb:调用的函数。
scope:cb中this指针。
args：传如cb的参数，以数组形式表示。
delay：延迟多少毫秒执行cb。
如

Ext.callback(function(x,y){alert(x+y)},this,[3,5],1000);将于1秒钟后弹出8，即3+5的结果。

14、Ext.getDom( Mixed el ) : HTMLElement
根据传入的id/dom节点/Ext的Elemenet对象，返回其dom对象。
如alert(Ext.getDom("a").innerHTML);或
alert(Ext.getDom(document.getElementById("a")).innerHTML);
将返回id为a的元素的innerHTML内容。

15、Ext.getDoc()/Ext.getBody() : Ext.Element
分别返回页面的document对象和body对象，返回值为Ext的Element对象，而非Dom对象。

16、Ext.getCmp( String id ) : Ext.Component
根据传入的html元素id返回该元素的组件类型，返回值为Ext的Component对象。
必须保证该id对象的元素是Ext的一个内部组件（通过Ext创建的组件），否则什么都不返回。

17、Ext.num( Mixed value, Number defaultValue ) : Number
验证value是否是一个数字，如果是则直接返回否则返回defaultValue。
如

alert(Ext.num(5,7))返回5，alert(Ext.num("5",7)) 返回7

18、Ext.destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void
销毁创建的Element或组件(Component)，即销毁其所有的事件监听，dom节点，并调用对象本身的destory方法（如果存在的话），传入的参数类型为Ext.Element或Ext. Component，可以一次性传入多个对象进行销毁。
如

Ext.destory(menu,el,Button);会销毁menu,el,Button三个对象。

19、Ext.removeNode(htmlElement el): void //Ext内部方法
删除指定的dom节点。传入参数为dom对象。
如

Ext.removeNode(document.getElementById("ab"));

20、Ext.type( Mixed object ) : String
返回传入的对象的类型。
包括如下类型：
string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace
如

Ext.type("ab")返回string
Ext.type(20)返回number
Ext.type([3,5,6])返回array
Ext.type(/reg/)返回regexp
Ext.type(document.body)返回element。

21、Ext.isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean
检查一个值是否为null/undefined或是否是空，如果是则返回true。
如果传入allowBlank为true，则只检查是否为null或undefined。
如：

Ext.isEmpty("a")返回false，
Ext.isEmpty("")返回true，
Ext.isEmpty("",true)返回false，
Ext.isEmpty(null)返回true。

22、Ext.value(String v,String defaultValue[,[Boolean allowBlank]):String //Ext内部方法
检查v是否是为null/undefined或空，如果是则返回defaultValue，否则返回v。如果allowBlank参数为true，则允许v为空（即当v为空时不返回defaultValue而返回空）。
<

Yemoo'S JS Blog 2007-12-18 23:43 发表评论

几个Ext的学习站点

Yemoo'S JS Blog — Tue, 18 Dec 2007 14:39:00 GMT

最近在学习Ext，发现这个玩意虽然很强大，但是也太重量级了，没有几个月时间大概很难用好。自己直接学习Ext Api的过程中有不少的痛苦经历，进度也比较慢，经常看看别人的研究学习成果对于自己的学习还是很有帮助的，这里将几个不错的Ext学习站点收藏起来，便于以后自己参考学习。

JavaEye Ext交流区：http://www.javaeye.com/forums/tag/EXT
著名的技术社区JavaEye，这里Ext交流的人气在国内还算比较火热的。

blackant2的专栏：http://blog.csdn.net/blackant2/
该blog作者一直在对Ext的Api做翻译，当然也有很多对api的实例讲解，对于系统的学习很有帮助。

天晓得的专栏：http://blog.csdn.net/tianxiaode/
该blog作者主要以具体的实例讲解Ext的使用，便于将Ext的学习与具体应用相结合。

ext tutorial：http://203.93.254.59:8888/extdoc/html/index.html
国人写的Ext教程，作者语言幽默，有点head first的感觉，讲的还不错，但很多都要money才给看的。。

Yemoo'S JS Blog 2007-12-18 22:39 发表评论

一个基于mootools的日期控件

Yemoo'S JS Blog — Wed, 05 Dec 2007 09:42:00 GMT

http://www.cnitblog.com/Files/yemoo/gg1.js">
>该日期控件特性包括样式定制、多日期控件支持、配置灵活等特点，是一个不错的日期控件。该控件是基于Mootools框架构建，压缩版的js(calendar.js)大小仅14k。具体介绍和演示及下载请到官方站点查看。官方地址：http://www.electricprism.com/aeron/calendar/

Scal是一个基于Prototype框架的简单的js日期/日历控件。其基本用法简单，但提供很多详细的api，可以根据自己的需要配置成各种calendar。

支持如下浏览器：
Internet Explorer 6 & 7
Firefox
Safari
Opera

具有如下特点：
轻量级
容易使用
可以加入多个日期控件而不互相冲突
自动根据页面模式html/xhtml生成兼容代码
皮肤可定制
支持语言翻译
事件计划安排功能

如何使用？

1、首先包含如下js和css文件

在需要使用日期控件时，创建一个scal实例，传入显示日期控件的元素和显示当前选中日期信息的元素或者可以传入其它一些可选配置项。
如：

var samplecal = new scal('samplecal', 'scalupdate');

官方网址及详细示例和介绍：http://scal.fieldguidetoprogrammers.com/scal-v02-documentation

有兴趣的可以下载试用下。

Yemoo'S JS Blog 2007-11-28 11:40 发表评论

用于.NET和Mono的ajax开发套件--Gaia

Yemoo'S JS Blog — Thu, 22 Nov 2007 05:46:00 GMT

以前貌似有很多人问我关于.net下的ajax框架，可惜俺没有做过.net，不过今天发现了一个用于.net的似乎还不错的ajax框架--Gaia，相信做.net平台下ajax应用程序开发的朋友会有兴趣。

Gaia是一个用于构建.NET应用程序的Ajax综合框架库。支持27种控件/组件，类似.net语法的使用风格，完全兼容IE、FF、Opear级Safari浏览器。

详细介绍及使用请参见官方网站：http://ajaxwidgets.com/

Yemoo'S JS Blog 2007-11-22 13:46 发表评论

三个很不错的开源窗口类(window)组件

Yemoo'S JS Blog — Thu, 22 Nov 2007 05:45:00 GMT

1、MooTools Mocha UI（基于MooTools和Canvas构建）
网址：http://greghoustondesign.com/demos/mocha/
简介：
Mocha is a MooTools user interface class made with canvas tag graphics. This is an on going exercise to help me become more familiar with both MooTools and the canvas tag. See the windows to the right for more information。

2、ModalBox
网址：http://code.google.com/p/modalbox/
简介：
ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogues or even wizards (sequences of dialogues) without using conventional popups and page reloads. It's inspired by Mac OS X modal dialogues. And yes, it may also be useful for showing bigger versions of images. :)

Basically, ModalBox is based on GrayBox technique by Amir Salihefendic. But you can find a lot of similar techniques around the web: Lightbox JS, Lightbox gone wild, ThickBox etc.

There also a clone of ModalBox, the MOOdalBox, written on great and lightweight Mootools Framework.

3、Windoo
网址：http://code.google.com/p/windoo/
简介：
Windoo is a javascript class based on Mootools framework which allows you to create draggable and resizable inline windows on your HTML page.

Windoo also includes the following standalone extensions:

Drag.Multi is Drag.Base extension which gives the ability to change multiple styles for multiple elements at the same time according to the mouse movement
Drag.Resize is Mootools extension which applies drag handles to an element to make it resizable in 8 directions

Features
resizable in 8 directions (fully customizable)
works on Firefox, Opera, Safari, and IE 6, 7
support custom and container element limits for resize
fully customizable Windoo themes
preserve aspect ratio option
multiple window managers
support iframe overlay for IE (fixes