Jquery Bundle for Textmate

作者:可乐 发布时间:August 16, 2011 分类:前端 2 Comments

因为最近要用到Jquery了,所以找了下Jquery针对Textmate的插件。
官方svn里的bundle包含了一个,路径如下
http://svn.textmate.org/trunk/Bundles/JavaScript%20jQuery.tmbundle/
当然,你也可以去github里下载,路径如下
https://github.com/kswedberg/jquery-tmbundle

安装一如既往地简单,svn co下来之后双击就可以了。
安装之后如下图,可以在语言中原则jQuery来进行jquery的编写了。

但是我们有时候需要在HTML里内嵌js,在用这个bundle的时候发现是无法这么做地。它本身默认只有在.js的文档中可以使用。这个当然难不倒我们咯。

首先你需要打开你地bundle editor,快捷键是control+option+command+B
然后在左侧选择
HTML

选择里面地HTML
在右面的内容中找到
HTML

这个内容后面添加下面地代码
{ name = 'source.js.jquery.embedded.html'; begin = '(?:^\s+)?(<)((?i:script))\b(?![^>]*/>)'; end = '(?<=)(?:\s*\n)?'; beginCaptures = { 1 = { name = 'punctuation.definition.tag.html'; }; 2 = { name = 'entity.name.tag.script.html'; }; }; endCaptures = { 2 = { name = 'punctuation.definition.tag.html'; }; }; patterns = ( { include = '#tag-stuff'; }, { begin = '(?)'; end = '(
添加之后应该是
....... patterns = ( { name = 'source.js.jquery.embedded.html'; .........

然后reload一下bundle就可以在HTML的模式下使用jquery的插件了

如何快速的修改host

作者:可乐 发布时间:May 27, 2011 分类:前端 4 Comments

作为一个悲催写代码的前端攻城尸,帮顶host,切换host一直是一个恶心的事情。
你还是使用文本编辑器打开host文件来添加删除的么?
那么简单的分享2个工具,来提高一些效率吧。

首先推荐的是淘宝的崇厚同学写的Hostsmanager

HostsManager

方便的添加与管理,更快速度的切换。一直是我在mac下不二的host管理工具。推荐使用。
当然它也有windows版本了~

再一个就是windows下之前用过的一个

Hostsmanager(为啥都是这个名字呢。。。) 下载地址 http://sourceforge.net/projects/hostsmanager/files/

这个软件的原理是把host保存成为若干个不同的文件。需要哪个就用调入哪个。界面如下
HostsManager

编辑界面
HostsManager
直接使用记事本编辑好了保存就可以。之后要用哪个就载入哪个。

类似的软件有很多,大家可以根据自己的喜好来选择。基本实现方法多数为上面这2种。

修改之后如何快速刷新host?

Firefox下有一个插件叫 DNS Fluser,安装之后会在右下角出现当前页面的IP地址。修改host之后,点击这个IP地址,那么FF会重新载入host一次。刷新页面就可以看到绑定后的效果了.
HostsManager

IE没有对应的插件,但是我们可以通过修改注册表来实现不用重启IE就可以重置host的办法

HKeyCurrentUser\SOFTWARE\Microsoft\Windows\CurrentVersion\Internet Settings
增加:
DnsCacheEnabled 0x0 (REG_DWORD)
DnsCacheTimeout 0x0 (REG_DWORD)
ServerInfoTimeOut 0x0 (REG_DWORD)

自适应宽度,半透明背景层实现方法

作者:可乐 发布时间:January 18, 2011 分类:前端 7 Comments

在写一个弹出窗的设计规范的时候,出现了这个需求。

期望的效果如下:

大家可能会想到用CSS透明来实现效果,那么我们一步一步的来
filter:alpha(opacity=50); /* IE */ -moz-opacity:0.5; /* Moz + FF */ opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/
于是有如下代码。

悲剧的事情出现了,里面承载的内容也透明掉了。此时你即便吧main的透明度调为不透明,也没有用。这个就是恶心的透明继承。
那么我们怎么办呢?有办法。
加入一个background层,专门用来呈现透明背景。用绝对定位方式拉回到应该所处的位置。代码如下

虽然效果实现了,但是必须是固定宽高。

最后采用的办法是使用PNG半透明,IE6开启滤镜的方式解决。代码如下

欢迎有更好想法的同学告之我,小的将感激不尽~

Typecho下添加runcode

作者:可乐 发布时间:November 17, 2010 分类:前端 5 Comments

目前Typecho下貌似没有类似wordpress的runcode插件,让我们这种经常发代码的人感觉很是悲剧阿~
所以想着自己添加这么一个小功能到Typecho下.
方法如下
后台部分.
编辑admin/write-post.php
找到23行的label,在后面添加

runcode

在24行

的后面添加

引入Num这样一个随机数是为了防止同一个页面出现相同的id~.
到这里后台部分的代码添加就结束了.
JS,CSS样式的引入
编辑index.php.引入一个外部的JS或者直接写在header里
function runcode(element){ var code = document.getElementById(element).value; var win = window.open("", "", ""); win.opener = null; win.document.write(code); win.document.close(); }
编辑下style.css中run_code这个class的样式~
大功告成~
此时新建文章的时候,在textarea的右上方就会看到一个runcode可以点击.点击之后出现如下代码

前台的效果如下:

因为是使用的字符串拼接,所以自己手动稍微调节下代码得样式就好~

回头再优化这个东西,看能不能做成一个插件~