2007年04月19日

今天在Ajaxian上看到一篇Blog说是使用js来实现圆角矩形的效果,地址是Corner.js。它的使用很简单,只要引入了Corner.js,然后在再处理的图片上使用相应的class属性值就行了。而它又是从Reflection获得的灵感。我没有具体看代码,看介绍Reflection是通过Canvas来处理的。Reflection可以实现倒影效果,许多web 2.0的Logo都是这样的。而且在FF和IE下我试了没有问题。但是Corner.js只能在FF下有效果,不知道以后的版本如何。挺有意思的东西。

Firebug 目前已经是1.0.4了。不过在此之前还出现过Bug,现在它已经稳定了。不过我突然发现Style标签页显示不少信息了,也就是我无法观察某个元素的样式了。根据显示的信息我找到了它的FAQ说明,然后又链接到了一个讨论中。可能的原因就是因为从1.5升级到2.0,但是DOM Inspector却没有升级。开始有人提出的解决方案是删除Firefox,然后连程序目录都要删除或改名。而主做不会破坏你的用户数据,因为是放在不同的目录下。后来看到一个简单的方法:

Delete the following (old) files from the "components" folder (in the
main Mozilla Firefox folder):
inspector.dll
inspector.xpt
inspector-cmdline.js

Now you can just re-install Firefox 2 OVER the previous install – you
do not have to uninstall Firefox beforehand !

我按这个方法做的,的确没有问题。不过后来重启了Firefox之后又来看了一下,还有一个方法:

DOM Inspector是一个扩展程序,所以可以在extension中看到,你把它删除了,重启Firefox好象也可以。好象这个东西对于Firefox没有用。不过我没有试过了。有兴趣的可以试一下。如果不行,再重新安装Firefox进行覆盖就行了。

2007年04月10日

dean开发的javascript packer是用在jquery相关项目中最多的packer了。现在是3.0。它是一个web工具,可以在线进行压缩。它的使用很简单:

  1. 进入网站
  2. 粘贴要压缩的代码
  3. 执行pack

它还有几个选项:Base62 encode和Shrink variables。如果这两个选项不选的话,只是去掉多余的空格,换行,注释之类的。如果选择Base62 encode基本上就不可读了。如果选择Shrink variables可以压缩变量,具体它是如何做的我不清楚,不过体积的确会变小。不过在我压缩jquery.jform.js时,在测试中发现原本应该是ajax的POST方式提交的结果变成了GET方式,太奇怪了。如果换成不压缩的版本就没有问题。因此定位是这个packer的问题。于是我没有选中Base62 encode,而只是选中了Shrink variables,发现在$.ajax的参数中,原本为type的给变成了typf,当我中选中Base62 encode,但没有选中Shrink variables后,一切正常。所以我的第一个建议是:

当运行出错时,去掉Shrink variables试试。

另外我的第二个建议是:每个函数后面一定要有分号(‘;’),每个语句后面如果不是大括号括起来的,一定要有分号。不然在运行时会说是少分号,很麻烦。

现在OpenbookPlatform中的许多js代码我都进行了压缩,甚至把一些常用的放到了一个full.js文件中,这样可以减少文件读取次数,从而提高效率。

Form生成说简单也简单,说复杂也复杂。虽然我宁肯手工来生成Form代码,但是不停地重复,还不方便维护的确不是我喜欢的,于是我想能不能使用Js来简化Form的生成。于是我写了一个jquery.formbuilder.js的插件,目前在FF下测试基本没有什么问题,但是在IE下有问题,因为没有安装vs.net(没有版本)工具,所以无法调试,先不管它了。

代码目前放在 OpenbookPlatform 项目中,在media/js/jquery.formbuilder.js中。

调用示例:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jbasicext.pack.js"></script>
<script type="text/javascript" src="jquery.formbuilder.js"></script>
<script type="text/javascript">
$().ready(function(){
    var form = $(‘#test’).formbuilder({layout:’table’});
    form.add(form.Line(form.Label(‘Text Field’), form.Text({name:’text’,value:’text field’})));
    form.add(form.Line(form.Label(‘Password Field’), form.Password({name:’password’,value:’password field’})));
    form.add(form.Line(form.Label(‘Select field’), form.Select({name:’select’,value:[3],options:[{value:1},{value:2},{value:3},{value:4}]})));
    form.add(form.Line(form.Label(‘Textarea field’), form.Textarea({name:’textarea’,value:’This is a textarea field’})));
});
</script>
</head>
<body>
<div id="test"></div>
</body>
</html>

$(‘#test’).formbuilder({layout:’table’});这样将创建一个FB的对象,它拥有创建相关输入元素的方法。它可以接受一个hash参数(可以缺省),主要有:

layout:可选值为simple,则生成的form形为<label>message</label><input type="text" name="field"/>,当layout为table,则使用表格进行封装,形式为<table><tbody><tr><td><label>message</label><input type="text" name="field"/></td></tr></tbody></table>。缺省为simple。

multipart:缺省为false。当为true时,form元素属性会增加enctype="multiparts/form-data",这样可以用来上传带文件的表格。

action:缺省为""。应为提交对应的url。

method:缺省为"POST"。

除上述属性外,还可以自已增加其它的属性,如:class,id等。

formbuilder将返回一个FB对象,它有两个属性:form和o。form为生成的form元素,因此你可以直接使用它进行处理。o为参数,主要为:layout和target。layout是从formbuilder中得到的。而target根据layout的不同而变化。当layout为simple时,target为form。当layout为table时,target为tbody。

返回的FB对象有许多的方法,如创建输入元素的方法:

Input用来创建通用Input元素。还有一些是创建特殊输入元素,如:Text,Password,Checkbox,Radio,Select,Textarea,File,Hidden,Button,Submit,Reset等。

对于Input方法需要两个参数,第一个为生成tag的名字,如:text,第二个为这个标签的属性。而特殊输入元素则只需要一个参数,就是元素的属性。有些是有特殊处理的,如:textarea,它的value属性将放在<textare>标签中。对于select也特殊一些,它的value是一个数组,如示例所示。同时有一个options的属性,表示它的可选项。options是一个数组,它的值是一个hash值,如果只有一个value,则每个option的显示信息与value相同。否则需要有:value和text两个属性。如果select的某个value与某个option的值相等,则这个option将被选中。

如果要创建label需要使用Label方法。

生成的Input元素和Label元素不会自动加入到form中。你需要通过add方法将其加入。add方法可以允许有多个参数。同时formbuilder还提供了一个Line的方法,用于与layout参数对应,是生成用<p>封装的行或使用<tr>封装的行。所以添加一行的代码是:

form.add(form.Line(form.Label(‘Text Field’), form.Text({name:’text’,value:’text field’})));

这个插件需要jquery.jbasicext.js插件(在openbookplatform)中也可以找到。

此插件还在完善中,有什么意见或者帮助我解决ie下的问题欢迎与我交流。