博客园_sohighthesky

Chrome无法打印pdf问题

2011-11-10T07:02:00Z

最近一直在写文档，发布出去的时候就想用pdf的格式，结果按ctrl + p

chrome 一直出现了这该死的提示"The selected printer is not available or not installed correctly. Check your printer or try select another printer. "

因为家里的chrome可以正常打印，还以为是win平台的chrome问题呢，结果昨天让同事让试了发现他那里的win也可以正常打印pdf，

今天就在想原因，先是以为chrome更新导致的问题，然后把chrome卸载了全新安装还是不行，再然后删除所有用户数据重装，依然不行，

我绝望了，好吧，放弃你，正好chrome的书签同步也不给力，还不如试试iClond ，于是装safari，再点打印，出现提示让先安装打印机，点确定出了一个框”Windows can't open Add Printer. The local print spooler service is not running. Please restart the spooler or restart the machine."

于是一不小心终于看到了"print spooler service" 这几个词，于是services.msc，打开这该死的服务，回chrome，终于可以正常打印pdf了

本文链接

Integrating JavaScript lint with vim in Linux

2011-07-02T09:41:00Z

转战linux 了，于是javascriptlint也要linux版的。

去Javascript Lint Download一看，还要自己编译。

Note:别忘了去掉jsl.conf的最后一行

本文链接

Cygwin在打开在当前目录

2011-06-24T07:49:00Z

前段时间捣鼓Linux, 有时切换到windows时，也习惯了linux命令，于是就装了cygwin,

在win7上按住shift时右键一个“Open Command window here", 为了方便，就想在这里添加一个Open Cygwin的菜单，

不过添加注册表菜单后还是发现cygwin启动后打开的时home目录，后来发现cygwin启动时加了login参数就会进入home目录，试了几种办法，无果

今天在环境变量里加了个HOME发现，cygwin的home也被改了，想到既然cygwin可以读取系统变量，把这样可以把启动的目录保存在系统变量中，然后

cd $T就可以打开启动目录了，这样好歹也比以前方便点 ,于是就开始动手了，后来发现可以直接用shell脚本来执行cd，于是完整的打开当前目录就搞定了

下面是我的注册表（不想按shift的可以去年extended那行）

1 Windows Registry Editor Version 5.00
2
3 [HKEY_CLASSES_ROOT\Directory\Background\shell\cygwin]
4 @="Open &Cygwin"
5 "Extended"=""
6
7 [HKEY_CLASSES_ROOT\Directory\Background\shell\cygwin\command]
8 @="C:\\cygwin\\Cygwin.bat %V"
9

修改Cygwin.bat如下:

1 @echo off
2 set _T=%*
3 C:
4 chdir C:\cygwin\bin
5
6 bash --login -i

然后修改cygwin下.bash_profile执行cd命令

