专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

开发

  • as3 unescape 转义后的unicode中文

    / 分类: 开发 / No Comments

    比如在php里,json_encode后的中文就被转成前面是反斜线开头的unicode形式,比如“汉字”->\u6c49\u5b57。
    在as3里unescape解码的是%u6c49%u5b57这样的百分号开头形式。
    所以需要替换json字符串里面的\u->%u。

    PHP里面:
    $str = preg_replace("/\\\\u/u", '%u', $str);
    而AS3里面:
    str = unescape(str.replace(/\\\u/g, '%u'));

  • html5、css3模版 K Blue for typecho、sablog-x、wordpress

    / 分类: 开发,实践 / 56 Comments

    sablog转换成typecho了。sablog仍然保留,感觉sablog的速度那是相当的快,舍不得啊,就是加独立页面麻烦些。typecho虽然慢了点,但是制定比较方便。两个都是优秀的程序,两个都用。

    新制作的模版用html5、css3,使用了css3的很多效果: Border Radius、Box Shadow、Text Shadow、RGBA、Transitions、Gradients,还有目前只有webkeit内核支持的text-stroke。

    基于蓝色调的,所以命名:K Blue
    特点:
    1、基于html5、css3,使用了很多css3的特性。在实现css3效果的同时尽可能的让其他浏览器保持效果一致。
    2、此风格没有使用一张图片,一个小图标是base64存在css里面,令一个是头部的高亮,cr、ff可以直接渲染,op需要svg,但是还是不能打到满意的效果,所以为ie9/8、op准备了一个base64的图。由于ie6/ie7不支持data uri,MHTML在这里也显得没必要,就设置ie6/ie7使用默认样式了,效果差距不太大。所以这个模版,无论那种浏览器,加载页面的样式只有一个css的连接数。
    3、由于各浏览器对css3的支持不同,按显示效果由好到差:chrome/safari>firefox3+>oprea>ie9>ie8>ie6/ie7
    G1、G2这样的比较绚的效果只做了chrome/safari下的,原因:ff也可以实现这个效果,但是渲染不流畅。其他浏览器只能尽可能实现类似的感觉了。
    4、html用的html5,但ff2不支持html5标签,所以ff2下会变形,解决方法也是有的,只是比较麻烦,用ff的人应该也不会像IE6那么根深蒂固,该升级的应该都升级了吧。再者这个是个人博客,不是大众网站,所以不考虑ff2了。
    5、经过检测的浏览器:chrome10、safari5、firefox3.6、ff4、k-meleon、ie9、ie8、ie7、ie6
    6、很多细节都做了,不全部阐述了,用chrome/safari浏览你会发现那是相当滴帅气。

    注意:
    首页调用了指定分类的内容,如果没有该分类肯定就有问题,index.php
    <h2 class="tit"><?php _e('开发'); ?></h2>
    <h2 class="tit"><?php _e('工具'); ?></h2>
    这两行下面的<ul>...</ul>里面的php语句。我这里调用的是mid= 6、7分类下面的文章(Widget_Archive@7、"mid= 7")。你的应该和我的不同,需要自己修改自己的分类id。令需要安装随机日志插件

    K Blue、K Blue G1、K Blue G2的区别:
    K Blue :基础简洁版,背景色是灰色的过度,背景无彩色圆。
    K Blue G1 : 跟"K Blue"类似,背景色加上了26个彩色的圆。
    K Blue G2 : 暗色调,背景色是黑色加上了26个彩色的圆。

    演示:
    K blue 基本版演示
    K blue G1演示
    K blue G2演示
    G1、G2还有几种显示方式,演示页面有说明(请用chrome、safari体验)。所以这次相当于发布了几个模版了。。

    下载:

    K blue 基本版for Typecho 0.8 (2011-01-06更新)
    地址2 mega
    K blue 基本版for Sablog-x 2.0 Beta(20100802) (2011-02-17更新)
    K blue 基本版for WordPress 3.0.5 (2011-02-20更新)
    Change: 链接文字、底部列表动画;数字分页动画;增加sablog、wordpress版。
    Note: te、sa、wp的sidebar请自己diy。

    非常感叹css3的强大,用chrome/safari看下面的K blue G2演示链接,就明白了,背景里的那些渐变的圆都是css3的效果,而且按照百分比排列。以前做到这样的效果需要做一张很大的图去实现,这张图要足够大,否则宽屏下面就有问题,但是这里无论你的显示器多宽,它们还是按照比例排列。可惜目前只有webkeit支持的比较好,firefox虽然也可以,但是滚动页面时很不流畅。另外,头部的高亮也是css3的效果。

    G1、G2的背景那里我做了很久,一共添加了26个渐变的圆形,而且尽量做出随机的感觉。其实是一个一个排出来的。喜欢前端开发的同学可以看看。

    另外我下的svn最新打包版0.8 | 10.8.15,附件不能上传。看了下是js报错,解决办法:编辑admin/file-upload-js.php,编辑:142行,post_params: {"cid" : <?php $fileParentContent->cid(); ?>}, 注意后面的","号。

  • PHP 读取大文件的X行到Y行的内容

    / 分类: 开发,实践 / 5 Comments

    最新写了个小程序,需要读取一个文件的几行内容,但是文件比较大,所以研究了下PHP读取大文件的几行内容的方法,写了一个方法,代码如下(加了注释):

    //返回文件从X行到Y行的内容(支持php5、php4)
    function getFileLines($filename, $startLine = 1, $endLine=50, $method='rb') {
    $content = array();
    $count = $endLine - $startLine;
    if(version_compare(PHP_VERSION, '5.1.0', '>=')){// 判断php版本(因为要用到SplFileObject,PHP>=5.1.0)
    $fp = new SplFileObject($filename, $method);
    $fp->seek($startLine-1);// 转到第N行, seek方法参数从0开始计数
    for($i = 0; $i <= $count; ++$i) {
    $content[]=$fp->current();// current()获取当前行内容
    $fp->next();// 下一行
    }
    }else{//PHP<5.1
    $fp = fopen($filename, $method);
    if(!$fp) return 'error:can not read file';
    for ($i=1;$i<$startLine;++$i) {// 跳过前$startLine行
    fgets($fp);
    }
    for($i;$i<=$endLine;++$i){
    $content[]=fgets($fp);// 读取文件行内容
    }
    fclose($fp);
    }
    return array_filter($content); // array_filter过滤:false,null,''
    }

    Ps:
    上面都没加"读取到末尾的判断":!$fp->eof() 或者 !feof($fp),加上这个判断影响效率,自己加上测试很多很多很多行的运行时间就晓得了,而且这里加上也完全没必要。

    从上面的函数就可以看出来使用SplFileObject比下面的fgets要快多了,特别是文件行数非常多、并且要取后面的内容的时候。fgets要两个循环才可以,并且要循环$endLine次。

    此方法花了不少功夫,测试了很多中写法,就是想得出效率最高的方法。哪位觉得有值得改进的欢迎赐教。

    使用,返回35270行-35280行的内容:

    echo '<pre>';var_dump(getFileLines('test.php',35270,35280));
  • 开发全屏web操作项目,浏览器全屏的解决

    / 分类: 开发,实践 / No Comments

    目前为移动开发一个项目,是全触摸屏的,基于web的,当然我的工作只限于前端开发的工作,完成项目首先要解决的就是浏览器全屏展示网页。像移动的自助缴费系统、ATM机等有些应该是这样做的(记得有次还在某个银行看到了win2000的启动界面)

    找了下资料,以前的文章应该是通过js打开一个全屏的浏览器窗口的吧,不过那个好像会出现一些问题。

    后来才找到了IE的Kiosk Mode全屏模式(Kiosk ModeKiosk Software广泛用于公共电脑或者嵌入系统,如可以上网的公共电话、ATM、机场自助服务系统、网吧管理软件等) ,在ie的快捷方式里面加入“-k”这个参数,就实现了真正的全屏,而非F11(IE下的F11浏览器的菜单和底部的状态栏)还是能看到部分的。

    Kiosk模式下的一些快捷键:

    Alt + 左箭头:上一页
    Alt + 右箭头:下一页
    Ctrl + D:加到我的收藏夹
    Ctrl + H:开启历史文件夹
    Ctrl + B:开启整理收藏夹
    Ctrl + L:输入网址,开启新网页
    Ctrl + N:开新窗口
    Ctrl + R:刷新(或按 F5)
    Ctrl + W:关闭目前的窗口(或按 Alt+F4)

    该方法只对起始页有效,通过该页弹出的窗口不是全屏幕窗口

    还有一个就是chrome浏览器下的F11,这个效果是目前使用过的浏览器里面全屏比较彻底的,但是上面还是有一条黑边,鼠标移上去就好提示按F11退出全屏,所以根据需要最好的就是IE下面的Kiosk模式了,据说是IE5.0+都支持,我用IE8测试是没问题的。

  • jquery jsonp Ajax 跨域提交数据 (PHP)

    / 分类: 开发 / 6 Comments

    最近做了一个Ajax提交反馈页,但是由于空间不支持一些基本的函数,所以准备做个跨域提交。

    javascript部分:

    $("#btn").click(function(k) {
        //...
        var j = form.serializeArray();//序列化name/value
        $.ajax({
            url: "另一个域名/test.php",
            dataType: 'jsonp',
            data: j,
            jsonp: 'jsonp_callback',
            success: function(json) { //返回的json数据
                json = json || {};
                if (json.msg=='err'){
                    alert(json.info);
                }else if (json.msg=="ok"){
                    alert('提交成功');
                }else{
                    alert('提交失败');
                }
            },
            timeout: 3000
        })
        //...
    });

    php部分:

    $jsonp_callback=$_GET['jsonp_callback'];
    //...
    //如果正确
    echo $jsonp_callback,'({"msg":"ok"})';
    //如果错误
    echo $jsonp_callback,'({"msg":"err","info":"因人品问题,发送失败"})';
    //...

    值得注意的是采用jsonp 方式,beforeSend / error 都不能用了,所以beforeSend里面用js实现的验证只能用ajax在服务器端test.php上面验证了。