FOUC – 文档样式闪烁

如果你是一名前端工作者,总有一天会听到FOUC这个词,它是Flash Of Unstyled Content的缩写,翻译过来就是文档样式闪烁,下面解释一下什么是FOUC。

问题描述

它指的是在某些景象下,IE在加载网页时会呈现短暂的CSS样式失效。
1. 只产生在Windows上的IE(5.0版本以上)
2. 只产生在那些会呈现FOUC现象的网页
3. IE的临时文件夹中没有缓存过该页面的CSS文件

Read More

原创jQuery标签切换插件“gTabs”正式发布

我在工作中经常遇到各种情况的tab切换和广告图片轮播效果,比如点击按钮实现图片上下滚动,淡入淡出,延迟tab,无限tab等等。之前的博客里面也写过相关的代码。但是如果每页页面或当前页面有很多不同效果的轮播同时出现,那么引入相应的代码就会有很多重复和垃圾代码,所以我决定写一个新的插件,通杀所有效果。
于是gTabs插件今天就诞生了,目前版本为1.0,后续可能还会添加更多的效果。
演示地址:http://www.liuxiaofan.com/demo/gtabs.html
下载地址:http://liuxiaofan.com/download/gtabs.rar

Read More

Sublime Text 2 不完全使用手册

♦ 强大的多行选择和多行编辑:

  • 鼠标选中多行,按下 Ctrl+Shift+L (Command+Shift+L) 即可同时编辑这些行;
  • 鼠标选中文本,反复按 CTRL+D (Command+D) 即可继续向下同时选中下一个相同的文本进行同时编辑;
  • 鼠标选中文本,按下 Alt+F3 (Win) 或 Ctrl+Command+G(Mac) 即可一次性选择全部的相同文本进行同时编辑;
  • Shift+鼠标右键 (Win) 或 Option+鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择;
  • Ctrl+鼠标左键(Win) 或 Command+鼠标左键(Mac) 可以手动选择同时要编辑的多处文本

♦ Package Control(绝不可错过的扩展包管理器)

Sublime Text 2 除了自身拥有无数实用功能和特性之外,它还能安装使用各种扩展/皮肤/配色方案等来增强自己。现在介绍的这个 Package Control 可以看做是一个ST2的扩展管理器,使用它,你可以用非常神奇、非常简单方便的方法去下载、安装、删除 Sublime Text 2 的各种插件、皮肤等,相信我,想更好地使用 ST2 绝对不能没有它!不过 ST2 本身并没有自带这个工具,我们需要自行安装它,方法很简单:

方法1:

[js]import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation'[/js]
复制上面代码到控制台执行即可。

方法2:

  1. 在 SublimeText2 的目录里面找到 Data > Installed Packages 的文件夹 (如没有请手动新建)
  2. 下载 Package Control.sublime-package 文件(地址自己搜索文件大小62kb)
  3. 将下载到的文件放进去 Installed Packages 里面
  4. 重新启动 Sublime Text 即可

♦ 常用快捷键

  • 快速搜索文件 —— CTRL + p(例如搜索routes/user/messages.js可以写r/u/m)
  • 行内注释 —— CTRL + /
  • 块注释 —— CTRL + SHIFT + /
  • 列选择模式 —— 鼠标右键+shift
  • 合并行 —— CTRL + J
  • 删除行 —— ctrl+shift+K
  • 复制行 —— ctrl+shift+D
  • 转到行 —— ctrl+G
  • 选择行 —— ctrl+L
  • 移动行 ——ctrl+shift+↑↓
  • 选择词 —— ctrl+D
  • 选择括号内内容 —— CTRL + SHIFT + M
  • 光标移动至括号内开始或结束的位置 —— CTRL + M
  • 选择标签及内容 —— ctrl + shift + A
  • 折叠代码 —— ctrl+shift+[
  • 设置书签 —— ctrl+F2
  • 词互换 —— Ctrl+T
  • 词改为大写—— Ctrl+KU
  • 词改为小写—— Ctrl+KL

♦ Emmet快捷键

  • 删除标签 —— ctrl+shift+;
  • 标签重命名 —— ctrl+shift+’
  • 套标签—— ctrl+alt+回车

♦ 推荐的部分插件:

  • Gits:可以轻松集成 GitHub
  • SFTP:直接编辑 FTP 或 SFTP 服务器上的文件
  • EMMET:这货对于前端的同学来说不得了,可以超快速编写HTML文件 (视频演示)
  • ConvertToUTF8:ST2只支持utf8编码,该插件可以显示与编辑 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的文件
  • Clipboard History:剪切板历史
  • WordPress:集成一些WordPress的函数,对于像我这种经常要写WP模版和插件的人特别有用!
  • HtmlTidy:清理与排版你的HTML代码
  • PHPTidy:整理与排版php代码
  • Bracket Highlighter:类似于代码匹配,可以匹配括号,引号等符号内的范围。
  • Prefixr:CSS3 私有前缀自动补全插件,显然也很有用哇
  • Sublime h3Intel:代码自动提示
  • JS Format:一个JS代码格式化插件。
  • Placeholders:故名思意,占位用,包括一些占位文字和HTML代码片段,实用。
  • YUI Compressor:压缩JS和CSS文件
  • Goto-CSS-Declaration:跳转到css文件该class的声明处,方便修改查看,如图下所示,注意对应的css文件要同时打开才行。