islighting

showModalDialog用法

Bentz — Wed, 18 Aug 2010 09:09:21 +0000

在开发中，有时会碰到一些很重的交互，比如一个带焦点的对话框，在对话框中有内容的搜索、筛选、选择等等。这时候常用的浮动层模拟对话框就显得不那么适用了，尝试用一下showModalDialog。showModalDialog本是ie4+时候的用法，Firefox在3.0开始支持。MDC里面有说明和简单的示例。

用法如下：

1 2	vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures]) vReturnValue = window.showModelessDialog(sURL [, vArguments] [, sFeatures])

参数说明：
sURL
必选参数，类型：字符串。用来指定对话框要显示的文档的URL。
vArguments
可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。
sFeatures
可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。
dialogHeight 对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。
dialogWidth: 对话框宽度。
dialogLeft: 距离桌面左的距离。
dialogTop: 离桌面上的距离。
center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。
help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。
resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。
status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

可以在传vArguments的时候传父页面的window对象进去，这样在子页面也能调用父页面的全局方法，例如关闭时刷新父页面的指定区域。vReturnValue是子页面返回值。

具体使用时传入了父页面的window，结果f5刷新的时候发现被刷掉了，还是老老实实拼了url传过去，处理完成之后用vReturnValue回传结果。

ribbon

Bentz — Sun, 30 May 2010 09:49:01 +0000

opengl红宝书看完,就开始练手了,processing真是很方便的一个工具,不用太多纠结语言的一些特性,用来作快速prototype再合适不过了,还有众多强大的第三方类库.尤其是toxiclibs,几乎所有需要的东西,都方便的提供了,值得好好研究.

回到opengl上,Vertex Buffer Object看起来简单,第一次编写的时候还是挺费劲的,好在processing论坛里有着众多的资源,我着的道,前人早已经提出来过,只要放狗搜就有答案.这次还没有用到纹理,法相和光照,3d缺了这些怎么可以.还有残影的绘制,也许可以用一下glsl.

Number indexOf

Bentz — Tue, 25 May 2010 03:49:02 +0000

今天碰到一个比较xx的bug，数字格式化时出错。具体原因是在格式化初始时，取的值转成了number类型，运行num.indexOf(‘.’); 而js的number类型没有indexOf方法，记录一下。

FIELD.io 的新作 Muse

Bentz — Sat, 15 May 2010 23:09:53 +0000

Muse，最近看过的视频中最有印象的一个，有种梦境的梦幻感，音乐也很赞。

网站field.io，需翻墙。flickr上也有一些视频和往期project的截图。

ArcBall原理解析

Bentz — Sun, 09 May 2010 09:50:29 +0000

鼠标在桌面上的二维运动反映为光标在屏幕上的二维运动。当所处理的对象是一个二维形体时，鼠标的二维运动可以一一映射到二维形体上，从而方便地实现几乎所有需要的操作。但是当交互所关注的对象是一个三维物体时，二维屏幕与三维形体之间的矛盾就曝露出来了，ArcBall算法可以解决此矛盾。ArcBall是一种允许用户使用鼠标调整方位的三维交互技术。ArcBall的设计不平常在于，在考虑数学基础的同时，将操作反馈很好地结合起来，解决了鼠标调整空间方位的难题。和其他的一些技术相比，在通用的旋转控制器方面，ArcBall更容易使用，也更容易操作，且具有更强的功能。使用ArcBall作为鼠标三维交互控制器，其最大的特点是能很容易计算旋转轴和旋转角度。除外，能把窗口的二维空间转化为三维单位球空间，能让模型沿着Z轴或者其他轴进行平移等等。
ArcBall主要实现了，用户通过在窗口中拖动鼠标来旋转观察目标。可以想象成一个单位半球位于窗口中心，该单位半球的圆心为原点，当X*X+Y*Y<1时，Z=sqrt(1-X*X-Y*Y)，X*X+Y*Y>=1时，Z=0。鼠标按下时产生起始点，松开时产生结束点，这两点可经过相关算法转化为半球空间上的两点，设这两点与圆心所构成的角度为the弧度。当此两点都落在半球时（Z>0），则其旋转轴与这两点和圆心所构成的平面垂直，其旋转的角度为2倍the弧度；当鼠标的起始点和结束点都落在半球外时（Z=0），则其旋转轴为Z轴，旋转角度为同样为2倍the弧度。
由此根据ArcBall的原理，我们可以知道ArcBall是由最初的窗口空间转换为单位球空间，然后再由单位球空间转换为模型空间（变换矩阵）。窗口空间到单位球空间的转换是把窗口两点的坐标单位化为球面上的两点转换为半球面上的两点，算法如下：

