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

Handsontable的初始化代码如下

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

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

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

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

你会找到下面这行代码

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

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

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

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

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

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

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

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

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

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

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

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

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

google-font字体缓存,将谷歌字体保存在本地,方便网页使用,避免被墙

自己写的小程序,可以将fonts.googleapis.com的字体缓存在本地,不需要使用CDN,也不用担心被墙了

尤其是国内的CDN,fonts.useso.com这个网站不支持https,比如我的博客就把字体缓存了

QQ截图20160309233138

使用方法:

  1. 把google-fonts的字体放在CSS Url里面,比如:https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400italic|Lato:300italic
  2. 然后点击Select A Folder选择保存的目录
  3. 在保存目录找到缓存好的字体和css文件,在HTML中引用即可,css文件内容如图
    QQ截图20160309233904

网盘链接: http://pan.baidu.com/s/1o7wI0K6 密码: csk5

Sublime3 安装SublimeLinter PHP+Javascipt+CSS 帮助检测语法错误

前段时间把自己的Sublime2更新到了3,发现原先的SublimeLinter配置文件不起作用了。目前国内给出相应答案的网站比较少,现在给出对于Sublime3的解决方案。

在Sublime3中,SublimeLinter的检测插件被独立了出来,也就是说我们除了SublimeLinter本体以外,我们还需要安装Sublimelinter-phpSublimelinter-jshintSublimelinter-csslint这三个插件。

QQ截图20150918184608

然后需要用nodejs安装jshint和csslint,使用如下命令。(没有安装nodejs请先安装nodejs)

安装完成后如下图所示

QQ截图20150918182832

可以使用如下命令检查这两个插件是否安装完成

除了nodejs以外,我们还需要php程序包,没有的可以到http://php.net/downloads.php这里下载,这里我放到了D盘根目录

QQ截图20150918185414

接下来打开SublimeLinter的设置,如下图

QQ截图20150918184709

我们配置文件修改如下

其中paths项,需要把PHP的路径放进去,show_errors_on_save可以控制是否在保存的时候提示错误,这里我选择了打开

然后重启sublime,就可以执行代码检查了

在初始化select2之后无法使用data属性动态改变数据的解决方法

这几天写的项目,发现在初始化select2之后无法使用data属性动态改变数据,如果使用以下的代码

Chrome提示: Option ‘data’ is not allowed for Select2 when attached to a <select> element

解决方法如下:

polymer小例子,在nwjs中实现数字统计小应用

node-webkit的定义,按照作者的说法:

“ 基于node.js和chromium的应用程序实时运行环境,可运行通过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。node.js和webkit的结合体,webkit提供DOM操作,node.js提供本地化操作;且将二者的context完全整合,可在HTML代码中直接使用node.js的API。”

按照我的理解,我们可以在nwjs中开发基于web技术的应用,也就是用HTML+CSS+JS来开发桌面应用程序,而nwjs为我们提供了一个webkit的框架,其中结合nodejs的api让功能更加丰富。

而最近笔者也在学习polymer,谷歌的一个非常强悍的项目。polymer 是一个google开发的web components方式的前端UI控件库,它实现了google最新发布的Material design 设计规范。polymer的概念很超前,polymer中有很多可以借鉴学习的地方。 

QQ截图20150518204534

polymer官方网站: http://www.polymer-project.org/(可能需要翻墙)

此外这里有一篇文章笔者觉得很有用处,http://www.topthink.com/topic/2673.html

源码github地址:https://github.com/mydansun/polymer-example-nwjs

这个应用的截图如下,背景是我家女神!

QQ截图20150518204449

 

还有一个gif的动图

 

new2

为github生成SSH keys

首先进入git bash,然后我们执行下面的命令,注意把your_email@example.com换成你的电子邮箱

然后看到下面的提示,直接回车默认
3

然后为key配置密码

4

然后出现下面的提示代表创建成功

5

然后输入下面的命令,接着输入密码,完成后如图所示

6

接着输入下面的命令将Key拷贝到剪贴板

7

下一步,打开github网站,找到右上角的设置,然后进入SSH Key设置页面,点击ADD SSH key,将剪贴板里的数据复制到Key文本框里,确认即可
8

9

10

11