等待-放飞梦想

不刷新（AJAX）获取文章的内容

Await — Mon, 30 Nov 2009 15:27:19 +0000

相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲解。在这想跟大家分享下。AJAX加载文章的内容。当然，这里还是基于JQ的load方法来实现。OK，来看效果：

首先，定义三个变量：

var objTag= $(".post");//定义要获取内容所在的节点
var num= objTag.length;//定义节点的数量
var _cache=new Object;//建立一个缓存对像

然后构建一个加载的函数：

function loadentry(n){
var _url=$(objTag[n]).children(".archive-post-title").children("h2").children("a").attr("href");//定义要加载文章的地址
$('
正在加载文章内容，请稍等！
').insertBefore($(objTag[n]).children(".singledata"));//插入提示信息
if(_cache[_url]==null){//判断是否有缓存
$(objTag[n]).children(".details").load(_url+" .post .entry",function(){
_cache[_url]=$(objTag[n]).children(".details").html();
$(''+n+'");">收起全文↑').insertAfter($(objTag[n]).children(".details"));
});//加载文章内容
}else{
$(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
$(objTag[n]).children(".details").html(_cache[_url]);//直接显示缓存对像的内容
$(''+n+'");">收起全文↑').insertAfter($(objTag[n]).children(".details"));
}
$(objTag[n]).children(".archive-post-title").children(".archive-arrow").remove();
}

这部分对于不懂JQ的人来说可能有点复杂。懂JQ的人看起来一定很简单。就是一个对DOM的操作。通过动态的插入清除节点来实现我们需要的效果。关健在于“.load()”的用法。

到这已经实现了加载了。接着需要做个删除也就是收起全文；相比加载，删除要简单的多了，就是直接删除节点就行了。

function closentry(n){
$(objTag[n]).children(".details").animate({height: 'toggle'}, "slow",function(){$(this).remove()});
$(objTag[n]).children(".archive-arrow").remove();
$('
'+n+'");">阅读全文↓
').insertAfter($(objTag[n]).children(".archive-post-title").children("p"));
}

这段代码就是一个基本的节点操作。在这就不作说明了；当然，最后我们需要插入节点并绑定事件。

$(document).ready(function(){
for(a=0;a<num;a++){
$(objTag[a]).children(".archive-post-title").children(".archive-arrow").append(''+a+'");">阅读全文↓');
}
});

OK，到这里这个AJAX加载效果就完成了。详细的效果可以点击侧边栏的分类导航。

2008-11-27 -- 给你的侧边栏添加一个登陆入口 (11)
个人一直觉得wordpress的登陆很麻烦，要打开一个新窗口才行。而且默认的那个窗口看起来并不怎么漂亮。所以决定给它整整，搞个适合偶主题的登陆框才行。之前我已经写过一篇文章，但那个是用jQuery实现...
2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
2008-09-11 -- jquery基础教程一[click,addClass,show,hide] (3)
原创内容—转载请说明出处. jQuery我想很多人都知道，但用WP的好像很少有人说到这个。今天开始和大家一起来研究下如何用jQuery来为我们的WP添加实用的功能。至于jQuery的相关背景和资...
2008-08-28 -- 利用WP自带的JS库打造超酷的侧边栏 (5)
从这篇文章开始，我们来认识下wordpress自带的JS库，下面这张图是WP自动的JS文件夹。可以看出有很多JS文件，当然包括大名鼎鼎的jquery和prototype。利用这些我们能实现很多很酷的效...
2009-11-28 -- WordPress评论表单验证 (10)
wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验...

WordPress评论表单验证

Await — Sat, 28 Nov 2009 02:50:40 +0000

wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验并不友好；所以一个基于前端的验证很需要。大家平时也一定有见过各种各样的表单验证。有些表单的验证很复杂，也很强大。不过WP的验证很简单。只需要验证“昵称”、“E-mail”、和评论就行了。http地址因为不是必须的。所以只需要在用户有输入的情况下判断下地址是否符合正常的格式就行了。来看下这个简单的验证效果：

下面来说说这个简单的表单验证。当然，还是基于jQuery的。

var Msg = new Array(
"用户名不能为空",
"昵称不能少于3个字符",
"E-mail地址不能为空",
"请输入正确的E-Mail地址",
"url地址不正确",
"评论内容不能少于5个字符",
"输入正确"
);

首先定义一个提示信息的数组。

if( $(this).is('#author') ){
$(this).next().remove();
if( this.value==""){
$(''+Msg[0]+'').insertAfter(this);
}
else if(this.value.length < 3 ){
$(''+Msg[1]+'').insertAfter(this);
}
else {
$(''+Msg[6]+'').insertAfter(this);
}
}

验证昵称：如果用户输入的字符为空，或少于3个。刚显示相应的错误信息，否则显示输入正确。

//验证邮件地址
if( $(this).is('#email') ){
$(this).next().remove();
if( this.value==""){
$(''+Msg[2]+'').insertAfter(this);
}
else if( this.value!="" && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.value)){
$(''+Msg[3]+'').insertAfter(this);
}
else {
$(''+Msg[6]+'').insertAfter(this);
}
}

验证E-mail地址：和验证昵称一样。这里是用正则去匹配地址是否正确；

//验证url
if( $(this).is('#url') ){
$(this).next().remove();
if( this.value!="" && !/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/.test(this.value)){
$(''+Msg[4]+'').insertAfter(this);
}
}

验证url地址，因为这个不是必须的，所以只在有输入的情况下才去判断地址是否正确

//提交，最终验证
$('#submit').click(function(){
$("#commentform :input").trigger('blur');
//验证评论内容
if( $("textarea").val() == ""|| $("textarea").val().length < 5){
tipsWindown("提示","text:评论内容不能为空或少于5个字符!","250","150","false","2000","false","msg");
return false;
}
var numError = $('form .onError').length;
if(numError){
tipsWindown("提示","text:请正确填写表单内容","250","150","false","2000","false","msg");
return false;
}else{
tipsWindown("提示","text:正在提交评论...","250","150","false","2000","false","msg");
$(".formtips").remove();
}
});

最后。绑定事件，然后验证评论内容是否为空或小于5个字符。如果为true则弹出提示层，并阻止表单的提交。否则弹出提示：正在提交评论…然后清除提示信息；OK，一个基于JQ的简单的表单验证完成了；

2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
2009-11-30 -- 不刷新（AJAX）获取文章的内容 (24)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
2009-11-25 -- 一个jQuery弹出层(tipsWindown) (14)
弹出层效果网上很多很多，也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog；在此表示感谢。接着说说这种弹出层的原理或者说是做法。总结下经验；首先需要一个遮罩...
2009-08-28 -- jQuery实现背景图渐变切换 (4)
链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
2009-06-11 -- jQuery 实现 tab 切换一例 (9)
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...

一个jQuery弹出层(tipsWindown)

Await — Tue, 24 Nov 2009 16:24:44 +0000

弹出层效果网上很多很多，也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog；在此表示感谢。
接着说说这种弹出层的原理或者说是做法。总结下经验；首先需要一个遮罩层来实现灰色背景。我们可以创建一个z-index高于其他层的DIV。然后设为绝对定位。接着获取页面的高度并把它作为这个DIV的高度。这样背景层的问题就OK了；

背景层结构：

然后是弹出层的结构：

<div id="windown-box">
<div id="windown-title">
<h2>h2>
<span id="windown-close">关闭span>
div>
<div id="windown-content-border">
<div id="windown-content">div>
div>
div>

我们把这个结构通过 jQuery 的 “append” 方法追加到 body 里面；然后对它进行定位；这个定位有点复杂。固定垂直居中的方法很简单，大家都知道可以把它的position设为fixed，然后把的top、left设为50%，然后margin负 1/2 本身的宽度的一半就行了。但在IE6下，不支持fixed，而且在IE6里它的top算法也和FF不一样。FF下。top:50%是以当前页的可视内容最顶上的开始计算；而IE6下则是以整个文档的最上边开始计算。假如你把滚动条拉到最底部。然后弹出窗口。你会发现在IE6弹出的层看不见。因为它在上面。也就是在第一屏没有滚动滚动条时那个居中位置。所以在IE6下，这个高度要另外计算。它的top实际上是等于它本身的高度除以2再加上滚动条滚去的高度。

if ( _version == 6.0 ) {
$("#windown-box").css({left:"50%",top:(parseInt((ch)/2)+est)+"px",marginTop: -((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
}else {
$("#windown-box").css({left:"50%",top:"50%",marginTop:-((parseInt(height)+53)/2)+"px",marginLeft:-((parseInt(width)+32)/2)+"px",zIndex: "999999"});
};

定位问题解决了就好办了。剩下的就是获取内容和一些附加效果了。内容这里可以设定的类型有5种。分别是：text、ID、img、url、iframe 这个就不说了。附加效果就拖拽和自动关闭。拖拽这个东西有点复杂。但了解原理后也就不复杂了。首先是获取对像的offsetLeft和offsetTop这两个值。这两个值是对像距离浏览器窗口左边和上边的距离。然后绑定鼠标事件，当按下的时候计算鼠标当前的座标clientX、clientY。并计算这两个参数的差值得到新的座标moveX、moveY。当鼠标拖动的时候。计算当前鼠标的座标与之前得到的moveX、moveY之间的差值。这个值就是对像的新的座标了。把它符值给对像的top、left就实现了拖拽。

DragHead.onmousedown = function(e) {
if(drag == "true"){moveable = true;}else{moveable = false;}
e = window.event?window.event:e;
var ol = Drag_ID.offsetLeft, ot = Drag_ID.offsetTop-moveTop;
moveX = e.clientX-ol;
moveY = e.clientY-ot;
document.onmousemove = function(e) {
if (moveable) {
e = window.event?window.event:e;
var x = e.clientX - moveX;
var y = e.clientY - moveY;
if ( x > 0 &&( x + sw < cw) && y > 0 && (y + sh < ch) ) {
Drag_ID.style.left = x + "px";
Drag_ID.style.top = parseInt(y+moveTop) + "px";
Drag_ID.style.margin = "auto";
}
}
}
}

自动关闭就很简单了。就是一个setTimeout
自动关闭代码：

var closeWindown = function() {
$("#windownbg").remove();
$("#windown-box").fadeOut("slow",function(){$(this).remove();});
}
if( time == "" || typeof(time) == "undefined") {
$("#windown-close").click(function() {
$("#windownbg").remove();
$("#windown-box").fadeOut("slow",function(){$(this).remove();});
});
}else {
setTimeout(closeWindown,time);
}

胡乱的说了一通。不知道大家能不能看明白…详细的演示请点击下面的链接

http://leotheme.cn/wp-content/uploads/Example/js/tipswindown/

2009-11-30 -- 不刷新（AJAX）获取文章的内容 (24)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
2009-11-28 -- WordPress评论表单验证 (10)
wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验...
2009-08-28 -- jQuery实现背景图渐变切换 (4)
链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个...
2009-06-11 -- jQuery 实现 tab 切换一例 (9)
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
2009-05-27 -- jQuery性能优化指南 (6)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开...

细线表格的处理

Await — Sat, 14 Nov 2009 01:12:02 +0000

最近的工作中老要用到表格。说真的，我现在很不习惯表格；看到就头痛；但没办法，有需要就得满足。囧！~说到表格最常用的就是细线表格了，每次都要都搜索下细线表格；虽然很简单但却一直主不住。郁闷。所以转了篇文章作个记录；在HTML中，我们设置border=”1″ 时，表格边框实际大小是2px，那如果我们要做成1px的细线表格要怎么办？以前在做1px的表格的时候，我会用表格背景颜色，然后再用另一种颜色设计单元格的背景，再把表格间距设置成1px，这样就能达到我们的1px表格了，如下例：

<table align="center" bgcolor="#f90" border="0" cellpadding="0" cellspacing="1" width="80%">
<tr>
<td bgcolor="#ffc">td>
<td bgcolor="#ffc">td>
<td bgcolor="#ffc">td>
tr>
<tr>
<td bgcolor="#ffc">td>
<td bgcolor="#ffc">td>
<td bgcolor="#ffc">td>
tr>
<tr>
<td bgcolor="#ffc">td>
<td bgcolor="#ffc">td>
<td bgcolor="#ffc">td>
tr>
table>

这种方法虽然可以实现，但是页面里的代码多了很多，而且要控制局部也相对麻烦些。

下面的这种方法及其简单，html代码也减少了很多，结构更加的清晰。

<style type="text/css">
style>

html代码：

<table width="80%" align="center">
<tr>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
<td>td>
tr>
table>

本文转载自：http://www.chunzhen.org.cn/2008/07/thin-table.html

随机日志

2009-05-08 -- 雷柏7100 蓝光版无线鼠标 (11)
其实很很久就想买这个鼠标了，那时京东的报价是99元。一直没买；昨天去给宽带续费。结果去了第一家营业厅的时候说工作人员不在。让我过几天再来办理，于是向她打听还有其他营业点没，告诉我说清河路有一家...
2008-10-29 -- 搜狐博客开放平台博客模板设计大赛 (0)
一、大赛宗旨本次大赛是搜狐博客开放平台为广大设计人员、设计爱好者与搜狐博客用户举办的规模最大的一次模板设计竞赛，并准备了价值十万元的精美大奖和成为搜狐博客开放平台模板设计伙伴的机会，我...
2008-11-23 -- Windows 7对比Vista的23项细节改动 (2)
前段时间，随着一款泄露版Windows 7，悄然出现在网络之上。这款微软的下一代操作系统，逐渐成为了网上热炒的一个话题。随便找到哪一个人，他都能一口气地给你说出新系统的很多优点。不过，作为一款全新的操...
2008-10-27 -- 看着非常舒服的颜色 (1)
点击运行,这样的颜色让人感觉很舒服. 舒服的颜色 body{ margin:20px; font-family: Verdana, Geneva, Arial, Hel...
2008-08-14 -- 关于Maxthon这个主题的扩展计划[暂定] (2)
Maxthon这个主题从发布到现在也有些日子了，得到很多网友的关注。其中也发现了很多问题，在这对这个主题以后的扩展作下说明。首先我会再发布一个最基本的版本，不需复杂的操作，不需要插件。保证一装...

布局中的固定定位

Await — Fri, 13 Nov 2009 03:29:36 +0000

有时候会有某个特殊的需求。如想让某个元素，某块内容固定在页面的某个位置不动，也就是不随滚动条的滚动而滚动。它相对于其他的元素始终是固定的。最近在项目中就有这么一个需求；我们先来熟悉下CSS中关于定位的一些属性:

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

参数：

static : 无特殊定位，对象遵循HTML定位规则，不能通过z-index进行层次分级。

absolute : 将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框。
relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置。
fixed : 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。IE5.5及NS6尚不支持此属性。

CSS中定位的层叠分级：z-index: auto | namber;

auto 遵从其父对象的定位
namber 无单位的整数值。可为负数

我们知道，要让某个元素固定不动，可以设置这个元素的position属性为fixed；这个属性很好用很强大。但可惜的是万恶的IE6确不支持这个属性。这时候我们得请出传说中的Hack来了：

body {
margin: 0;
padding: 0;
height: 100%;
overflow :auto;
}
#fixedid {
position: fixed;
_position: absolute; /* Hack for IE6*/
right: 0;
_right: 16px; /* Hack for IE6*/
top: 300px;
width: 200px;
padding: 10px;
text-align: center;
font-weight: bold;
background: #0F0;
}
html {
_overflow: hidden;/* Hack for IE6*/
}

完整的示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>布局中的固定定位</title> <style type="text/css"> /*<![CDATA[*/ body { margin: 0; padding: 0; height: 100%; overflow :auto; } #fixedid { position: fixed; _position: absolute; /* Hack for IE6*/ right: 0; _right: 16px; /* Hack for IE6*/ top: 300px; width: 200px; padding: 10px; text-align: center; font-weight: bold; background: #0F0; } html { _overflow: hidden;/* Hack for IE6*/ } p { margin: 50px 0; } /*]]>*/ </style> </head> <body> <div id="fixedid"> <a href="http://leotheme.cn" title="随你怎么拖，我就是不动">随你怎么拖，我就是不动</a> </div> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> <p>我是用来撑高页面的</p> </body> </html>

提示：你可以先修改部分代码再运行。

至此，一个固定布局完成了。但别急着高兴，这个看似简单又完美的东西好是不是真的那么完美呢？答案是：NO；在实际使用中发现了一个问题，如果之前有一天写好了的页面。要你把这个页面的“footer”改成固定布局，当你高兴的把这个任务完成后。高兴的一点刷新的时候。问题来了；如果之前这个页面里有相对定位和绝对定位的布局，你会发现，IE6之前的布局乱了。这个固定定位影响了之前的布局；怎么办？重写之前的布局？一个页面还好说。多了呢？那将会相当麻烦。那有没有更好的办法呢？答案是：YES；有问题就会有解决的办法，不是吗？通过搜索，找到了一个基于JQ的插件。下面来看下这个插件：

jquery插件：任意位置浮动固定层

/*调用：

1 无参数调用：默认浮动在右下角

$(”#id”).floatdiv();

2 内置固定位置浮动

//左下角
$(”#id”).floatdiv(”leftbottom”);

//右下角
$(”#id”).floatdiv(”rightbottom”);

//左上角
$(”#id”).floatdiv(”lefttop”);

//右上角
$(”#id”).floatdiv(”righttop”);

//居中
$(”#id”).floatdiv(”middle”);

另外新添加了四个新的固定位置方法

middletop（居中置顶）、middlebottom（居中置低）、leftmiddle（靠左居中）、rightmiddle（靠右居中）

3 自定义位置浮动

$(”#id”).floatdiv({left:”10px”,top:”10px”});

以上参数，设置浮动层在left 10个像素,top 10个像素的位置

可以看出这个插件相当强大。至少对于固定某个元素来说是非常强大。内置了常见的位置。支持自定义位置；而且解决了上面的那个问题。更详细的说明和下载请点击这里

随机日志

2008-11-11 -- 网页中嵌入Flash的方法总结 (5)
前些天为偶的首页添加了一个FLASH广告.本来是一件很简单的事情,但没想到却遇到了很多问题.不管怎么试都首页就是显示不出那个SWF.总是显示未加载SWF.弄得郁闷死了.最后才发现原来要用绝对路径才行....
2009-11-14 -- 细线表格的处理 (5)
最近的工作中老要用到表格。说真的，我现在很不习惯表格；看到就头痛；但没办法，有需要就得满足。囧！~说到表格最常用的就是细线表格了，每次都要都搜索下细线表格；虽然很简单但却一直主不住。郁闷。所以转了篇文...
2009-11-30 -- 不刷新（AJAX）获取文章的内容 (24)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
2008-09-15 -- WordPress“主题壁纸” (5)
闲着没事做，随意整了两张，全当充数，因为自己不善于文字上的述说。就多发些图了，以后有时间继续多做些和大家一起分享。(两种规格:1024*768 | 1440*900) 点击下载...
2008-10-24 -- 推荐一个可爱的字体——方正喵呜体 (3)
方正喵呜体，特别适合用在卡通漫画上。点击下载字体 ...

左右两栏等高实现方法

Await — Wed, 11 Nov 2009 03:21:51 +0000

等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简单，但毕境麻烦。现在有了个更简单的方法。这个方法的原理是事先通过正内边距来使其拥有足够高度，然后通过负外边距来使得其的位置不变。通过给父元素溢出隐藏，我们可以隐藏掉事先占据的足够高的空间。由两列实际的内容高度来决定整个父元素的高度，从而实现了等高。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS等高布局</title> <style type="text/css"> body { margin: 0; padding: 0; font:14px/1.6em Arial, Helvetica, 宋体,sans-serif; text-align: cnter;} .main { width: 800px; margin: 0 auto; margin-top: 20px; color: #FFF; overflow: hidden;} .left {float: left; width: 550px; background: #f00; border: 1px solid #666; padding-bottom: 6180px; margin-bottom: -6180px;} .right {float: right; width: 240px; background: #090; border: 1px solid #666; padding-bottom: 6180px; margin-bottom: -6180px; } </style> </head> <body> <div class="main"> <div class="left"> <p>我很高</p> <p>我也很高</p> <p>我非常高</p> <p>我就是很高</p> <p>我很高</p> <p>我也很高</p> <p>我非常高</p> <p>我就是很高</p> <p>我很高</p> <p>我也很高</p> <p>我非常高</p> <p>我就是很高</p> <p>我很高</p> <p>我也很高</p> <p>我非常高</p> <p>我就是很高</p> </div> <div class="right"> <p>我会和左边一样高吗？</p> <p>我和左边一样高哦！</p> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

这里考滤到一个意外，就是右边的内容比左边多的时候；其实只需对左右两边都进行正内边距和负外边距设置就行了。这样不管是左边还是右边高，两边的高度始终都是一样的。利用这个原理，我们还可以实现三列多列等高布局。

顺便讲下JQ的实现方法。也很简单，原理就是取得左右两边的高度，然后判断这个值，把大的值赋给小的就行了。看代码：

jQuery(document).ready(function() {
var _leftheight = jQuery(".left").height();
_rightheight = jQuery(".right").height();
if(_leftheight > _rightheight ) {
jQuery(".right").height(_leftheight);
}
else {
jQuery(".left").height(_rightheight);
}
})

好了，到这里相信大家已经都会了。其实还有一些方法可以实现等高的，比如说背景，大家没事研究研究吧；

2009-08-30 -- CSS 3.0 参考手册 (中文版) (7)
作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
2009-07-07 -- 如何使你的CSS样式更易阅读? (10)
在做wordpress主题的时候，样式是最重要的一部分。作为主题的制作者，我们不但要考滤页面的还原完整度，还要一个重要的就是要让CSS阅读起来很容易。因为不管我们怎么尽力去做到完美，但每个人都想主题更...
2009-06-18 -- 关于CSS的书写习惯 (6)
其实每个人都有自己喜欢的书写格式习惯，我在刚学CSS的时候，什么都不知道，只是要实现什么效果，我后就写个ID或类进去。放哪个位置也不管，丢进去就行了。反正效果实现了；后来当需要修改某些地方的时候，才发...
2009-06-03 -- CSS实现自动换行的小技巧 (4)
大家都知道连续的英文或数字能是容器被撑大，不能根据容器的大小自动换行，下面是 CSS如何将他们换行的方法！对于div 1.（IE浏览器）white-space:normal; word-...
2008-11-25 -- CSS清除浮动的一些方法 (5)
CSS的浮动为我们的布局带来了很大的好处，利用浮动我们可以很方便的写出各种版式。但浮动同时也带来很多问题；这些问题基本上都因为没有及时的或者在适当的位置清楚浮动。下面来说下常用的清除浮动方法： ...

新工作，新起点。

Await — Sat, 05 Sep 2009 15:36:57 +0000

时间过得真快，转眼来北京已经一个月了。可记忆中好像就是昨天才蹋上这片陌生的土地；一直以来，从没想过有天会离开那个熟悉的城市，到另一个完全陌生的城市。当蹋上开往北京的列车的那一刻，心里有很多很多种滋味。有憧憬、有期待、也有点迷茫；有不舍、还有点忧愁；
而此刻，一切都已成为过去。终于见到了一直都在帮我的酋长，还有WOPUS的小胖，乖，SA。也有了新的工作，新的同事，虽然还没有习惯这个城市的生活和节奏，虽然工作有点忙，但我相信我会习惯的。

随机日志

2009-03-20 -- Windows Internet Explorer 8 简体中文正式版 (2)
IE8 的一些有趣的新功能： Accelerators（加速器）：节省浏览网页或搜索信息的时间，比如在网页中看到一个地址，选中然后右击，就可以从弹出对话框中选择 Google Map 或...
2008-11-10 -- Wopus新主题终于上线了 (9)
经过最后一天的努力,WOPUS新主题终于上线.由于时间关系,仍存在很多问题.希望大家能及时反馈发现的问题,以便我们及时修正.谢谢大家的支持!~...
2008-11-23 -- Windows 7对比Vista的23项细节改动 (2)
前段时间，随着一款泄露版Windows 7，悄然出现在网络之上。这款微软的下一代操作系统，逐渐成为了网上热炒的一个话题。随便找到哪一个人，他都能一口气地给你说出新系统的很多优点。不过，作为一款全新的操...
2008-10-10 -- 一个简单的网页调色板 (3)
一个简单的调色版.效果不错. 红辣椒的调色板 table{background:#000;} tr,td{background:#fff; paddin...
2008-08-28 -- 利用WP自带的JS库打造超酷的侧边栏 (5)
从这篇文章开始，我们来认识下wordpress自带的JS库，下面这张图是WP自动的JS文件夹。可以看出有很多JS文件，当然包括大名鼎鼎的jquery和prototype。利用这些我们能实现很多很酷的效...

CSS 3.0 参考手册 (中文版)

Await — Sun, 30 Aug 2009 06:55:34 +0000

作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助你更好的学习和理解CSS3。
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

手册难点

1. 中文资料少，对英文翻译功底要求较高；
2. 基础语法要求字斟句酌，避免产生歧义；
3. 兼容性列表涉及浏览器及版本众多；
4. 草案中的Grid布局被业界同仁普遍认为比“天书”还难…

CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而我们的手册从基础语法到示例制作，都是根据W3C工作草案进行翻译，并结合自身的沉淀制作示例。

备受期待的 CSS 3 新功能

圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

CSS 3.0 参考手册 (中文版) 预览：

下载：

CSS 3.0 参考手册 (中文版) 下载 (366k)

2008-08-24 -- 给你的BLOG添加漂亮的登陆效果 (8)
不知道大家的对WP的登陆是怎么看的，反正我是很不喜欢点个链接到另一个页面去登陆的这种做法。嘿嘿今天给大家带来点小东西，放弃WP默认的登陆方式，打了更加人性化更加酷的登陆方式。同时，由这篇文章开始，引入...
2008-08-20 -- Maxthon v1.0[最新修改] (8)
Maxthon v1.0[最新修改] 1.对所有代码进一步优化，去掉了作品展示部分。 [详细]：对CSS代码进一步优化。和重组，打开后能发现现的在CSS变得很干净。方便大家修改...
2008-08-15 -- 去掉链接时虚线框的几个方法 (2)
我想很多朋友都遇到这个问题，当点击一个链接的时候，总会出现一个虚线框。在这介绍几种去除的方法： 1.直接给链接加是onfocus="this.blur()". 链接 2.CSS实现 ...
2008-08-14 -- JavaScript实现WordPress自由颜色主题切换 (1)
关于自由切换颜色的主题目前有些主题自带这个功能了见下图：现在来谈谈怎么实现这样一个功能。其实很简单的。不管是换颜色和主题，原理都是一样的，即通个调用不同的CSS来替换掉当前的CSS而实...
2009-11-11 -- 左右两栏等高实现方法 (3)
等高布局在实际的应用中会经常用到。最常见的是左边的内容很多。而右边的内容却很少。为了不让右边出现太多的空白，有时需要让右边的高度和左边的保持一致。实现的方法有很多，以前一般是用背景填充来模拟。虽然很简...

jQuery实现背景图渐变切换

Await — Fri, 28 Aug 2009 15:07:54 +0000

链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个站（http://dragoninteractive.com/）。如图所示。

上面的网站在中有很多地方都应用了这种效果。看起来是不是很酷。OK，进入正题；
在这里我用一个简单的实例来分析下，先看下我们要用到的这张图。

我们把背景切换的两张图做成一张。这样的好处我以前也有说过了。详见“CSS中关于背景图的应用技巧”；接下来要做的是写结构和样式部分。

body { margin: 0; padding: 0; text-align: center; }
   #logo {
   position: absolute;
   display: block;
   width: 156px;
   height: 49px;
   /*这部分是让元素相对浏览器垂直居中
   left: 50%;
   top: 50%;
   margin-left: -156px;
   margin-top: -49px;
   -----------------------------------------*/
   background: url(logo.png) top left no-repeat;
   }
   #logo span {
   text-indent: -9999em;
   /*隐藏文字，就是以图替换文字的一种方法*/
   }
   #logo .hover {/*这个样式是为JQ准备的*/
   position: absolute;
   width: 156px;
   height: 49px;
   top: 0;
   left: 0;
   background: url(logo.png) 0 -49px no-repeat;
   }

这里的样式，应该不需要作解释了。很简单的一个样式！下面是结构；

<a href="http://www.wopus.org/" id="wopus"><span>wopusspan>a>

关健是JQ部分，我们来看代码：

jQuery(function() {
   jQuery("#logo").append("");
   //在ID为logo的标签里内部插入一个样式为hover的span
   jQuery('.hover').css('opacity', 0);
   //设置hover的透明度为0
   jQuery('.hover').parent().hover(
   function() {
   jQuery('.hover').stop().animate({opacity: '1'},1000);
   },
   function() {
   jQuery('.hover').stop().animate({ opacity: '0'},1000);
   });
   //这是一个JQ里常用的hover()效果。当鼠标放在class为hover的父元素上时。停止当前标签上的所有动画并执行后面的自定义效果—hover的透明度由0渐变成100%;当鼠标离开后反之。
   });

看起来是不是很简单。其原理就在链接内部再插入一个元素。并通过改变这个元素的透明度来实现。有点像FLASH里的遮罩效果。最后点击下面的链接来看下效果；

http://leotheme.cn/wp-content/uploads/Example/js/dragoninteractive/

2009-06-11 -- jQuery 实现 tab 切换一例 (9)
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
2008-11-20 -- 增强用户体验之文章内的链接 (28)
我们在写文章的时候，难免会少不了添加一些链接。这些链接有的是指向自己的BLOG内的，有的是指向好友的BLOG，或一篇文章。指向自己BLOG的称为内部链接，指向外部的称为外部链接，我们习惯是外部链接在新...
2009-11-30 -- 不刷新（AJAX）获取文章的内容 (24)
相信大家都知道AJAX评论这玩意。AJAX评论带来了很多好处，不用在刷新页面就能发表评论。实时提交，实时显示。很多人都用上了都给自己的BLOG上添加了这样的功能。方法在这就不说了，很多人都作了详细的讲...
2009-11-28 -- WordPress评论表单验证 (10)
wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验...
2009-11-25 -- 一个jQuery弹出层(tipsWindown) (14)
弹出层效果网上很多很多，也没啥好说的了。写这个只是作为学习JQ的一些记录。此插件的一些方法参考了花匠的dialog；在此表示感谢。接着说说这种弹出层的原理或者说是做法。总结下经验；首先需要一个遮罩...

能支持IE6的前端更牛，还是敢对IE6说不的更牛？

Await — Fri, 24 Jul 2009 14:16:09 +0000

作为一个前端，是能够支持更多的浏览器比较牛，还是勇于对IE6说不，更牛一些呢？IE6在其特定历史时期内起到了举足轻重的作用。而如今，是时候让他寿终正寝，离开历史舞台的时候了，他却欲罢还休不离不弃。面对这种态势我们能做些什么吗？

1.臭名昭著的IE6
IE6已经成为现代前端工作者的痛。是的，IE6有无数的毛病，无数的bug。尤其是在现今以CSS作为控制HTML表现得今天，IE6所具有的无数CSS毛病更是让现今的前端工作者痛不欲生。随便就能举出几个问题：双倍边距，3px，重影等问题。IE6也不能彻底支持:hover这种伪类。这些使开发者不得不为IE6制定特定的规则，不论是使用hack、条件注释、条件CSS或者使用JS来弥补，都不同程度上增加了工作量，降低了产值。而如今，大量在线应用的出现，丰富的JavaScript内容的存在，IE6底下的JS执行效率严重阻碍了体验。此外，还有png不透明度的问题。

实际上，这也不能怪IE6，他出现的时候，全世界还都是在表格布局的控制下呢。自然他对标准的支持比不上其他后起之秀。尤其是最近动作很多的以webkit核心的浏览器。

但IE6罪恶之处在于：当他完成历史使命后，依然霸占着互联网的舞台。

2.IE6为何还不退散
首先，微软不主动更新IE6，而是直接推出IE7，并且不强制推送。IE7和IE6界面使用习惯的区别，导致了IE6在很长一段时期内霸占着市场。我就曾经给辅导员升级到IE7，结果又被勒令退回IE6。所幸，这个现象从去年开始已经有所改观了，去年年初起，微软已经开始推送IE7了，而现在IE8也已经在推送了。强制推送的好处是，很大一部分低端用户不会卸载，只能默认接受。虽不人道，也迫于无奈。

另一个导致IE6无法推出历史舞台的原因，也恰恰是微软的Vista的失败。实际上，IE6进入市场取代IE5.5也正是从XP普及开始的。而Vista迟迟无法普及，就导致了其捆绑的IE7无法普及。

还有一个原因，也是由于IE6拖了太长时间，反而导致很多公司内部系统只能在IE6下正常运行，进一步导致这些公司无法部署更高级版本的IE。

实际上，虽然我主要浏览器是chrome和firefox，我本人系统也装的是IE6，一方面是开发需要，另一方面是，IE6速度确实比IE7和IE8快很多。开个网银也更令人惬意。

在这些多重原因的驱使下，IE6成了阴魂不散的恶鬼。

另外，月光博客也有过分析过 IE6在中国依旧占据了庞大市场的原因，可以移步看看。

3.前端工作者的现状
IE6对于标准的践踏的同时，超高的占有率给了所有前段开发者不能抛弃IE6的理由。痛苦，但却无可奈何。

前端工作者为啥不能无视IE6？老板用IE6，老板的朋友用IE6，这是普遍的原因之一。当然，也有拿出数据说，我们网站40%的人还在用IE6访问。

于是，为了那些IE6的用户（包括自己的老板和老板的朋友），前端们不得不为了IE6单独写hack。就我目前经验来说，我现在唯独专门写hack的就是IE6了，其他各种浏览器下几乎没有出入。

是的，为IE6多付出的工作量还是可以换来对应的回报的，也为此，在国内前端们无奈的“纵容”下，IE6用户升级速度进一步放缓。

4.国内外如何推动IE6的灭亡
前几天，国外著名科技网站 Mashable 一篇名为： IE6 Must Die for the Web to Move On 报道，希望IE6能尽快滚蛋中文翻译版。另外，Twitter上也有对应的头像加工的网站，在自己的头像上加上一个小图标： http://twibbon.com/Join/IE6-Must-Die

国外几大网站纷纷针对IE6用户设置了升级的提示。

twitter:

youtube:

facebook:

5.我们可以做些什么
是的，面对这个浪潮，我们可以做什么？一味得妥协？主动行动起来吧！
要相信只要每个人的共同努力，就一定可以让IE6离开这个舞台。
至少，我的老爸就会使用Chrome上网，而不是IE。

1，买新电脑吧！
是的，新的电脑通常配有vista系统，小白们不会跑去装xp的。而vista自带IE7。从此让小白跟IE6说拜拜吧！而更好的情况是，Win7马上就要上市了。到时候更加肆无忌惮忽悠小白买电脑吧！

2，这就是互联网！
没错，中国很多网民，认为那个蓝色的e就是互联网，认为百度或者谷歌就是互联网。那么很简单，直接换一个浏览器，把那个e删除，然后告诉他们，那个狐狸，或者那个球球就是互联网，打开这个，你就上网了！我就是这样告诉我老爸的。现在，他很自如得使用Chrome上网，看视频，看新闻。乐在其中，又很安全，我也放心。

3，你的电脑存在安全漏洞！
看到喜欢使用傲游、TT等IE马甲的用户，直接告诉他们，电脑有安全漏洞，需要升级！是的，他们会相信你的！同时，他们根本不在乎IE的内核是6还是7，但，你在乎，不是么？

4，推荐你一个很棒的浏览器
诚然，存在不少用户，只用IE6，给他们升级后，会说，这个浏览器用不惯。这个时候怎么办？应该向他们推荐用其他浏览器，比如傲游，然后，参考第上面一条。
实际上，直接推荐Chrome也是很容易成功的，我推荐给不少人用Chrome，无不为其急速所震撼。而我之所以推荐傲游，因为傲游3将默认使用webkit引擎，而在遇到网银时自动切换回IE的内核。实在是好。注意，不要随意推荐Firefox，因为Firefox启动速度过慢，以及配置扩展的复杂性，往往让小白们望而生畏。

此外，国内我也看到不少人为了推进IE6的灭亡而所作出的努力。比如 http://www.webrebuild.org/就有类似的计划。只需要把下面代码放到自己的博客上，就可以了。更有甚者，麦鸡的博客已经完全屏蔽IE系列了……

6.到底谁更牛？
能支持5、6个浏览器的前端与敢对IE6说不的前端谁更牛，这不重要。重要的是，能为推动IE6的离去做些什么。
如果什么都不做，安于现状，那么，只会让IE6推迟消亡，自己受到的苦难更多一点，更长一点。
从自己身边的事情做起，相信自己，不论是积极推动还是消极被动，你都在用自己的方式改变这个世界。知道这点，就可以了。

PS：本人也是非常讨厌IE6的，一直希望这个让人恶心的IE6能早点退出浏览器舞台。SO…在以后的主题中将放弃对IE6的支持。希望大家都能够行动起来；

本文转载自：走走停停看看
原文链接：能支持IE6的前端更牛，还是敢对IE6说不的更牛？

2009-08-30 -- CSS 3.0 参考手册 (中文版) (7)
作为一个Web开发者，保持对未来Web标准的关注、学习和了解是很重要的。不管你是第一次准备去认识CSS3，还是已经略知皮毛，这个来自腾讯的webteam发布的CSS 3.0 参考手册 (中文版)将有助...
2009-06-11 -- jQuery 实现 tab 切换一例 (9)
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
2009-05-27 -- jQuery性能优化指南 (6)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开...
2008-11-29 -- 简单几步显示/隐藏文章内容 (16)
最近在几个BLOG里都见到这种效果，在标题前面有个按钮点击后关闭文章的内容[效果见BLOG的首页]。虽然实际上没什么用处，但还蛮好玩的。今天给大家讲讲怎么用jQuery来实现这种功能。其实很简单，我们...
2008-11-06 -- 北京奥运官方网站幻灯切换效果JS版 (2)
我想对于这个焦点图片轮换大家都不陌生吧.不过原来的是FLASH版的.今天偶然看到一个JS版的.效果很酷.在这和大家分享下. 佐佐制造byzuo.cn---焦点图片第三季 ...

等待-放飞梦想

不刷新（AJAX）获取文章的内容

相关文章

WordPress评论表单验证

相关文章

一个jQuery弹出层(tipsWindown)

相关文章

细线表格的处理

随机日志

布局中的固定定位

随机日志

左右两栏等高实现方法

相关文章

新工作，新起点。

随机日志

CSS 3.0 参考手册 (中文版)

相关文章

jQuery实现背景图渐变切换

相关文章

能支持IE6的前端更牛，还是敢对IE6说不的更牛？

相关文章