43
44 export _T=${_T//\\//} # replace backslash to fowardslash
45 if [[ $_T == "" ]]; then
46 export _T="c:/Users/Administrator"
47 fi
48 cd "$_T"

这样右键菜单里就多了个Open Cygwin了，很爽啊，抛弃难用的cmd吧

本文链接

Open frame in new tab[Chrome Extension]

2011-04-14T00:55:00Z

下载地址:点击安装

Chrome一个简单拓展，给右键菜单添加一个在新标签页中打开菜单，

经常在iframe中开发，需要打开新标签页的可能会有用，很简单的代码

4 chrome.contextMenus.create({
5     title: "Open frame in new tab",
6     onclick: function(info, tab){
7         chrome.tabs.create({
8             url: info.frameUrl || info.pageUrl,
9             index: tab.index + 1,
10             selected: true
11         });
12     }
13 });

Todo: 本来想只在iframe中添加。貌似不怎么好实现

本文链接

字符串连接类(Javascript)

2011-03-28T01:06:00Z

Get latest version

根据12楼，改进下，支持连写：

1 /*
2  * @author: uedsky
3  * @version: 1.1
4  */
5
6 /**
7  * @class String concat
8  * @return {StrBuf/String}
9  * @constructor
10  * eg:
11     var buf = new StrBuf("contructor str\n");
12     buf.push("hello,")
13     .push("Today is {0}, {1}", "Monday", "March 28th")
14     .push("${name} is a good ${category} company", {name: "Google", category: "Intenet"});
15     document.write(buf);// auto call toString method
16     console.log(buf);
17     console.log(StrBuf("static {0} method", "invoke"));
18  */
19 var StrBuf = function(s) {
20     this.data = [];
21     if(s) {
22         var args = arguments, buf;
23         if(this instanceof StrBuf) {
24             this.push.apply(this, args);
25         }else {// static invoke
26             buf = new StrBuf();
27             return buf.push.apply(buf, args).toString();
28         }
29     }
30 };
31 StrBuf.prototype = {
32     // add String to the instance
33     push: function(s, j) {
34         var args = arguments;
35         if(args.length < 2) {
36             this.data.push(s || "");
37         }else if(typeof j == 'object') {
38             this.data.push(s.replace(/\$\{([\w.]+)\}/g, function($, $1) {
39                 return ($1 in j) ? j[$1] : $;
40             }));
41         }else {
42             this.data.push(s.replace(/\{(\d+)\}/g, function($, $1) {
43                 return args[+$1 + 1];
44             }));
45         }
46         return this;
47     },
48     toString: function() {
49         return this.data.join("");
50     }
51 };

最近在看一同事写的代码时，有一个字符串用了一堆“+”号，看了半天没明天到底会输出什么样的内容，

就想到用字符串连接的类，把以前的方法写成了类的方式，方便调用，

支持实例调用和静态调用

参数可以是单独的字符串，或者json的格式，或者类似参数数组的方式，见下面示例

* @author: uedsky
* @version: 1.0
*/

/**
* @class String concat
* @return {StrBuf/String}
* @constructor
*/
var StrBuf = function(s) {
    this.data = [];
    if(s) {
        var args = arguments, buf;
        if(this instanceof StrBuf){
            this.push.apply(this, args);
        }else{// static invoke
            buf = new StrBuf();
            buf.push.apply(buf, args);
            return buf.toString();
        }
    }
};
StrBuf.prototype = {
    // add String to the instance
    push: function(s, j){
        var args = arguments;
        if(args.length < 2) {
            this.data.push(s || "");
        }else if(typeof j == 'object'){
            this.data.push(s.replace(/\$\{([\w.]+)}/g, function($, $1){
                return ($1 in j) ? j[$1] : $;
            }));
        }else {
            this.data.push(s.replace(/\{(\d+)}/g, function($, $1){
                return args[+$1 + 1];
            }));
        }
    },
    toString: function(){
        return this.data.join("");
    }
};

调用示例如下：

var buf = new StrBuf("contructor str\n");

    buf.push("hello,");
    buf.push("Today is {0}, {1}", "Monday", "March 28th");

    buf.push("${name} is a good ${category} company", {name: "Google", category: "Intenet"});
    document.write(buf);// auto call toString method
    console.log(buf);
    console.log(StrBuf("static {0} method", "invoke"));

本文链接

微博咆哮体[Chrome Extension]

2011-03-23T01:22:00Z

传说最近咆哮体很火，昨晚下班就写了这个小玩意，在网页端发微博时，自动将微博内容转为咆哮体，

暂支持了腾讯，新浪，搜狐微博

先看下截图：

主要代码如下：

})();

下载地址：t_paoxiao

下载后Chrome会自动提示安装，其它浏览器拖到Chrome中安装即可

本文链接

css全兼容的字符串"截取"

2010-09-29T05:32:00Z

以前写的，放在这里：

.ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;-moz-binding:url('ellipsis.xml#ellipsis');display:block;}

ellipsis.xml

.ellipsis{

    text-overflow:ellipsis;/*for IE ...*/
    -o-text-overflow:ellipsis;/*for opera*/
    -moz-binding:url('ellipsis.xml#ellipsis');/*for firefox，需要下面的xml才有效*/
    display:block;/*这几个是额外项，加上之后上面样式才会有效果*/
    white-space:nowrap;
    overflow:hidden;
}

本文链接

高级的文件目录排序

2010-08-26T15:54:00Z

最近工作比较忙，好久没写文章了，这几天在做一个文件管理的模块，里面有排序的功能，产品经理看了说希望能做出更加智能的文件排序功能，就像是win7的名称排序一样，主要就是文件名中的数字会按大小排序，而不是直接按ascii码 ,这两天晚上没事，就先写了这个排序方法，下个版本中就可以用上了

双击打开测试页面，刚写完，欢迎大家帮忙测试

