有计划做一个工作流编辑器用于协同工作的应用里面, 最近顺便用svg做了一个简单的测试下, 先收藏起来, 以后做的时候再来回顾
demo地址: http://www.hoverlees.com/U/flowDemo.html
另外有个相关的项目jqplumb以后也可以参考下
22
Jul
Jul
ios上html5要做滚动, 可以用css实现, 用如下两句
overflow:scroll;
-webkit-overflow-scrolling:touch;
即可实现滚动, 不过目前这种控件有个小问题, 当滚动条停在最上方或最下方停止时, 再上拉或下拉, 不会滚动,而是将事件传递给了父容器; 另外,上面的css在android上没有弹性效果.
对于第一个问题,在ios上也有解决办法,即当用户开始触摸控件时,判断如果滚动位置在顶部,设置滚动位置在1像素,如果滚动位置在底部,设置滚动位置在底部像素-1
不过,目前的方式,还是只能让滚动用起来方便了,要做下拉刷新的话就真的没办法了.
所以我自己实现了一个滚动控件,效果基本上按ios的scroll控件做的, 可以做下拉的效果,而且ios和android效果一样.
可以扫下面的二维码试试.
页面地址:
18
Mar
Mar
例如执行 console.log(14583023831363353);
输出: 14583023831363352
大伙可要注意一下这种坑,嘿嘿.
02
Jul
Jul
<?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);
}
20
Aug
Aug
最近用了一下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);
});
这样即可解决启动时/后退时崩溃问题。
20
Sep
Sep
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));
}
?>
20
Aug
Aug
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);
13
Jul
Jul
为了尽量实现浏览器兼容，同时又能方便进行节点定位，我就写了这两个函数，对于支持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);
}