1
2
3
4
5
6
7
8
9

pt.x = -(screen.x – width/2)/(radius* width/2); //单位球原点在中心，取负号能获得与窗口同向
pt.y = (screen.y – height/2)/(radius* height/2);
r = pt.x*pt.x + pt.y*pt.y;
IF r > 1.0 THEN
s = 1.0/Sqrt[r];
pt.x = s*pt.x;
pt.y = s*pt.y;
pt.z = 0.0;
ELSE pt.z = Sqrt[1.0 - r];

单位球空间到模型空间转换可以计算出旋转轴和旋转角度，从而得到变换矩阵。该转换可以通过四元数来实现。一个联合的四元数q=[v, w]=[x, y, z, w]由两个部分组成，一个是数量w，它等于cosθ/2，其中θ是旋转的角度，一个是向量v，它等于沿着旋转轴的向量的sinθ/2倍。两个四元数运算的结果就是它们旋转组合的结果，这样旋转组合操作就可以采用四元数叉乘来表示。ArcBall获取转换四元数的计算公式如下：

[q.x, q.y, q.z] = V3_Cross[p0, p1];
q.w = V3_Dot[p0, p1];
TM = QuatToMatrix(q);

其中q表示四元数，p0和p1表示旋转的起始点和结束点（可以通过转换一获得）；V3_Cross表示向量的叉积，它记录了旋转的轴的方向；V3_Dot表示向量的点积，它记录了旋转的角度；TM表示旋转矩阵，QuatToMatrix把四元数转换为矩阵。

mootools tag编辑器

Bentz — Wed, 14 Apr 2010 14:53:57 +0000

最近evernote和things用的比较多，对其中tag编辑的体验很有感觉，真是觉得顺滑无比。一路下来，手都几乎不用离开键盘，保证了焦点不会由于其他操作转移，思路也因此得以连贯。重点和连贯性都保证好了，体验自然不差。老八问我，你觉得用了mac之后给你带来的变化大么？我不好说。。只是潜移默化中，确实有点滴改变在发生。

花了一点时间写了这个mootools的tag编辑器，demo ，在编辑时附加了一个简单的auto-compelte，用上下箭或鼠标选择tags。不得不说的是，mootools的事件机制真的是非常强大好用。

一个小玩意

Bentz — Wed, 07 Apr 2010 14:39:40 +0000

最近看的书，大概都是跟信息视觉化和互动有关。书看的多了，却越来越感觉到自己所知之渺小。从原来的圈子跳出来，这世界会有另外一番景象。

这个小玩意是用google earth api做的一个统计数据的mashup，放在了公司门口作门面。老实说这个idea早已不新鲜，但是从自己手中写出来，还是感觉不大一样。尤其是当地球闪着蓝幽幽光芒缓慢转动的时候，似乎这就是极致的美了。

动态载入/删除/更新外部 JavaScript/CSS (转)

Bentz — Wed, 20 Jan 2010 06:31:26 +0000

动态载入 JavaScript/Css 文件

传统加载外部JavaScript(*.js) 或者 Css(*.css)文件的方法是直接在标签里面进行添加:

1
2
3

这些文件用这种方式会同步加载到当前这个页面。

