2017年1月 – Onlyke

CSS body被设置perspective属性之后导致fixed失效的情况

前几日修改一个网页，发现设置css position为fixed居然起不到任何作用

元素无法被固定，会随着滚动条的滚动而移动走

后来发现把body中的perspective属性去掉就好了，包括 -webkit-perspective 和 -moz-perspective

解决Handsontable在minSpareRows, stretchH和rowHeaders开启的情况时，自动添加的新行宽度和列头宽度不一致导致表格错位的问题

Handsontable的初始化代码如下

// Define element
    var hot_populate = document.getElementById('hot_populate')

    // Initialize with options
    var hot_populate_init = new Handsontable(hot_populate, {
        data: hot_populate_data,
        startRows: 8,
        startCols: 5,
        minSpareRows: 1,
        colHeaders: true,
        rowHeaders: true,
        stretchH: 'all',
        contextMenu: true,
    });

// Define element

var hot_populate = document.getElementById('hot_populate')

// Initialize with options

var hot_populate_init = new Handsontable(hot_populate, {

data: hot_populate_data,

startRows: 8,

startCols: 5,

minSpareRows: 1,

colHeaders: true,

rowHeaders: true,

stretchH: 'all',

contextMenu: true,

});

这时，如果我们编辑表格自动生成的最后一行，就会发现只要输入的文本长度比较短，整个表格会因为当前列的宽度问题而发生错位。

经过各种搜索，我也没有发现什么好的解决方案，只能采用了一种每次在创建新行后刷新表格绘制的方法。而且实现的过程也比较绕远，不过问题最终还是解决了。如果有更好的办法，欢迎大家分享给我。

首先，打开handsontable.min.js，在文件开头加入

var mydansunFixNewColWidth = new Event('mydansunFixNewColWidth');

1	var mydansunFixNewColWidth = new Event('mydansunFixNewColWidth');

然后，往下查找 instance.draw()

你会找到下面这行代码

n.addEventListener(window,"resize",function(){"none"!==t.instance.getSetting("stretchH")&&t.instance.draw()}),

1	n.addEventListener(window,"resize",function(){"none"!==t.instance.getSetting("stretchH")&&t.instance.draw()}),

然后把下面这行代码添加到上面那行代码的后面（注意上面那行代码最后有个逗号）

n.addEventListener(window,"mydansunFixNewColWidth",function(){"none"!==t.instance.getSetting("stretchH")&&t.instance.draw()}),

1	n.addEventListener(window,"mydansunFixNewColWidth",function(){"none"!==t.instance.getSetting("stretchH")&&t.instance.draw()}),

最后，我们修改之前Handsontable的初始化代码如下

// Define element
    var hot_populate = document.getElementById('hot_populate')

    // Initialize with options
    var hot_populate_init = new Handsontable(hot_populate, {
        data: hot_populate_data,
        startRows: 8,
        startCols: 5,
        minSpareRows: 1,
        colHeaders: true,
        rowHeaders: true,
        stretchH: 'all',
        contextMenu: true,
        afterCreateRow:function(index,amount){
            var instance = hot_populate_init;
            if(instance !== undefined){
                window.dispatchEvent(mydansunFixNewColWidth);
            }
            
        },
    });

// Define element

var hot_populate = document.getElementById('hot_populate')

// Initialize with options

