等待-放飞梦想

勤现在-乐将来

前端交互

增强用户体验之文章内的链接

Await / 前端交互 / 2008/11/20 12:54

我们在写文章的时候，难免会少不了添加一些链接。这些链接有的是指向自己的BLOG内的，有的是指向好友的BLOG，或一篇文章。指向自己BLOG的称为内部链接，指向外部的称为外部链接，我们习惯是外部链接在新窗口中打开，而内部链接在本身的页面打开。但WordPress默认所有的链接都是在自身页打开的。那要怎么才能把外部的链接强行在新窗口中打开呢？今天给大家说下怎样实现给文章的外部链接添加一个标识，并且在符合W3C标准的前提下在新窗口中打开。
继续阅读

CSS jQuery 选择器链接

21

10

jQuery 对checkbox的操作

Await / 前端交互 / 2008/10/21 10:55

很久没有写JQuery的文章了。今天来看下JQ对天Checkbox复选框的操作。
看下面的一个小例子。在这个例子中包括了以下几个功能

1. 全选
2. 取消全选
3. 选中所有奇数
4. 反选
5. 获得选中的所有值
继续阅读

checbox jQuery

18

09

jquery基础教程四[css的操作之css,height和width]

Await / 前端交互 / 2008/09/18 9:10

首先我们看看 css(key, value) 和 css(name)
css(key, value)

在所有匹配的元素中，设置一个样式属性的值。

css(name)

访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。

继续阅读

height jQuery width 前端交互

17

09

jquery基础教程三[渐变效果]

Await / 前端交互 / 2008/09/17 10:16

我们来看看jquery是如何实现淡入淡出效果的.

fadeOut(speed,callback)

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
继续阅读

fadein fadeout fadeto jQuery 前端交互

15

09

jquery基础教程二[伸缩、隔行变色...]

Await / 前端交互 / 2008/09/15 10:34

在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子
Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行]

< !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=gb2312" /> <title>可伸缩块</title> <style type="text/css"> p,div{margin:0;padding:0; font-size: 12px;} .box {float: left; margin-left: 20px; dipaly:inline;} .title1,.title2,.title3{width:280px;background:#cf0;height:20px;line-height: 20px;border:1px solid #aaa; text-align:center;} .content1,.content2,.content3{width:260px;height:350px;border:1px solid #aaa;border-top:none;padding: 10px;} </style> <script type='text/javascript' src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".title1").click(function(){$(".content1").slideDown("slow");}); $(".title2").click(function(){$(".content2").slideUp("slow");}); $(".title3").click(function(){$(".content3").slideToggle("slow");}); }); </script> </head> <body> <div class="box"> <p class="title1">slideDown</p> <div class="content1"> 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div></div> <div class="box"> <p class="title2">slideUp</p> <div class="content2"> 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> <div class="box"> <p class="title3">slideToggle</p> <div class="content3"> 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。 speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) </div> </div> </body> </html>

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

继续阅读

jQuery WP相关前端交互评论隔行变色

11

09

jquery基础教程一[click,addClass,show,hide]

Await / 前端交互 / 2008/09/11 12:05

原创内容—转载请说明出处.

jQuery我想很多人都知道，但用WP的好像很少有人说到这个。今天开始和大家一起来研究下如何用jQuery来为我们的WP添加实用的功能。至于jQuery的相关背景和资料就不在这说了。因为这不是我要说的。我只想说一些实际的东西，也就是我们需要的东西。
先看一个最简的例子：Hello World
继续阅读

jQuery WP相关前端交互

28

08