现在用动态的方式载入JavaScript/Css文件：

用 DOM createElement 方法创建一个 “script” 或者 ”link” 元素
设置相应的属性
使用 appendChild 方法, 把创建的元素插入到 head 标签的末尾

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

为了防止多次载入同一个js/css文件，添加以下判断（这只是粗略检测）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//临时载入的文件名

var filesadded=""; 
function checkloadjscssfile(filename, filetype){ 
if (filesadded.indexOf("["+filename+"]")==-1){ 
loadjscssfile(filename, filetype); 
//把 [filename] 存入 filesadded

filesadded+="["+filename+"]"; 
} 
else{ 
alert("file already added!"); 
}p>
//第一次载入

checkloadjscssfile("myscript.js", "js"); 
//重复载入同一个文件，失败

checkloadjscssfile("myscript.js", "js");

动态删除 JavaScript/Csss 文件

注意：ie6/7 下动态删除样式时有bug. 2种解决方案：1.样式表里不要有import的样式表 2.把link的type属性设置为空值，然后再修改 href 的地，或者直接设置href为空，最后再把type值设置成”text/css” 强制让ie解释新的样式表。

取得相应的 DOM 元素
根据文件名&文件类型定位元素
用 DOM removeChild 删除一个 “script” 或者 ”link” 元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function removejscssfile(filename, filetype){ 
//判断文件类型

var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none"; 
//判断文件名

var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none"; 
var allsuspects=document.getElementsByTagName(targetelement); 
//遍历元素，并删除匹配的元素

for (var i=allsuspects.length; i>=0; i--){ 
if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1) 
allsuspects[i].parentNode.removeChild(allsuspects[i]); 
} 
}p>
removejscssfile("somescript.js", "js"); 
removejscssfile("somestyle.css", "css");

动态更新 JavaScript/Csss 文件

使用 createElement 创建要更新的 JavaScript/Css 元素
查找要被替换的元素
用 replaceChild 替换元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Espresso 升级拉！

Bentz — Tue, 15 Dec 2009 15:46:32 +0000

Espresso，mac下强大的web开发IDE，最近升级到1.1，增加了不少新功能。

试过不少编辑器，最终还是选择了espresso来写页面，因为他最像神器textmate。类似textmate一般干净的界面和主题，不断增加中的sugar(扩展)，完美支持中文，更能导入textmate的bundle为我所用！这些优点和轻量的感觉，使得写页面这种枯燥的事情也变得鲜活乐趣起来。

这次增加的功能不少是重要更新，类似”Find in Project”，”Image Preview”，”Open with”，都使得工作流更加集成。

在一个界面端完成所有要紧事，这恐怕是你我这样的懒人最期望的事情。

Zen Coding，透过css生成html

Bentz — Tue, 15 Dec 2009 09:28:29 +0000

是不是觉得每天都敲同样的html代码有点麻木？ok，那就让css代我们生成优雅的代码和排版吧。让我们专心做其他更重要的事。

这就是Zen Coding所能做的。Zen Coding是一套快速编写html/css的工具，语法简单至极，实现的效果却有点惊人。利用css的书写规则来创建html，想像一下这有多便利吧，尤其是列表、小模块，这简直太棒了！

演示视频

简单的例子

1	div#content>h1+p

上面这一行的输出结果

1
2
3
4

更多语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14

* E
Element name (div, p);
* E#id
Element with identifier (div#content, p#intro, span#error);
* E.class
Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width;
* E>N
Child element (div>p, div#footer>p>span);
* E+N
Sibling element (h1+p, div#header+div#content+div#footer);
* E*N
Element multiplication (ul#nav>li*5>a);
* E$*N
Item numbering (ul#nav>li.item-$*5);

上手很简单，多看几个例子就ok，或者在demo尝试一下，online demo。
Zen Coding支持的IDE众多，包括textmate和espresso，可以作为插件安装到我们最熟悉的IDE上。Ok, let’s speed up!