有计划做一个工作流编辑器用于协同工作的应用里面, 最近顺便用svg做了一个简单的测试下, 先收藏起来, 以后做的时候再来回顾
demo地址: http://www.hoverlees.com/U/flowDemo.html
另外有个相关的项目jqplumb以后也可以参考下
有计划做一个工作流编辑器用于协同工作的应用里面, 最近顺便用svg做了一个简单的测试下, 先收藏起来, 以后做的时候再来回顾
demo地址: http://www.hoverlees.com/U/flowDemo.html
另外有个相关的项目jqplumb以后也可以参考下
ios上html5要做滚动, 可以用css实现, 用如下两句
overflow:scroll;
-webkit-overflow-scrolling:touch;
即可实现滚动, 不过目前这种控件有个小问题, 当滚动条停在最上方或最下方停止时, 再上拉或下拉, 不会滚动,而是将事件传递给了父容器; 另外,上面的css在android上没有弹性效果.
对于第一个问题,在ios上也有解决办法,即当用户开始触摸控件时,判断如果滚动位置在顶部,设置滚动位置在1像素,如果滚动位置在底部,设置滚动位置在底部像素-1
不过,目前的方式,还是只能让滚动用起来方便了,要做下拉刷新的话就真的没办法了.
所以我自己实现了一个滚动控件,效果基本上按ios的scroll控件做的, 可以做下拉的效果,而且ios和android效果一样.
可以扫下面的二维码试试.
页面地址:
例如执行 console.log(14583023831363353);
输出: 14583023831363352
大伙可要注意一下这种坑,嘿嘿.
<?php if($argc!=2){ echo "usage: php har_extractor.php <archive file name>"; exit(); } $urlBase="http://a.b.com/"; $archiveFileName=$argv[1]; $data=file_get_contents($archiveFileName); $archive=json_decode($data); $entries=$archive->log->entries; for($i=0;$i<count($entries);$i++){ $entry=$entries[$i]; $filePath=str_replace($urlBase,'',$entry->request->url); if(strlen($filePath)==strpos($filePath,'/')+1) $filePath.="index.html"; $fileDir=dirname($filePath); $fileName=basename($filePath); if(strpos($fileName,'?')!==false) $fileName=substr($fileName,0,strpos($fileName,'?')); if($fileName=='') $fileName='index.html'; if(!file_exists($fileDir)) mkdir($fileDir,0777,true); $encoding=$entry->response->content->encoding; $data=$entry->response->content->text; if($encoding=='base64'){ $data=base64_decode($data); } file_put_contents($fileDir.'/'.$fileName,$data); }
最近用了一下uploadify,在上传文件上还是很简单方便的。但是发现在chrome上会经常崩溃。网上找了一下解决办法,大多都是在uploadify.js后面加上一个随机时间以防止使用chrome的缓存,其实这个办法并不能完全解决崩溃问题,比如在uplodify页面进入其他页页后,再点击后退返回到这个uploadify页面,同样会出现崩溃问题。
其实如果不用缓存每次去请求服务器其实是个很浪费的事,关键是这样做根本就没有解决这个问题。真正的解决的办法也很简单,就是用setTimeout,让uplodify的初始化和浏览器缓存模块的功能不要在同时进行,操作如下:
$(function(){ setTimeout(function(){ $('#file_upload').uploadify({ 'swf' : 'tools/uploadify/uploadify.swf', 'uploader' : 'upload.php', 'onUploadSuccess' : function(file, data, response) { } }); },10); });
这样即可解决启动时/后退时崩溃问题。
Ajax有一个安全特性就是跨域访问的限制问题,虽然有很多解决的方法,但都没有使用代理的方式简单。
后来发现一个更简单的,就是给chrome浏览器添加 –allow-file-access-from-files –disable-web-security 启动参数,即可实现关闭安全检查的功能。
它的这个特性过份到访问同一个域下的不同端由都做了限制。有时候做测试开发很不方便。所以我就自己写了一个php的代理程序,由php接收ajax请求并转发到其他域的服务器,并将结果返回。
proxy.php代码如下:
<?php error_reporting(0); $destURL="http://otherdomain.com/to/path/script.jsp"; $queryString=$_SERVER['QUERY_STRING']; if($_SERVER['REQUEST_METHOD']=='GET'){ $url=$destURL.$queryString; echo file_get_contents($url); } else{ $url=$destURL.$queryString; $context = array(); $context['http'] = array( 'method' => 'POST', 'header' => 'Content-type: application/x-www-form-urlencoded', 'content' => http_build_query($_POST) ); echo file_get_contents($url, false, stream_context_create($context)); } ?>
nodejs使得做客户端的人也可以做服务器开发,比较可惜的是目前HTML5客户端支持的WebSocket协议nodejs自身不支持。不过也有很多完善的模块提供使用。
我写这个模块的目的只是为了体验下nodejs的服务器开发而已,打算自己以后写得玩的就用这个算了。其中websocket.js是Websocket服务器模块,server.js是测试代码,跟以前写的一样,模块不支持大于65535的数据包发送和接收。
首先是server.js,用法跟客户端类似:
//引入模块 var server=require("./websocket.js"); //监听"/"请求,可以加入多个监听。 server.addListener("/",function(ws){ ws.onmessage=function(packet){ ws.send(new Buffer("Hello World!")); } ws.onclose=function(){ console.log("session disconnect"); } }); server.keepAlive=3000000; server.timeout=0; //开启服务器 server.start("127.0.0.1",8766);
为了尽量实现浏览器兼容,同时又能方便进行节点定位,我就写了这两个函数,对于支持querySelector的浏览器会调用自带的querySelector,如果浏览器不支持,就调用自己实现的函数。
此函数可能有些bug,不过现在我还没遇到,有人要是遇到了给个留言我有空就去修掉。
//支持 #id|.classname|tagname|tagname.classname|tagname#id四种,如果要多层筛选,请重复调用 function querySelectorAll(node,selector){ if(typeof(document.querySelectorAll)!='undefined'){ return node.querySelectorAll(selector); } var tname; var citems; function findElementsByClassNameInner(n,className){ var items= n.children; for(var i=0;i<items.length;i++){ if(items[i].className==className){ citems.push(items[i]); } findElementsByClassNameInner(items[i],className); } return citems; } function findElementsByIDInner(n,id){ var items= n.children; for(var i=0;i<items.length;i++){ if(items[i].id==id){ citems.push(items[i]); } findElementsByIDInner(items[i],id); } return citems; } if(selector.charAt(0)=='.'){ tname=selector.substring(1); citems=new Array(); var items=findElementsByClassNameInner(node,tname); return items; } else if(selector.charAt(0)=='#'){ var id=selector.substring(1); citems=new Array(); var items=findElementsByIDInner(node,id); return items; } else if((r=selector.match(/(\w+)\.(\w+)/))!=null){ tagName=r[1].toLowerCase(); className=r[2]; citems=new Array(); var titems=findElementsByClassNameInner(node,className); var items=new Array(); for(i=0;i<titems.length;i++){ if(titems[i].tagName && titems[i].tagName.toLowerCase()==tagName){ items.push(titems[i]); } } return items; } else if((r=selector.match(/(\w+)#(\w+)/))!=null){ tagName=r[1].toLowerCase(); id=r[2]; citems=new Array(); var titems=findElementsByIDInner(node,id); var items=new Array(); for(i=0;i<titems.length;i++){ if(titems[i].tagName && titems[i].tagName.toLowerCase()==tagName){ items.push(titems[i]); } } return items; } else{ var items= node.getElementsByTagName(selector); return items; } } //支持 #id|.classname|tagname|tagname.classname|tagname#id四种,如果要多层筛选,请重复调用 function querySelector(node,selector){ if(node==null) return null; if(typeof(document.querySelector)!='undefined'){ return node.querySelector(selector); } var items=querySelectorAll(node,selector); return items.length==0 ? null:items[0] } //调用示例 window.onload=function(){ //var li=document.querySelectorAll("#Test li.a1"); var test=querySelector(document.body,"#Test"); var li=querySelectorAll(test,"li.a1"); alert(li.length); }