Decorative image frame

实验性项目IMIS系统(类WebQQ)

去年(2011年)还在波特集团深圳总部上班的时候,负责研究过公司集成管理信息系统(IMIS)的交互和用户体验,今天决定写下来,平时忙于工作,很少抽时间写这些东西,从现在开始,抽时间好好整理一下,当是总结吧!IMIS管理系统有点类似腾讯的WebQQ,这里是一个简单的原型:http://blog.luozhihua.com/imis/desktop/login.html,有兴趣的朋友可以看看。

原来的IMIS系统开发完成于早些时候,已经使用过几年,浏览器兼容性及用户体验比较差,那时候我还没有加入波特,进入波特的时候还有些让人回味的,承蒙波特集团当时的技术总监蒋士军蒋总错爱,没经过复试直接让我第二天就过去上班了,记得蒋总当时是这么说的:“是骡子是马,拉过来溜溜就知道你是不是牛了!”说来挺幸运的,因此后来才让我有机会从事此项研究。 Read More...

HTML5 performance API 草案.

支持浏览器**: IE9+,Chrome11+,Firefox7+.**

宿主对象window.performance.
参考资料:http://msdn.microsoft.com/zh-cn/office/ff975118
参考w3c的标准草案:http://w3c-test.org/webperf/specs/NavigationTiming/

目前,IE9+和 chrome11+,Firefox7+已经实现了该草案定义的接口。

成员**:

.navigation** (一个叫做performanceNavigation的对象.)
.timing (这玩意是一个被称作performanceTiming的包含了很多成员的对象)

 方法**:

.toJSON **返回一个 对象,并抄写performance的可枚举成员到其中. 是的,timing,navigation都在上面.

JSON.stringify(performance.toJSON()) == JSON.stringify(performance)//true. 悲剧啊.明明是继承来的,msdn非要特殊标一下..

PS:
1. performance,仅能对当前的html文档做检测,所有的对象都和当前文档有关.   如果我们想检测某个图片资源的网络状况,则不行.   比如我们想监控,用户访问我们服务的状况,就只能创建一个iframe, url为我们服务某个地址(除非用户访问的当前页,就是我们要监控的对象.). 然后才可以监控这次一次请求的网络状态等等.   所以建议如果可以考虑使用performance,做监控,则需要有 抽样、时间点等监控机制. 否则给服务器带来额外压力,得不偿失. 如果要监控其他资源,需要使用 ResourceTiming. 这套api. 这个会在其他帖子里单独说一说. Read More...

工作笔记/2012-06

IE系支持HTML5标签 _2012-06-29_:

1
2
3
4
5
6
7
8
9
10
<!--[if IE]-->
<script>
(function(){
if(!/*@cc_on!@*/0)return;
var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,time,video,section".split(','),
i = e.length;
while(--i){ document.createElement(e[i]);}
})()
</script>
<!--[endif]-->

天地荒老

行星与恒星是场相约
那时只见熔岩倾注
火光划过漫天星际
眼前一片薄白
我站在天崩地裂之间
任由灰烬纷飞
刹那间天地寂静
听不见一丝声响
失去重力的尘土和磐石
腾空而起飞速飘离

天地荒老那一刻
我才知道红尘未了
岁月难忘
那无尽的苍穹与星云之间
是繁华散尽的墓地
埋葬着至死不渝的欲望
所有的绚丽斑斓
是变幻莫测的理想
在白天和黑夜之间
如陨石般燃尽
消蚀于黑洞之中

工作笔记(2012)

鼠标滚动 _2012-12-22_:

function handleMouseWheel (e) {
    if (!e) e = window.event;
        if (e.wheelDelta <= 0 || e.detail > 0) {document.getElementById('t').innerHTML='滚轮向下滚?'}
        else {document.getElementById('t').innerHTML='滚轮向上滚?'}
    }
    if(document.attachEvent||/(?:ie|webkit)/i.test(navigator.appVersion)){
        document.onmousewheel = handleMouseWheel;
    }else{
        window.addEventListener("DOMMouseScroll", handleMouseWheel, false);
    }

IE系支持HTML5标签 _2012-06-29_:

<!–[if IE]>
<script>
(function(){
if(!/@cc_on!@/0)return;
var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,time,video,section”.split(‘,’),
i = e.length;
while(–i){ document.createElement(e[i]);}
})()
</script>
<![endif]–>

 

CSS3.0 3D效果 - 2012/3/20

.parentNode{
-moz-perspective: 1000px; /* 透视距离*/
-moz-transform-style: preserve-3d; /* 3D渲染模式 */
}

.child{
-moz-transform:translateX(350px) translateZ(-200px) rotateY(-45deg);
-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);
}

禁止移动浏览器缩放Web页面 - 2012/3/20

在移动浏览器中以原始大小显示Web页面,并不允许缩放
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

其中:
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

Javascript 模拟事件 - 2012/3/21