var hot_populate_init = new Handsontable(hot_populate, {

data: hot_populate_data,

startRows: 8,

startCols: 5,

minSpareRows: 1,

colHeaders: true,

rowHeaders: true,

stretchH: 'all',

contextMenu: true,

afterCreateRow:function(index,amount){

var instance = hot_populate_init;

if(instance !== undefined){

window.dispatchEvent(mydansunFixNewColWidth);

}

});

再返回我们的页面，刷新。现在添加的新行已经可以拥有正确的宽度了，错位的问题也得到了解决。

Windows 下使用DiskGenius制作OS X EI Capitan 和macOS Sierra安装恢复U盘 (Recovery HD)

自己的macbook pro前段时间出了故障需要重装系统，后来发现所有的教程里都是在macos下面通过dmg镜像来制作启动U盘的，这对于一个macos已经进不去的我来说没有任何用处。还有的方法是通过一个可以在windows写HFS+分区的软件，那个软件我忘了名字，据说可以用，不过缺点是速度超级超级慢。

所以在各种困难之后，我最终还是选择了路由器上高速vpn，网络恢复了我的macbook。时间也不算太长吧，主要是vpn质量好。

后来为了避免再次出现这种情况，在系统恢复之后，我马上做了一个含有OS X EI Capitan和macOS Sierra安装镜像的U盘，并使用DiskGenius做了磁盘镜像。这样如果还有跟我一样遭遇的人，就可以在windows下使用这个软件直接制作可以安装上面两个系统的U盘，并且速度非常快。

DiskGenius 专业pojie版下载

地址1：http://www.upantool.com/qidong/2012/DiskGenius_3.7.1.html

备用网盘2：链接: https://pan.baidu.com/s/1qY6NQ00 密码: acbp

恢复镜像网盘下载地址：

链接: https://pan.baidu.com/s/1eRU844E 密码: 13g7

镜像名称：Install MacOS.vdi

CRC32: 6C3709AD
MD5: 69A2B9787A26766739F6F31901BBDCFB
SHA-1: 765946FA9535F16E1ED288944C327153B43FF52A

CRC32: 6C3709AD

MD5: 69A2B9787A26766739F6F31901BBDCFB

SHA-1: 765946FA9535F16E1ED288944C327153B43FF52A

使用方法：

首先打开DiskGenius，挂载我们的镜像文件
然后选择工具/克隆硬盘
然后分别选择我们刚才挂载的那个镜像文件为源磁盘
然后在下一步选择你准备好的U盘，然后再下一步选择按文件系统结构原样复制即可

磁盘克隆完毕之后，就可以把U盘插入到你的macbook然后开机U盘启动选择系统进行安装了！

用js解决bootstrap的列col在重新在新的一行排列时，会受到上一行列col高度影响的问题

我们经常遇到这种情况，当我们在一行（row）中放置多个列（col）的时候，新起一行的列因为上面一行有一列超高，位置发生了移动。

bootstrap官方的解决方法是在每一行的末尾，插入下面的div用来清除浮动

http://v3.bootcss.com/css/#grid-responsive-resets

<div class="clearfix visible-xs-block"></div>

1	<div class="clearfix visible-xs-block"></div>

其中， visible-xs-block 是可以改变的，改变成你每个列用的栅格种类，比如你所有的栅格用的是 col-lg-4 （如上图），你就需要改成 visible-xs-block

但是这样，我们需要对每一行都做处理，这不适合下面两种情况

如果每一列是由程序（比如PHP）自动生成的，没办法手动添加
每一列用了多种栅格，比如 col-md-6 col-lg-4 ，手动很麻烦

下面我编写了一个js来快速解决这个问题，首先我们把所有需要处理的栅格都加上 col-split 的class，然后把下面的js代码放在合适的位置让他能够执行即可。

$(".col-split").each(function(index, el) {
        var $this = $(this);
        var $parent = $this.parent('.row');
        if($parent.data("colSplit") === true){
            return;
        }
        $parent.data("colSplit",true);
        var classes = $this.attr("class");
        var exp = new RegExp(/col-([a-zA-Z]{2})-(\d+)/,"g");
        var result;
        while ((result = exp.exec(classes)) != null){
            var visible = "visible-" + result[1] + "-block";
            var width = parseInt(12 / parseInt(result[2]));
            $parent.children('.col-split').each(function(index, el) {
                var $item = $(this);
                var number = index + 1;
                if(number % width == 0){
                    $item.after('<div class="clearfix ' + visible + '">');
                }
            });
        }
    });

$(".col-split").each(function(index, el) {

var $this = $(this);

var $parent = $this.parent('.row');

if($parent.data("colSplit") === true){

return;

}

$parent.data("colSplit",true);

var classes = $this.attr("class");

var exp = new RegExp(/col-([a-zA-Z]{2})-(\d+)/,"g");

var result;

while ((result = exp.exec(classes)) != null){

var visible = "visible-" + result[1] + "-block";

var width = parseInt(12 / parseInt(result[2]));

$parent.children('.col-split').each(function(index, el) {

var $item = $(this);

var number = index + 1;

if(number % width == 0){

$item.after('<div class="clearfix ' + visible + '">');

}

});

}

});

添加代码完成后，刷新页面，我们想要的样子就出现了。

上面的js代码支持使用多种栅格的列，比如 col-md-6 col-lg-4 ，他会在合适的位置自动插入，效果如图