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,所以我用的是以下函数:
CMS.txt – 超简易的内容管理系统
CMS并不是一种离我们遥远的东西,从字面上(Content Management System)就可以知道,他只是一个用来管理网页内容的东东而已,比如我现在所使用的Wordpress就是其中的一种,这里我要介绍的是一个核心程序2K不到,即便加上所有示例文件和模板打包起来也才442K的CMS系统,他的名字叫做 CMS.txt 。 使用起来也很简单,根目录的index.php是核心文件基本不用修改,CMS.txt是配置文件,用来管理网站的结构,内有两个文件夹pages和thems,前者用来存放内容,后者存放模板,如果你只是要发布一些内容的话,只需要动配置文件和pages文件夹里的内容就可以了。 如此简洁的东东,最适合用来制作内容不多的小网站了。 废话不多说,马上做了一个,有兴趣的可以到这里看看,以下是截图: PS:安装和使用CMS.txt需要PHP以及mod_rewrite组件的支持(一般的PHP空间服务商都会提供此功能)。
WordPress主题:Grey Cover
做了一个Wordpress主题,根据其配色方案起名为Grey Cover,顾名思义就是灰不隆咚的一主题,颜色不大鲜艳,侧边栏还是左侧的,还用的是直角,应该算是比较小众吧,希望喜欢这种风格主题的人能够喜欢。 点击下载 | 预览 这个主题有几个特点: 1. 主题内置分类Widget模块,后台小工具(widgets)面板中有可重复使用的模块“分类 Widget”,可以任意拖放至左中右三个Widget Bar中使用,这样就算是一个可随意定制的CMS主题了; 2. 首页及分类、Tag、存档页都使用幻灯片来展示文章列表,这样就可以把下面的大片区域让出来放置更丰富的内容; 3. 幻灯片中可以为每篇文章分别配图(最佳规格为200×100,单位为PX),添加方法为:在该文章的自定义域添加一个名为 simg 的域,值为你要显示的图片地址; 4. 简单SEO优化、留言回复支持Ctrl+Enter、Widget Ready、通过标准…… 等等必要特性都是有的。 有任何意见和建议欢迎在此或在本主题开发页面留言。 有图有真相: 点击下载 | 预览 PS:欢迎任意转载此主题,但不要修改制作者信息或用于商业用途。