v3(2010-8-29)修复之前的bug，并可对属性拓展排序

//accepts a string; returns the string with regex metacharacters escaped. the returned string
// can safely be used at any point within a regex to match the provided literal string. escaped
// characters are [, ], {, }, (, ), -, *, +, ?, ., \, ^, $, |, #, <comma>, and whitespace
RegExp.escape = function (str) {
     return str.replace(/[-[\]{}()*+?.\\^$|,#\s]/g, "\\$&");
};
var fileSort=function(arr,getVal){
    var res=[],temp=[],i=0,j=0,k,reg,item,cur;
    getVal=getVal || function(a){return a};
    arr.sort(function(a,b){
        return getVal(a).localeCompare(getVal(b));
    });
    for(;i<arr.length;i++){
        cur=getVal(arr[i]);
        item=arr[i];
        if((k=cur.search(/\d+/))===-1 || i===arr.length-1){//最后一个文件时直接添加
            res[i]=item;
        }else {
            //转义正则特殊字符
            reg=new RegExp("^"+RegExp.escape(cur.substr(0,k))+"\\d+");
            while(reg.test(cur)){//more efficiency than search
                temp[j++]=item;
                if(i===arr.length-1)break;
                cur=getVal(arr[++i]);
                item=arr[i];
            }
            if(temp.length>0){
                temp.sort(function(a,b){
                    return parseInt(getVal(a).substr(k),10)-parseInt(getVal(b).substr(k),10);
                });
                res=res.concat(temp);
                temp=[];j=0;
                if(i!==arr.length-1){
                    i-=1;//减1，再执行查找使while结束的str
                }
            }
        }
    }
    return res;
}

测试代码
var arr=[
"//",
",",
"\"3",
"...",
"8",
"2",
"15",
"\"21",
",",
"...",
"1.jpg",
"9.jpg",
"234",
"99",
"13.jpg",
"8.jpg",
"idkinbec",
"idkinbed3",
"idkinbef",
"idkinbegh",
"idkin44.txt",
"idkinb1.txt",
"idkinbd.txt",
"idkinbe.txt",
"idkinbe3.txt",
"idkin(be12.txt",//正则特殊字符
"idkinbe5.txt",
"idkinbe34.txt",
"idkinbe25.txt",
"idkinb.txt",
"idkin23.txt",
"idkin1.txt",
"idkin5.txt",
"idk"
];
/*
for(var i=0;i<5;i++){
arr=arr.concat(arr);
}
var d=new Date();*/
var res=fileSort(arr);
//document.write('timeout : '+(new Date()-d)+'<br/>');

for(var i=0;i<res.length;i++){
    document.write(res[i]+"<br/>");
}
document.write("文件数为:"+arr.length+"/"+res.length);

arr=[
{name:'bb',size:'12'},
{name:'a',size:'5'},
{name:'2',size:'9'},
{name:'12',size:'3'}
]
res=fileSort(arr,function(item){
    return item.size;
});
for(i=0;i<res.length;i++){
    document.write("<br/>name:"+res[i].name+",size:"+res[i].size);
}
document.write("<br/>文件数为:"+arr.length+"/"+res.length);

主要的排序功能源码如下(v1)：

后来想想，上面的版本中，前面两个while完全是多余的，而且去掉之后，直接就支持了特殊字符后面中包含数字的排序

v2(注意RegExp尚未escape):

另外，最近用jq的发现:

1 :hidden 这个选择会选择所有不可见元素，如果是clone()的元素，还没添加到dom时，都是属于不可见

2 .serialize() 使用这个方法时，需要为form内的表单元素指定name,否则这个方法返回空字符串

3 jstree插件不能与早版本的validate插件同时使用，因为早版本的validate重新了jq的delegate方法,更新版本就好了

4 ui中DatePicker插件不能与有.hasDatepicker的文本框绑定，需要先去掉此类名，才行

5 closest,live(delegate)真是好用的方法

本文链接

javascript图片翻转效果

2010-07-05T15:36:00Z

从LC那里看的图片翻转效果，改了下：

点击图片显示演示效果

修改后的源代码如下：

<!DOCTYPE html>
<html>
<head>
<title> ImageRotation </title>
<meta charset="utf-8"/>
<style type="text/css">
#demo { cursor:pointer; position:absolute;filter:progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");}
</style>
</head>
<body>
<div id="container" style="width:500px;height:350px;position:relative;margin:0 auto">
    <div id="demo">
        <img src="http://images.cnblogs.com/cnblogs_com/bluedream2009/201609/o_mm.jpg" width="500" height="333" />
    </div>
</div>
<script>
var Img = function() {
    var g = function(id) { return document.getElementById(id); },
    isIE = !!window.ActiveXObject,
    el=document.createElement("div"),
    rotateAtt=(isIE || el.style.transform==="")?"transform"://
    el.style.WebkitTransform===""?"WebkitTransform"://webkit for chrome and safari
    el.style.MozTransform===""?"MozTransform":"OTransform",//mozilla : opera
    i = 0, sinDeg = 0, cosDeg = 0, timer = null ,
    rotate = function(target, degree) {
        target = g(target);
        clearInterval(timer);
        var orginW = target.clientWidth, orginH = target.clientHeight,
        run=function(angle) {
            if (isIE) { // IE
                cosDeg = Math.cos(angle * Math.PI / 180);
                sinDeg = Math.sin(angle * Math.PI / 180);
                with(target.filters.item(0)) {
                    M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
                }
                target.style.top = (orginH - target.offsetHeight) / 2 + 'px';
                target.style.left = (orginW - target.offsetWidth) / 2 + 'px';
            } else {
                target.style[rotateAtt]= "rotate(" + angle + "deg)";
            }
        };
        timer = setInterval(function() {
            i += 10;
            run(i);
            if (i > degree - 1) {
                i = 0;
                clearInterval(timer);
            }
        }, 10);
    }
    return {rotate: rotate}
}();
window.onload = function() {
    Img.rotate('demo', 360);
    document.getElementById('demo').onclick = function() {
        Img.rotate('demo', 360);
    }
}
</script>
</body>
</html>

本文链接

打印样式表(UE之可用性)

2010-06-28T05:15:00Z

介绍

一个打印样式表设置网页的样式，使页面在打印的时候，呈现更友好的样式。打印样式表已存在数年了，然而，现在很少有网站使用到它，这意味着我们让并不是很适合的网页打印到纸上。(比如yahoo : http://developer.yahoo.com/performance/rules.html，这个页面打印后，会显示右边的边栏，而通常我们只是想要这篇文章的内容，而且显示右边后，导致内容宽度太小，字体超小 ,所以如果你打印过个页面，你就会意识到本文的必要性)

打印样式表极大的提高了可用性，尤其是有很多内容的页面（比如本页面）
它可以简单迅速的设置

一些网站也提供了打印版本的链接，但是很明显这还需要建立和维护。它还需要用户在页面里找到这个链接，然后打开打开这个页面，然后再打印。然而人们通常是直接“文件-打印“或者直接按ctrl+p.

如何设置你的打印样式表

打印样式表与我们通常使用的样式表很像，但是它只会在打印的时候调用。要使用一个打印样式表，只需要将下面的代码放到head里

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

print.css就是打印样式表文件,media="print"意味着这个样式表只有在打印的时候被调用。属性media有很多可选项（比如handheld,tv,screen）,查看完整列表

删除不需要的项目

通常我们只要想要logo和页面的内容在出现在打印版本里，所以通常要移除头部和底部（或者移除左边和右边的边栏），也许还有其它单独的元素不想显示，只需要在html里加上class="noprint",要移除这些内容，只需要设置:display:none,这样样式表打概可以写成这样：

#header, #nav, .noprint {display: none;}

设置页面格式

确保页面内容涵盖了充分的宽度（防止像上面yahoo那页面一样打印出来宽度和字体太小，无法阅读的杯具）

#container, #container2, #content {width: 100%; margin: 0; float: none;}

链接样式

a:link, a:visited {color: #781351}

链接打印出来后看不到地址了，我们也可以让其地址显示在链接后面

.printlink a:after{
content:" <" attr(href) ">";
color:#FF0000;font-style:italic;
}

制作打印样式表

在制作打印样式表时，可以直接将样式写在主样式表后面，检查页面在屏幕上显示的内容，直到满意，然后可以剪切到print.css中，给所有的页面使用

完整样式下载：print.css
中文出处：http://www.uedsky.com/sky/article/print-stylesheet.html
英文原文：http://www.codeproject.com/KB/HTML/print-stylesheet.aspx
注：本来想在标题加个”译“的，but。。。。

本文链接