2010July . 22nd

CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放

采用 Webkit 核心的浏览器主要有苹果的 Safari 和 Google 的 Chrome,Webkit 核心有着良好的性能,并且在某些细节对用户非常友好,页面输入框(input 标签)聚焦高亮和文本框(textarea 标签)缩放功能就是其中的两个对用户非常友好的设计。可是这两个设计在对用户友好的同时,却会对页面设计产生影响。

CSS 屏蔽 Webkit 输入框高亮

下面是默认情况下,Webkit 浏览器里输入框获取焦点时的情况。
Webkit input 聚焦高亮
我们可以发现 Webkit 对输入框的高亮已经使页面呈现出的样式和设计样式不同了。如果你的网站已经对输入框获取焦点时定义了特殊的样式,不妨把 Webkit 这个多此一举的功能屏蔽掉。加上下面的 CSS 就可以轻松地把高亮去掉。

2010July . 20th

为 WordPress 3.0 自定义菜单添加描述

WordPress 带描述的菜单

WordPress 3.0 增加了一个强大的自定义菜单功能,但美中不足是要实现题图这样包含描述的菜单时,单靠目前 WordPress 的功能还无法实现。本文将教你改变 WordPress 默认的菜单输出,打造更加个性的菜单。

也许你已经知道,当后台出现 Appearance > Menus 这个菜单项的时候,就标明你使用的主题支持 WordPress 3.0 自定义菜单。只需要用 wp_nav_menu() 函数进行调用即可。但问题是 WordPress 输出的菜单 HTML 结构如下:

2010July . 18th

jQuery选择器详解(一)

jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点,并且整理成一个强大的对象选择工具集。但要注意的是如果你的对象名里包含 “#;&,.+*~’:”!^$[]()=>|/” 这些元字符时,你必须用 “\\” 进行转义。例如你要选择文档里包含 “name=”names[]“” 的 input 元素时,在编写过滤规则时你必须先对 “[]” 进行转义,所以我们应该这样定义选择器:“$(“input[name=names\\[\\]]”)”。

2010June . 5th

Android 神器级系统管理软件:Toggle Settings 汉化版

Android 系统管理软件 Toggle Settings 主界面

Android 作为一个优秀的手机操作系统,有着大量的软件开发者为其开发各种软件。由于目前 Android 手机用户多数为 Geek ,他们追求极致的性能,因此优秀的系统管理软件成为了必需品。今天介绍的是一款强大的 Android 系统管理软件:Toggle Settings。

一个顶好几个

Toggle Settings 通过同时修改多项系统设置,并保存为一个配置,使用户能迅速把手机调整到一个最适合你所处场合的状态,例如 Android 系统缺少的情景模式,通过 Toggle Settings 的环境配置可以一键切换到会议模式、户外模式等等。除了系统本来预设的集中情景外,用户还可以自己添加情景。

另外 Toggle Settings 还带有一个进程管理器,并且支持自动结束任务功能,进程杀手等等可以靠边站了!

Toggle Settings 有一个类似 Google Calendar 的实用功能,可以实现日程提醒,不习惯 Google Calendar 的人可以试试。

很多人习惯在 Android 安装一些桌面开关,用来随时打开或关闭蓝牙、Wifi等等,但这种桌面开关却是本来已经不大的桌面更加拥挤了。Toggle Settings 完全可以实现这些一键开关的功能,而且他能隐藏到通知栏里,要使用的时候只需要拉下通知栏并且点击 Toggle Settings 进程就能启动了。可以说是功能强大,使用方便,但一点都不会弄脏我们的桌面。

2010June . 4th

在 WordPress 后台查看 FeedBurner 数据

为了管理和统计的方便,很多人会使用 FeedBurner 来烧录博客的 Feed ,今天介绍一款插件,可以在 WordPress 的后台查看自己的 FeedBurner 统计数据。

打开“Awareness API”

首先要做的是在 FeedBurner 里打开 Feed 的 Awareness API,否则任何人都无法通过其他途径获取你的 Feed 统计数据。在 FeedBurener 的 My Feeds 页面选择博客的 Feed ,在 Publicize 选项卡里打开 Awareness API 选项,点击 Activate 即可打开 Awareness API 功能,非常简单。

2010June . 2nd

利用 Yahoo Pipes 和 jQuery 做一个 RSS 挂件

如果我们希望把一个网站的更新实时发布到令一个网站上,最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话,使用 JavaScript 是最可行的方法。但是通过 JavaScript 解析一个 XML 文档十分麻烦。幸好 Yahoo Pipes 为我们提供了非常好的 RSS to JSON 功能,我们可以先把 RSS 转换成 JSON 再用 JavaScript 进行解析,这样比直接解析 XML 简单得多!