_// alert($.browser.msie +" "+$.browser.version);_
var eo=document.getElementById("ipt_1");
eo.onclick=function(){
        alert(navigator.userAgent);
}
function initKeyEventDM()
{
if( window.outerWidth == undefined )
{
        eo.fireEvent("onclick");
}else{
        var vo = document.createEvent("KeyEvents");
        vo.initKeyEvent("click", true, true, null, false, true, false, false, 68, 0);
        eo.dispatchEvent( vo );
}
}
initKeyEventDM();

jQuery 在IE下的“_参数无效_”BUG 2012/3/24

今天发现在<td/><th/>等标签上使用** attr**(“width“, 120); 或** attr**(“height“, 32);时会出现该问题,其他标签或者其他属性都正常(暂时没发现异常),其他类似问题:

  1. $(“#id”).css(“backgroundImage”, “bg.jpg”); // 错误
    $(“#id”).css(“backgroundImage”, “url(bg.jpg)”); // 正确
  2. 有人反应使用$(#id).html(html);时也有该错误,尽量把html简化,不要太多嵌套。

深入了解iPad上的MouseEvent

iPad上没有鼠标,所以手指在触发触摸事件(TouchEvent)的时候,系统也会产生出模拟的鼠标事件(MouseEvent)。

这对于普通网页的浏览需求而言,基本可以做到与PC端浏览器无明显差异。但是如果你正在做一款与用户有着强交互的WebAPP程序,比如一个html5小游戏或者图片处理工具什么的,那么依赖默认模拟恐怕不能满足产品的需求。

一个通常的建议是:在iPad上(或者说各个移动终端上),你的WebAPP应该能处理好TouchEvent,而不再依赖于MouseEvent。

然而如果你的WebAPP需要同时面向PC和iPad两种平台的浏览器用户,而迫于时间或者人力配备你没法分别提供两种版本的时候。。。你也许有必要了解一下下面这些有关iPad上MouseEvent相关的细节,然后砍掉两个平台上有明显差异的一些花哨特性,这样才能做出一个较好地兼容两个平台的WebAPP。 Read More...

HTML5 手指触摸滑动事件

更新了对手指触摸滑动事件的代码,做webApp的朋友可以用到

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
$(document).ready(function() {
var startX,
startY,
endX,
endY,
scrollTopVal=0, //左右滑动请自行修改
touchBox = $("#touchBox");

/**
+ touch start event handle
+ @param {Event} event touch start event
*/
function touchStart(event){
var touch = event.touches[0];
startY = touch.pageY;
}

/**
+ touch move event handle
+ @param {Event} event touch move event
*/
function touchMove(event) {
var touch = event.touches[0];
endY = (startY-touch.pageY);

if (scrollTopVal==0) {
touchBox.scrollTop((endY+100));
} else {
touchBox.scrollTop(scrollTopVal+endY+100);
}

}

/**
+ touch end event handle
+ @param {Event} event touch end event
*/
function touchEnd(event) {
scrollTopVal=$("#touchBox").scrollTop();
}

// bind events
touchBox.bind({
"touchstart" : touchStart,
"touchmove" : touchMove,
"touchend" : touchEnd
});

});

本站作品发行许可

 

[![知识共享许可协议](http://i.creativecommons.org/l/by-nc/2.5/cn/88x31.png)](http://creativecommons.org/licenses/by-nc/2.5/cn/)
本作品署有版权。本站作品遵循该许可: [署名-非商业性使用 2.5 中国大陆](http://creativecommons.org/licenses/by-nc/2.5/cn/). 请务必遵守。
<?PHP if ( get_post_meta($post->ID, 'copyright', true)=="true"):?> <div style="border-top:5px solid #F60; border-bottom:1px solid #ddd; padding:8px; background:#eee; margin:10px 10px 10px 0; width:340px;"> <div style="float:left; margin-right:12px; border-top:#fff solid 1px;"> <a rel="license" href="http://creativecommons.org/licenses/by-nc/2.5/cn/"><img alt="知识共享许可协议" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/2.5/cn/88x31.png" /></a> </div> <div style="font-size:11px; line-height:1.3em; color:#555;"> 本作品署有版权。本站作品遵循该许可: <a rel="license" href="http://creativecommons.org/licenses/by-nc/2.5/cn/">署名-非商业性使用 2.5 中国大陆</a>. 请务必遵守。 </div> <div style="clear:both;"></div> </div> <?PHP endif ?>

Javascript 数组排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function sort( arr) {
var a = arr || [1,2,3,5,3,2,6,4,9,8,7];
var N=a.length;
var temp;

for (i=0; i<N-1; i++) {
//外循环执行一次,内循环相应操作的数字少一个
for(j=0; j<N-i; j++) {
if (a[j] > a[j+1]) {
temp = a[j];
a[j] = a[j+1];
a[j+1] = temp;
}
}
}

return a;
}