Sublime Text 2 CSS格式化

作者:可乐 发布时间:August 15, 2012 分类:前端 6 Comments

每个人的CSS书写习惯都不一样,有人喜欢一行形式的书写方式,比如:


有人喜欢多行的书写习惯,比如:

各有好处,随自己喜欢选择。

就比如我喜欢的单行的书写方法,拿到多行的文件时,就觉得各种不舒服,各种蛋疼。就想把他格式化了改完再说。

之前使用ST2的时候,一直找不到一个合适的符合自己书写习惯的CSS格式化工具。

今天终于找到了它。https://gist.github.com/2863474 这是插件的下载地址。

下载解压缩之后,将compact_expand_css_command.py放到 /用户/kele/资源库/Application Support/Sublime Text 2/Packages/User/下.(以我个人的电脑为例。)
Windows的路径是C:\Users\kele\AppData\Roaming\Sublime Text 2\Packages\User

之后打开ST2,选择Preferences>Key Bindings - User如下图

加入如下代码:

{ "keys": ["ctrl+super+]"], "command": "compact_expand_css", "args": { "action": "expand" } }, { "keys": ["ctrl+super+["], "command": "compact_expand_css", "args": { "action": "compact" } }

接下来打开一个CSS文件,摁下control+command+[ 或者 control+command+] 就可以看到自己想要的效果了

转玩Sublime Text 2

作者:可乐 发布时间:August 1, 2012 分类:前端 No Comments

很久没有正经写过东西了,上周我本子上的textmate莫名其妙的挂了。本来想去下一个新的,不知道咋回事就下了个Sublime Text2。鉴于在windows下也用和这个编辑器,所以想尝试在Mac下也试试看。本来没打算用它来替换textmate,结果用了之后发现各种顺手。果断转为ST2。

Sublime Text2的快捷键什么的太多,我刚接触也不一一介绍了,只简单说下怎么构建出一个自己习惯的开发环境,让自己的代码写起来舒服一些。

Sublime Text2是一个跨平台的编辑器,所以只要在一个平台下掌握了使用技巧,在其他平台下也能搞定。这大大减少了不同平台下不同编辑器的学习成本。不需要在Mac下用textmate,Windows下用Editplus这样的折腾了。

如何安装与配置

ST2可以在它的官方网站下载到各种版本,具体请前往 http://www.sublimetext.com/2

User set

适用快捷键 comman+, 呼出user set。对自己的一些设置,以下是我自己的设置,可以参考。

{ "color_scheme": "Packages/Color Scheme - Default/Blackboard.tmTheme", "font_face": "Monaco", "font_size": 14.0, "ignored_packages": [ "Vintage" ], "theme": "Soda Dark.sublime-theme" }

阅读剩余部分...

根据浏览器大小来决定点击弹出层的位置

作者:可乐 发布时间:February 29, 2012 分类:前端 No Comments

恩,LOL上来纯虐了一把对面打野之后,无聊。弄个明天要用的东西,顺便留作备份~

以上是使用了YUI来获取页面的宽高。下面发个原生的
if(document.compatMode == "BackCompat"){ cWidth = document.body.clientWidth; cHeight = document.body.clientHeight; sWidth = document.body.scrollWidth; sHeight = document.body.scrollHeight; sLeft = document.body.scrollLeft; sTop = document.body.scrollTop; } else{ //document.compatMode == "CSS1Compat" cWidth = document.documentElement.clientWidth; cHeight = document.documentElement.clientHeight; sWidth = document.documentElement.scrollWidth; sHeight = document.documentElement.scrollHeight; sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; }

水平反转背景图片

作者:可乐 发布时间:December 15, 2011 分类:前端 No Comments

这次新的项目因为要做一个这样的需求,又不想重新去做一个图。
记得IE下有一个滤镜好想是能实现水平反转来着,试了试果然可以。其他浏览器可以用CSS3来搞定。代码如下

web中强大的图表工具amcharts

作者:可乐 发布时间:December 13, 2011 分类:前端 No Comments

微博之后,博客就写的很少了。这次做项目,觉得有一个东西还是挺好的,觉得可以分享给大家,或许在以后某一个时间会用到。

这次说的东西就如标题里的介绍一样,是用来做图表的。

记得最早结束的这个类型的东西是4年前用的flot,google code的地址是:http://code.google.com/p/flot/
这次项目中接触倒了amcharts,觉得确实是一个不错的解决方案,而且可以做出来很炫的效果。

可以给大家先看一个简单的例子。

怎么样,看起来还不错吧。
以上的demo是通过js直接写在页面里的,数据本身也是包含在js里的。
amcharts除了可以试用JS生成图表,还可以试用flash方式。在试用flash的时候,需要载入一个“settings.xml”的设置文件。里面有各种各样的设置项,来决定你最后展示给用户的样子,这个回头再发一片文章专门的阐述下好了。在使用flash方式的时候,有一个数据来源的设置,可以选择txt,xml等文件,也可以试用json等方式来传输,更直接点,可以写再flash的date配置项里。总之手段多样,可玩性很高~

E文不错的同学,可以去他们的官方网站去看下 http://www.amcharts.com/