本准备玩一下 Google Code 上的 Git ,孰料 Google 提供的这个服务极其蛋疼,也许是本人才疏学浅吧,那个莫名其妙的 .netrc 文件就是不能让我免于在 pull/push 时输入密码,各种文档和解释也是含糊其辞,忍无可忍,纵然作为一名 Google 粉丝,我也只有投入 Github 的怀抱了(当然,该使用 SVN 的地方还是继续)。直接进入正题吧,首先是环境的搭建(本人使用的是 Git + msysgit + TortoiseGit + Putty 的组合): 1. 先下载所需要的安装程序:Git、msysgit、TortoiseGit(32bit,64bit)、Putty (以上均为官方下载链接,如担心有毒请自行Google); 2. 顺序安装以上下载的程序(先关闭所有的窗口,360会报不安全,信任就好),基本就是一路Next了,这个没啥好说的; 3. 注册一个Github帐号:https://github.com/plans,不必理会那些Plans,免费账号就可以创建无限制的开源项目了,只是容量小点(300M,不知道是每月还是总共,反正小项目来说是够用了); 4. 创建一个新的项目:https://github.com/repositories/new; 5. 在开始菜单中找到Putty的文件夹,打开PuTTYgen(密钥生成器),点击生成,然后出来一个类似于这样的东西(公钥): 点击保存私钥,随便起个名字随便放在哪(无视关于叫你填写密码的提示);将图中显示的公钥复制,打开Github中Account Setting页面里的SSH Public Key 选项卡,选择 Add another public key ,将刚才复制的公钥复制进去,随便起个名字,提交; 6. 在开始菜单中找到Putty的文件夹,打开 Pageant ,选择增加密钥,把刚才保存的那个后缀名为 ppk 的私钥导进去; 7. 在 [...]
图片预读
尽管我们可以使用CSS Sprites等各种CSS手段来避免页面交互时图片加载延时的问题,但有些情况下依然需要使用JS脚本的手段来实现图片预读。 以下是基于jQuery实现图片预读的方法(用jQuery只是为了方便,你也可以使用原生js或者其他类库),以下代码请放入js文件中或者 <script/>块里(事先请保证已加载jQuery类库): function imagePreload(images){ var arr = [’<div style="display:none;">’]; $.each(images, function(i, data){ arr.push(’<img src="’+ data +’" />’); }); arr.push(’</div>’); $(’body’).append(arr.join(”)); } 调用的时候,使用以下代码: var preloadImages = [], preloadDir = ‘./img/’; //preloadDir为图片文件所在的路径 preloadImages.push(preloadDir + ‘a.jpg’); //这里的每一行添加一张图片,请自行修改图片文件名 preloadImages.push(preloadDir + ‘b.jpg’); preloadImages.push(preloadDir + ‘c.jpg’); imagePreload(preloadImages); //调用之前写的preload方法 如果不喜欢使用jQuery,那么可以将这个方法改写为: function imagePreload(images){ var arr = [], elm = document.createElement(’div’); for(var [...]
用DD_belatedPNG插件修复IE6 PNG
IE6是一个令人作呕的话题,个人极为厌恶IE6,并且恨屋及乌,不过没有办法,中国就是这么一个神奇的国度,到了2010年仍然有不少人以使用“简单、快捷”的IE6为荣,不知道浏览器为何物的也更加不提了,而这种人往往又是互联网中广告点击的生力军,消费能力强,所以你必须照顾到他们的感受。 我对IE6恨之入骨的重要原因之一,恐怕就是对PNG各种半透明的支持情况了。我们在其他浏览器可以轻松实现的图片半透明效果,到了IE6这儿就得纠结蹉跎,虽然IE6勉强的支持PNG-8格式的伪半透明,但这个和GIF图片的效果相差并不大,如果你使用PNG-32的话,你所有的半透明区域都会变成灰底。 网上有不少IE6上实现PNG半透明的工具,各有千秋,大多数使用了IE的一个滤镜:AlphaImageLoader,使用后会有各种诸如问题(比如background-position和background-repeat属性支持的不完善,有些还会擅自更改背景图片的尺寸)。DD_belatedPNG提供了一种新的选择,他使用微软的VML语言对PNG图片进行重新绘制,以达到半透明的效果,并且能支持background-position和background-repeat属性。 查看Demo | 打包下载 其使用方法也不难,先在此下载DD_belatedPNG ,然后插入head标签中: <!–[if IE 6]> <script type="text/javascript" src="DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javascript"> DD_belatedPNG.fix(’.png’); </script> <![endif]–> 将所有需要需要修补的元素加上class=”png”即可 PS:对于:focus和:hover伪类,则需要将以上代码中的 : DD_belatedPNG.fix(‘.png’); 修改为 : DD_belatedPNG.fix(‘.png,a.png:hover,.png:focus’); BTW:虽然这样可以缓解IE6下PNG的问题,不过会带来性能问题,还有一些其他的问题,自然是不如对png半透明有原生支持的浏览器的。所以,赶快让该死的IE6下地狱吧。阿门!
一个最简单的基于PHP+jQuery的AJAX例子
说在前面:本文只作为一个笔记留存用以达到语言重用的效果,可能对于很多大虾过于入门级,请直接无视。 基本上一说起ajax,大家都感觉到比较神秘,我以前也是这样,总觉得这个和荷兰一家足球俱乐部同名的玩意儿是个高深莫测的东西。其实ajax之所以看上去那么蛋疼主要是为了解决各浏览器对js的兼容性问题而写了太多的代码,以至于一看见就头昏。强大简易的jquery扭转了这个局面。 首先说下个人对ajax的简单理解:html、css、js(jQuery等)是给浏览器看的,PHP是给服务器看的,js可以和php对话,而php可以生成html、css和js,以前我们浏览网页的时候,总是通过操作html,通过php告诉服务器我们需要什么内容,然后服务器会在一个新的页面将你请求的信息展示给你;而ajax,即是我们操作html时告诉js,然后js告诉php,php得到命令以后到服务器去取了你要的信息交给js,js再将此信息展示给你。这么看来ajax貌似更复杂一点,但是他带来几个好处:1. 你不需要进入一个新的页面就可以看到你所请求的信息;2.php只需要提取出产生了变化的有限信息即可,减少了重复。 简单扼要的说就是ajax模拟了提交表单的行为,但是把刷新页面这件事交由js在后台偷偷完成了。
Wdorpress 模板:ShadowBlue 0.5 Beta
Shadowblue这模板发布也有一段时间了,正式发文也就是0.1 alpha 的时候,其后陆陆续续修改了一些小BUG,更新到了 0.3 。过年期间到现在一直很忙,所以一直没有什么大的更新,这两天抽空添了点儿内容,升级到 0.5 Beta ,也算是一个迟到的新年礼物吧。 Shadowblue 0.5 beta 在外观上和前面的版本没有什么太大的不同,就是增加了一个后台,可以用来控制顶部广告位、社会化链接显示的内容,切换内容部导航栏分类与标签的选项,也增加了一个底栏的开关(因为我发现有很多朋友不大喜欢底栏)。本人实属懒人,十分能理解懒人们的疾苦,有了后台朋友们就不用去改代码了。 目前后台可控的项目不多,本人会逐步改进并即时更新到 SVN 中并在Demo中体现出来,有稳定版本也会直接升级到下载地址,如果您喜欢这个主题,请关注开发页面,欢迎提供各种意见和建议,我会在后续版本中改进,谢谢! 下载请移步开发页面
Shadow Blue 0.1 Alpha
这是一个Wordpress模板,点此预览 1. 主题内已嵌入了最新的jQuery 1.4,如果你使用的插件也使用jQuery,请禁用其所内置的jQuery库载入 ,并已修正多库共存的兼容性问题; 2. 在文章自定义域,添加名称为 avatar 的域,值为需要显示的图片地址,可以自定义文章 avatar ,否则默认显示作者的 avatar ; 3. 暂不支持Ajax提交评论,不过可以很好的通过插件 WordPress Thread Comment 来很好的实现该功能; 4. Widget Ready, 后台主题小工具中可以设置4个widget bar,1~4 的widget bar 分别控制 右侧,下左,下中 和 下右 的Widget bar; 模板文件夹内的AD文件夹内的 ad_468_60.php 文件可以自行编辑, 添加规格为 468×60 像素 大小的广告代码: <div class="ad-in"> 在此处粘贴你的广告代码,或者任何大小为468×60的页面元素 </div> 5. 主题不断更新中,推荐使用SVN升级主题 ….. 感兴趣的请移步本模板开发页面,谢谢。
jQuery 1.4 Released
这几天还在为Google的走留问题闹心的时候,就听到了这么一个好消息,jQuery总算是1.4了,还是released。 jQuery是我最喜欢的一个js库,用起来简洁明了,感觉很爷们,什么都整合在一起,不像Mootools随便实现个什么效果还得去下这个那个文件一大堆把人都搞昏头了,对于我们这种小网站也没有什么太大的性能需求,jQuery就刚好。 到底更新了什么 我还没看,不知道更新了什么东西,不过应该修复了不少bug做了很多改进吧,先给自己的主题换上再说。
为你的评论框增加Ctrl+Enter提交功能
写完评论之后不能按Ctrl+回车提交,非要拿鼠标点一下,实在是痛苦的事情,不知道打消了多少懒人留言的积极性。 想给你的评论框添加这个功能么,那么就开始吧: 打开主题中comments.php文件,按Ctrl+F搜索“textarea”,然后在他的后面加上以下代码: onkeydown="if(event.ctrlKey&&event.keyCode==13) {document.getElementById(‘submit’).click();return false};" 大概改完以后就是这么个样子: 保存提交,然后就有这个功能了,经我自己测试了,基本上市面上的浏览器都可以很好的支持,爽吗? Have fun !
关于本Blog的页面载入效果
Zed童鞋向我询问本站载入效果的做法,由于比较繁琐,遂写到Blog中来,一来是这样比QQ等手段更有条理性,二来可以保留下来提高重用率。 废话不多说,现在开始: 1.结果 本效果完成后的效果就是你在打开本站每一个页面的时候会出现一个半透明遮罩一个loading画面然后页面载入完以后遮罩消失的效果。 2.思路 这个半透明遮罩首先被载入,这样他才能在一开始就出现,他上面有一张图片和一段文字告诉浏览者这是在loading,而不是笔记本快没电了或者什么;然后,页面的DOM就Ready了,这个时候为了验证各种库(比如我所使用的jQuery)载入完毕,CSS也下载完了,我们使用jQuery语句来使这个遮罩层隐藏起来,这个时候这个效果就完成了。
使用jquery和cookies控制select表单
问题源于一个群里面的提问,在一个网页上添加一个select表单,当用户选择表单的时候,内容区会显示不同的内容,并在该用户下次打开此网页的时候记住这个设置。 像这样的东东一般都会想到要用Cookies来存储设置,方便起见,对于DOM的操作就想到了jQuery(直接写js执行效率会更高,只是,人都是很懒的嘛,呵呵..)。记录下来也算是个笔记吧(Demo)。 首先写这么一个Select下拉表单,以及用来输出被选中项相应内容的块: <!–以下就是一段普通的select下拉菜单–> <select id="choose"> <option value="0">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="wuhan">武汉</option> <option value="shenzhen">深圳</option> </select> <div id="output" class="default"></div> 然后是用来处理Cookies的函数,其实jQuery有个插件是干这个的,不过貌似有点小Bug,所以我用的是以下函数: