记得两年前刚开始玩 flickr 的时候,贴心的使用体验一下子就征服了我。其中对一个更改照片主题的效果印象尤其深刻:鼠标移到照片的主题上,这条文本背景变成淡黄色;左键点击,文本变成输入框;输入新名字后回车,名字更改完毕。整个过程不像在操作网页,倒是像在使用文本编辑器。
由于对 html,javascript 所知甚少,隐藏在这神奇效果后面的技术令我叹服不止且念念不忘。随着后来看了一点点 Ajax 方面的东东,感觉到这应该是页面上的元素替换。这两天尝试了一下 jQuery,想起了这个当年让我耳目一新的页面效果,实现之:
-
-
$(document).ready( function() { //网页 ready 后加载此方法
-
$('span[id=email]') //定位到<span id="email">元素
-
.mouseover( function() { $(this).css("background-color",
-
"#ffff90") }) //鼠标移上<span id="email">元素后改其css里background-
-
color的值
-
.mouseout( function() { $(this).css("background-color",
-
"white") }) //鼠标移离<span id="email">元素后改其css里background-
-
color的值
-
.click( function() { //给<span id="email">元素绑定 click 事件
-
var origEmail = $(this).text() //取得<span>元素包含的文本
-
$(this).hide() //隐藏自身
-
$('<input name="email" value="' + origEmail + '" type="text"/>') //创建
-
一个<input>元素其值为原来的 email
-
.appendTo("div#email") //把该元素添加到<div id="email">中
-
.focus() //把焦点移到该元素上
-
.keydown( function(ev) { //绑定 keydown 事件
-
if (ev.which == 13) { //回车的键盘 key code 为 13
-
var email = $(this).val() //取出<input>元素此时的值
-
$(this).remove() //移除该<input>元素
-
$('span[id=email]').text(email).show() //显示
-
原来的<span>元素并将 email 添加其中
-
}
-
})
-
})
-
})
完成后,心情一阵悸动,哈哈,好久没这么爽了,两年来压在心头的谜团就这么解掉了。
示例页面:input_replace_span.html
更新:
上面的代码是精炼过的,本来面目可不是这样,花了许多时间 refine,将收获总结如下
1.用 hover 的方法可以替换 mouseover 和 mouseout,将两句话写在一句里面。但是在这个地方,hover 却还有些问题,input 变成 span 后,有时鼠标不在 span 上,它的背景色仍然是淡黄色(Fx 有此问题,IE 没有)
2.attr 修改属性的方法固然好,但是对于 style 属性因为 css 里面又有各种描述,所以 jQuery 做一个 css 方法不是白做的,理由见回复
3.在匿名函数里面,本元素用 $(this) 表示就 ok 了,没必要再用 selector 定位一次
4.span 在被 input 替换的时候,不用 remove,只用 hide 即可,到需要它的时候再 show 出来。这种方法明显对性能有好处,否则如果 remove 掉再 appendTo 进来时,还要重新绑定一系列事件响应函数
5.jQuery 的 API 文档里面对事件响应内的匿名函数的参数没有言及,它是可以传递参数的,代码里的 keydown 事件就传了 ev 进去
6.对于键盘响应的 key code,Fx 和 IE 支持的标准不同,网上的示例基本都是 key=window.event?ev.keyCode:ev.which 这样解决的。jQuery 包装了一层,所以在这里用 ev.which 即可
7.可以将 appendTo,keydown,focus 这些函数写在一条语句里面,不过保证性能的同时也要兼顾代码可读性
Write Less, Do More. Let's Go!
最新评论