把 RSS 转换成 JSON

雅虎 Pipes

首先登录 http://pipes.yahoo.com ,新建一个 Pipe ( Creat a Pipe ) 。然后在左边的工具里选择 Sources > Fetch Feed ,在输入框里输入一个 RSS 地址。再用线把 Fetch Feed 和 Pipe Output 两个框框连起来(如右图),保存这个 Pipe,然后点击顶部的 Run Pipe… 。点击 Publish 发布这个 Pipe ,然后记下 Get as JSON 的 URL。简单几步就已经把一个 RSS 转换成 JSON 了,而且这个 JSON 会根据 RSS 的更新自动更新。

2010May . 25th

为 WordPress 3.0 的自定义菜单链接添加栏目图标

WordPress 3.0 自定义菜单栏目图标

WordPress 3.0 为了增强 CMS 功能,加入了自定义菜单的功能,除了定义菜单项目外,还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。

在 WordPress 3.0 的 Appearance(外观)-> Menus(菜单)面板里我们可以看到自定义菜单的设置,首先点击“Creat Menu”,再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。

2010May . 20th

WordPress 在 more 截断处插入广告

在文章内插入的广告具有相当高的点击率。在 WordPress 里,我发现很多人利用 JavaScript 把广告插入到 more 截断标签处,作为内文广告。昨晚我也在内文里放了 Google Adsense,但我是用 WordPress 自带的 add_filter 函数实现的。

打开主题的 function.php ,插入下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/**
 * The filter to insert the ads
 */
function bl_insert_ad_code_filter( $content ) {
	global $id;
 
	// 只在文章页面显示
	if ( !is_single() ) {
		return $content;
	}
 
	// 首先插入广告代码
	$html = '<div class="single_ads">你的广告代码</div>';
 
		// more 标签在 WordPress 2.3 前是一个 a 标签,2.3 后是一个 span 标签
		// 保证兼容性
		return preg_replace("#\《(a|span) id\=\"more-$id\"\》\《/\\1\》#", $html."$0", $content, 1);
		//因为 wp-syntax 插件的问题,请把上一句代码中的书名号替换成“< ”和“>”,“\”换成“\”
 
	return $content;
}
 
add_filter('the_content', 'bl_insert_ad_code_filter', 50);

利用这个 filter 我们还可以在文章任意的地方插入广告,或者添加其他的应用,大家可以尽情发挥创意。

2010May . 15th

CSS 多个子框架居中

有时我们需要令一个宽度固定的容器里的子框架居中(例如一个 Div ,或者其他 block 级元素),如果子框架只有一个的话,我们只需要为子框架加上 CSS 属性 margin: auto 就可以了。

但如果我们要让多个子框架居中,并且等分父框架剩余的空间的话,我们对所有子框架使用 CSS box-align: center 来实现这种效果。

可是目前还有相当一部分主流浏览器不支持 box-align 属性,那么我们应该如何编写 CSS,使这种效果能兼容大部分的浏览器呢?

通常的方法

为了使多个 block 级元素排列在同一行里,我们习惯使用 float 属性使子框架浮动,然后利用 margin 属性让每一个子框架之间都留出一些空白的间距。可是这样做会触发经典的 IE6 双倍 margin BUG,这样反而要投入额外的时间去调试 IE6 的 Hack。

虽然我们还可以通过 display: inline 来避开 IE6 的 BUG,但我们仍然需要调整这些子框架间的间距,防止最后一个自框架被挤到下一行。

2010May . 9th

CSS3 灵活的盒子模型(Flexible Box Module) – 2

继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入,说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module) – 1》。

在 CSS2 里,要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为 33.3%,这种方法无法把父容器的宽度完全填充,在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。令一种方法是通过计算把子容器的 width 都设为一个固定值,这种方法比较繁琐,而且在一些情况下无法使子容器的宽度完全相等(例如父容器的宽度为 100px)。当我们迈入 CSS3 时代后,这种问题将迎刃而解。

box-flex 属性

box-flex 应用在需要分栏的子容器上,它的值必须是一个自然数或小数。当父容器里有多个带有 box-flex 属性的子容器时,浏览器将会把这些子容器的 box-flex 的值相加,然后根据它们各自的值占总值的比例,再在父容器剩余的空间里分配它们的尺寸(说的啰嗦,其实一看 DEMO 就懂)。也就是说,我们需要注意 box-flex 属性必须在父框架具有具体的 width 或者 height 的时候才能正常渲染

Subscriber selector

Close