SublimeText3突然无法通过快捷键F12预览页面

最近我的sublime text 3突然无法用F12预览正在制作的页面了.相反,倒是成了提示” unable to find xxx”,还真是奇怪,当然本身这是用的一个侧边栏插件SideBarEnhancements,但是好好的插件,为什么无缘无故的快捷键就坏了呢.

最近我的sublime text 3突然无法用F12预览正在制作的页面了.相反,倒是成了提示” unable to find xxx”,还真是奇怪,当然本身这是用的一个侧边栏插件SideBarEnhancements,但是好好的插件,为什么无缘无故的快捷键就坏了呢.不过最近似乎每次启动sublime text的时候,都有更新什么插件,于是就想到本来已装的插件SideBarEnhancements的设置,可是初看又看不出来什么名堂.于是只好去看看是不是插件更新了什么.

找到插件主页,看到了大大的F12 key的说明片段:

(Please note that from version 2.122104 this package no longers provides the key , you need to manually add it to your sublime-keymap file (see next section))

这句话说的很清楚了.但是我就想作为全局使用的快捷键,毕竟养成的习惯不易更改嘛…继续向下看,找到F12 key conflict, 官方也有说明啦:

On Sublime Text 3 F12 key is bound to "goto_definition" command by default. This package was conflicting with that key, this no longers happens. You need to manually add the keys now: Go to Preferences -> Package Settings -> Side Bar -> Key Bindings - User and add any of the following:

[
    { "keys": ["f12"],
    "command": "side_bar_open_in_browser" ,
    "args":{"paths":[], "type":"testing", "browser":""}
    },
    { "keys": ["alt+f12"],
    "command": "side_bar_open_in_browser",
    "args":{"paths":[], "type":"production", "browser":""}
    },
    {
    "keys": ["ctrl+t"],
    "command": "side_bar_new_file2"
    },
    {
    "keys": ["f2"],
    "command": "side_bar_rename"
    },
]

其实很简单,将上面内容复制到

SideBarEnhancements_keybindings_user — 用户自定义键位绑定

保存就行了,如果想要鱼和熊掌兼得的朋友,就请自行设置成其他快捷键咯.

另外奉献两个参考地址:

SideBarEnhancements

Sublime 3 – Set Key map for function Goto Definition

PS: 注意官方提供的修改方案,设置了F2的快捷键,覆盖了之前的定位功能,如果不需要这个重命名文件功能请自行删除(2014年11月28日)

是时候总结一下常用css选择器(包含CSS3)

发觉CSS选择器用的实在是太平凡了…一直犹豫国内大量使用IE,致使很多初级前端开发人员对于很多CSS3的选择器比较陌生,这里我参考各方的文档及相关经验来总结一下CSS选择器的相关知识.

CSS 2.1 选择器:

通配符选择器

匹配任意元素,不建议使用,除非做DEMO测试之类

类型选择符

一般来说就是常用的html标签 (div , p , a)

后代选择符

选择所有被XX包含的xxx (div a , ul li)

子代选择符

选择XX元素子级第一级的元素xxx,切记是第一级 (div > p)

相邻选择符

同级两个元素中第二个元素生效比如: XX和xx同级且相邻,那么XX + xx中的xx样式生效,看糊涂了吗哈哈哈(h1 + p)

继续阅读“是时候总结一下常用css选择器(包含CSS3)”

元素到网页顶部距离计算方法

前阵子做一个项目,做到了一个效果,关于一个导航条跟随屏幕滚动保持在页面顶端的效果,其中有一部分js需要计算导航条距离网页顶部值,当时想不出好的解决方案,根据特定的页面结构写了个不是很好的方法,然而不能适应各种情况,因此今天就研究了一下.

先来看看这个来着作者lisatisfy的方法:

function getAbsPoint(e) {
    //再封装个函数吧。传进来的e可以是字符串类型（即id）,也可以是htmlElement对象。觉得getEL是个累赘的话，就把它删除掉。
    e = getEL(e);
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while (e = e.offsetParent) {
    x += e.offsetLeft;
    y += e.offsetTop;
    }
    return {
    "x": x,
    "y": y
    };
}
//使用getEL，不用$，避免冲突。
function getEL(id) {
    if (typeif == "undefined") {
    return null;
    }
    if (typeof id == "string") {
    return document.getElementById(id);
    }
    return id;
}

这个的确不错,但是有一些缺陷.我也给作者留言了.并指出了可能出现的问题(当父级多个为相对定位时计算会出现问题,,,以及元素本身的边框值无法计算进去).不过思路是很好的,通过计算与父级层的距离不断计算叠加高度获取最终值.我的表达可能不够清晰,建议自己用这个js写个demo测试.

继续阅读“元素到网页顶部距离计算方法”

Side​Bar​Enhancements