I'm qiqiboy ! » 用户体验 http://www.qiqiboy.com 一个very朝气的小孩子... Wed, 18 Jan 2012 03:32:41 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Email输入框处实时显示gravatar头像+email验证+动态信息提醒 http://www.qiqiboy.com/2009/12/30/email-input-box-office-real-time-display-gravatar-picture.html http://www.qiqiboy.com/2009/12/30/email-input-box-office-real-time-display-gravatar-picture.html#comments Wed, 30 Dec 2009 09:30:00 +0000 qiqiboy http://www.qiqiboy.com/2010/01/01/email%e8%be%93%e5%85%a5%e6%a1%86%e5%a4%84%e5%ae%9e%e6%97%b6%e6%98%be%e7%a4%bagravatar%e5%a4%b4%e5%83%8f.html 这是一个实时预览自己Gravatar头像的，当你输入自己email后就会在这里实时显示你的头像！当然，这个想法冒出时我网上搜索了一下，还真有人搞过，你可以百度搜索“实时显示gravatar”，别人介绍有很简单的实现方法。本文最下面也有我写的jQuery代码，一行搞定！！但我下面的js代码结合了其它功能，不光显示email头像，还结合了实时显示输入名字，提示文字，email验证检测等小功能。

email 头像实时显示]]> 不知道有没有人发现，我的评论输入框处最近几天和一周前有了些许改变。之前只有老访客（发表过评论，浏览器中保存有cookie）来时资料输入框会显示头像，并会折叠起来。但是现在即使新访客第一次来，也会看到一个显示gravatar头像的小区域，当然，默认它显示的是“神秘人头像”。这是干什么的？

答案：这是一个实时预览自己Gravatar头像的，当你输入自己email后就会在这里实时显示你的头像！当然，这个想法冒出时我网上搜索了一下，还真有人搞过，你可以百度搜索“实时显示gravatar”，别人介绍有很简单的实现方法。本文最下面也有我写的jQuery代码，一行搞定！！但我下面的js代码结合了其它功能，不光显示email头像，还结合了实时显示输入名字，提示文字，email验证检测等小功能。

我这里代码比较啰嗦，因为我要照顾两种情况，一种是老访客，即访问时折叠显示资料框，还有隐藏/显示按钮，另一种新访客正常显示资料输入框。这两种的提示文字也不一样，比如老访客显示welcome back，新访客你就不能这样问候他们了。另外资料输入框中还有提示文字“your email””your name”等文字，是受到搜索框中添加提示文字启发，给资料输入框也加入了提示文字。因为我不想动以前的代码，所以为了不破坏这种效果，也要考虑到这一点。

我的comments.php中资料输入处代码：

<div id="real-avatar" class="comment-avatar">//定义头像显示位置

 

<?php echo get_avatar($useremail,'32'); ?>//用WP内置函数取得头像，，如果你用常规的avatar头像获取url样式，并定义其一个ID，下面的js代码会简单很多，不过我更喜欢WP默认函数调用。

 

</div>

 

<div id="welcome"> //这个是显示问候语的

 

/*老访客显示welcome back 用户名*/

 

<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH])) { ?>

 

<?php printf(__('<span id="commentwelcome">Welcome back </span><strong><span id="author-name">%s</span></strong>. '), $comment_author) ?>

 

<?php } else { ?>

 

/*新访客则显示一段我自定义的文字*/

 

<?php printf(__('<span id="commentwelcome1">Hi, I know you have something to tell me. Please leave me a reply</span><strong><span id="author-name">%s</span></strong>. '), $comment_author) ?></div><?php endif; ?>

 

<?php } ?></div>

 

/*请注意这两种不同定义中的commentwelcome和commentwelcome1，我的js代码中靠判断这两值的有无来区别老访客和新访客的*/

 

当然，我这里贴的是大概结构，有一些我省去了，这里只是为了让你更能理解下面我的js代码为何要写那么麻烦。

下面是我写的JavaScript代码（为什么不用jQuery呢，嗯，我也写了jQuery代码，但是发现只是取得对象时简单了，但是下面这段代码麻烦在情况判断上，并不能减少多少工作量，而且我好久没写过原生JavaScript，怕再不用就忘光了），比较繁琐，如果你只是想要实现 实时显示头像，则不必看了，只需网上搜一下别人写的即可，但是他们的都是转载一个叫冰古的人的，他的代码调用gravatar头像那里有些问题；如果也想要兼容你的原来的折叠资料输入框，我的代码你可以参考一下。写的很繁琐，因为照顾到两种不同样式，以及不破坏之前的输入框提示文字，还要动态改变头像右边的文字，真的很麻烦。

这段代码包括了email验证，url自动加上http://，动态判断不同情况显示不同问候语等。注意其中的MD5()函数是调用我网上找的一个给字符串MD5加密函数，你需要网上找一下，因为这个网上也很多，我就不贴了。

JavaScript代码：

<script type="text/javascript">

 

//声明所需变量

 

var real_avatar = document.getElementById("real-avatar");

 

/*因为用WP的默认函数get_avatar()获取的avatar头像，所以这里只能这样取得头像，先获取ID，再取得此容器下img数组的第一个，即取得了avatar头像*/

 

var chang_avatar = real_avatar.getElementsByTagName("img")[0];

 

var an = document.getElementById("author-name");

 

var welcome = document.getElementById("commentwelcome");

 

var welcome1 = document.getElementById("commentwelcome1");

 

var email = document.getElementById("email");//取得Email输入框

 

var author = document.getElementById("author");//作者输入框

 

var httpurl = document.getElementById("url");//网址输入框

 

//定义触发动作，当失去焦点时触发函数

 

author.onblur = changAuthor;

 

email.onblur = changeAvatar;

 

httpurl.onblur = setHttp;

 

function changeAvatar() {//定义改变头像函数

 

    email_value = email.value.toLowerCase();//取得email值并转为小写（大小写md5值不一样，gravatar是用小写email MD5值验证头像的，如果输入大写，则不会正确匹配头像）

 

    email_md5 = MD5(email_value);//这里是将email值转为MD5，这里还需要一个转MD5函数，这里就不贴了，网上有。

 

    reMail = /^(?:[a-zA-Z0-9]+[_-+.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_-]?)*[a-zA-Z0-9]+.)+([a-zA-Z]{2,})+$/; //email验证正则表达式

 

    test_email_value = reMail.test(email_value);//验证email值，返回值为true或false

 

    //定义获取gravatar头像的url，这里包括了大小和等级，还有默认图片

 

    new_ga = "http://www.gravatar.com/avatar.php?gravatar_id=" + email_md5 + "&size=32&d=identicon&r=G&default=http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32";

 

    if (email_value != "") {//如果email输入框不为空

 

        email.className = email.className.replace(" searchtip", "");//这里是去除email输入框的seachtip属性

 

        if (test_email_value) {//email验证通过，输入的是一个正确的email

 

            chang_avatar.setAttribute('src', new_ga);//将头像地址重设为匹配此email的avatar头像地址

 

            document.getElementById("submit").disabled=false;//将提交按钮禁用属性去除

 

            //接下来是判断作者输入框值，显示提示文字

 

            if (author.value == "Your Name"){//如果输入框为提示文字 Your Name

 

                if (welcome) {//如果是老用户，即浏览器中有cookie，有折叠隐藏资料输入框按钮的

 

                    welcome.innerHTML = "Please input your name"//将提示文字设置为“Please input your name”

 

                } else {//第一次访问用户

 

                    welcome1.innerHTML = "Please input your name"

 

                }

 

            } else {//作者输入框值如果不为“Your Name”，即输入了用户名

 

                if (welcome) {//老访客显示 welcome

 

                    welcome.innerHTML = "Welcome back ";

 

                    an.innerHTML = author_name;//访客名字处显示作者输入框处值

 

                } else {

 

                    welcome1.innerHTML = "Thank you, ";//新访客显示“thank you”

 

                    an.innerHTML = author_name;

 

                }

 

            }

 

        } else {//如果email验证失败

 

        document.getElementById("submit").disabled=true;//将提交按钮禁用

 

            if (welcome) {//这里还是区分老访客和新访客

 

                if (author.value == "Your Name") {//再次判断作者输入框值

 

                    welcome.innerHTML = "Please input your name and a right email";//提醒输入名字和一个正确的email

 

                } else {//作者输入框有内容且不为Your Name，则只提醒输入正确email

 

                    welcome.innerHTML = "Please input a right email ";

 

                }

 

            } else {//这里是新访客显示内容

 

                if (author.value == "Your Name") {

 

                    welcome1.innerHTML = "Please input your name and a right email";

 

                } else {

 

                    welcome1.innerHTML = "Please input a right email, ";

 

                }

 

            }

 

        }

 

    } else {//如果email输入框为空

 

        email.className += " searchtip";//添加searchtip属性，方便css定义提示文字颜色

 

        email.value = "Your Email"//将email值设置为提示文字 Your Email

 

    }

 

}

 

function changAuthor() {//更改作者名字函数

 

    author_name = author.value;//定义作者输入框的值

 

    if (author_name != "") {//如果输入框不为空

 

        author.className = author.className.replace(" searchtip", "");//同上面那个改变avatar函数，这里去除输入框的searchtip属性

 

        if (welcome && test_email_value) {//若果验证通过email

 

            welcome.innerHTML = "Welcome back "

 

        } else if (welcome1 && test_email_value) {

 

            welcome1.innerHTML = "Thank you, "

 

        } else {//如果没通过email验证，输入了错误email或者还没有输入（值为Your Email）

 

            if (welcome) {

 

                if (email.value == "Your Email"){//如果还未输入

 

                    welcome.innerHTML = "Welcome back ";

 

                } else {//输入了错误email

 

                    welcome.innerHTML = "Please input a right email ";

 

                }

 

            } else {//新访客

 

                if (email.value == "Your Email"){

 

                    welcome1.innerHTML = "Thank you, ";

 

                } else {

 

                    welcome1.innerHTML = "Please input a right email, ";

 

                }

 

            }

 

        }

 

        an.innerHTML = author_name;

 

    } else {//如果作者输入框为空

 

        if (welcome) {

 

            welcome.innerHTML = "Please input your name";//则提示输入名字

 

            author.className += " searchtip";//加上search属性，并将值设为 Your Name

 

            author.value = "Your Name"

 

        } else {//新访客则将提示文字初始化为原始值，当然，你也可以换个提示文字

 

            welcome1.innerHTML = "Hi, I know you have something to tell me. Please leave me a reply";

 

            author.className += " searchtip";

 

            author.value = "Your Name"

 

        }

 

        an.innerHTML = ""//清除作者名字显示区域

 

    }

 

}

 

function setHttp() {//设置http://函数

 

    var tips = httpurl.value.substr(0, 7).toLowerCase();//取得输入值的前七位，并转为小写

 

    if (tips == "http://") {}//如果匹配“http://”，无动作

 

    else if (httpurl.value != "") {//如果不匹配 “http://”，输入值也不为空

 

        httpurl.value = "http://" + httpurl.value//则将输入值前加入"http://"一同返回

 

    } else {//如果输入框为空

 

        httpurl.className += " searchtip";//加上提示文字

 

        httpurl.value = "http://"

 

    }

 

}

 

</script>

 

其实上面的代码有些是为了兼容以前的js代码，因为要对同一个对象再次操作，所以难免会破坏之前的一些定义。只是要实现头像实时显示，则只需十来行代码即可实现。用jQuery则一行即可：

$('#email').blur(function(){$('#real-avatar .avatar').attr('src','http://www.gravatar.com/avatar.php?gravatar_id=' + MD5($('#email').val())) + '&size=32&d=identicon&r=G&default=http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32';})

 

这一行jQuery代码就足够了。用jQuery是不是很简单，呵呵。

我写的代码中用到了email验证，但是并不是防止Spam用的，只是善意的提醒email有没书写正确，因为我有时就写错了email格式，结果提交后又给返回，内容还得重新输入。这里给用户一个小提示，可以告诉他email有没写对，配合gravatar实时显示，也可以验证email有没写错，是不是自己的email。第三个函数setHttp()是给输入的地址加上http://，虽然即使没有http://，WP也可正确识别。这里只是提高访客体验。

我上次说过上一篇日志是本年度最后一篇，但是由于过两天有些事情要忙，正好又有人邮件问我有关这方面代码（没想到才几天居然就有人能发现我博客这一点改变。。），我就在这里贴出来吧，希望能帮到一些需要这个功能的朋友。

当然，以上这些有些人可能会觉得很无聊，这个也确实是很无聊的功能，但是我坚信细节处的改变对于访客体验的提高是不容置疑的。

最后提示：很重要的一个给字符串md5加密函数我没有写出，请自行网上搜索，并添加到你的js代码前边。如果函数名不是MD5()，请更改相应处的函数名。

还有一点我也要提一下，最近两周来不知是因为了到年关了还是怎么了，几乎每天都会收到一两封向我索要主题的邮件，尤其是最近几天。有人喜欢这款主题我很高兴，因为这款的配色并不是大众能接受的，因为之前批评过我主题配色的人不在少数。之前我有过准备发布，但是后来我因为要加入后台管理，所以索性又重新写了模板代码，并且加入了好些其他东西，如广告管理，文章动态加载等，即使现在也一直在抽时间改进。所以模板代码很乱，因为时不时就要改动，后台设置也要相应跟上，一直没有整理。所以可以说，这款主题还未完成，有些功能要正常使用还需配合我的修改。但是我会努力使它尽早完成，现在主要就是后台管理功能还未完成。之前邮件索要主题的我都给予了回复，这里再说一下，因为每天收到的邮件很多，怕有漏掉未回复的。所以，请不要再给我发邮件索要主题，如果真的喜欢，请继续关注我的博客。我会尽量快点提供下载的。

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址: http://qiqi.boy.im/31

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

  • 2011年07月20日, xiaoxin say: 纯测试！
  • 2011年03月22日, ChiNvo say: 测试一下，看看效果，决定copy一下了
  • 2011年03月21日, 丰禾棋牌 say: 相当不错啊！支持啊。。。
  • 2011年01月10日, kaysnoopy say: 膜拜。。。
  • 2010年10月29日, Weitian Zhao say: 纯测试,博主无视即可...
  • 2010年10月12日, Hello WordPress! - I'm qiqiboy ! say: [...] 2009.12 我这个月换了新主题，look here 就用这个主题了，不换回老主题了。( ⊙o⊙?)；另外我也折腾了Email输入框处实时显示gravatar头像+email验证+动态信息提醒，还有美味小饼干——cookie实战之结合cookie给最新日志添加论坛式‘new’图标 [...]
  • 2010年09月12日, blueandhack say: 测试~~~
  • 2010年09月9日, 【SimPaled篇】Introduce My Blog Theme For You - I'm qiqiboy ! say: [...] 发表评论部分支持隐藏访客、管理员信息，实时显示gravatar头像，输入字数统计等，文本输入框支持系列编辑器，自由粘贴代码。——注：实时头像参考《Email输入框处实时显示gravatar头像+email验证+动态信息提醒》，编辑器参考《为评论框添加文字格式化编辑器》，自由粘贴代码参考《让你的评论框自由粘贴代码》，字数统计参考《评论框的简单计数器（无需改动模板，附带输入字数限制功能）》 [...]
]]> http://www.qiqiboy.com/2009/12/30/email-input-box-office-real-time-display-gravatar-picture.html/feed 41 增强用户体验，进一步美化友链页面，添加loading图片 http://www.qiqiboy.com/2009/12/03/enhancing-the-user-experience-further-beautification-links-page.html http://www.qiqiboy.com/2009/12/03/enhancing-the-user-experience-further-beautification-links-page.html#comments Thu, 03 Dec 2009 10:00:00 +0000 qiqiboy http://www.qiqiboy.com/2009/12/03/%e5%a2%9e%e5%bc%ba%e7%94%a8%e6%88%b7%e4%bd%93%e9%aa%8c%ef%bc%8c%e8%bf%9b%e4%b8%80%e6%ad%a5%e7%be%8e%e5%8c%96%e5%8f%8b%e9%93%be%e9%a1%b5%e9%9d%a2%ef%bc%8c%e6%b7%bb%e5%8a%a0loading%e5%9b%be%e7%89%87.html 
<img onerror="javascript:this.src='/files/links.gif'" 
onload="javascript:this.style.backgroundImage='none'" 
src="http://bbs.pcbeta.com/favicon.ico" style="background: url(loading.gif) repeat scroll 
center center transparent;"/>
]]> 上篇文章我讲了对友情链接页面的美化——自动添加favicon.ico图标，后来在测试中，发现由于icon图标是从各个网站上下载下来的，由于其所处服务器的不同，导致下载速度不一，有时需要很久才可以下载过来，这严重影响了我的网站的加载速度。有没有什么方法能改变这种状况？

我想到两种方法：一是从根源上解决加载速度问题，即在我的主机服务器上缓存这些图标（本站的gravatar头像图标即利用了缓存），但是我代码不熟，估计写不出来，就不试了。二是添加一个loading图标，增强用户体验。最后我选择用这种方法。

刚开始我抱着很简单的想法，直接给img对象添加background-image属性，加入一个loading图片。但是测试后，才发现，由于有些favicon图标是有透明度的，所以此时背后那个loading图标就会显露出来。如下图rrr 所以得在图标加载后隐藏掉那个loading图片。无疑得用JavaScript了。最初我想在全局隐藏，即在footer.php中用JavaScript去除所有img对象的background-image属性，但是这样处理，如果有页面上有一个图标未加载完成，其它已加载好的favicon图标后面的loading图片依然无法消除。

所以我决定利用img对象的onload属性，即图片加载完成后触发的动作。将隐藏函数直接写入img叙述中。

先来看看处理过以后的html源码：

<img onerror="javascript:this.src='/files/links.gif'"
onload="javascript:this.style.backgroundImage='none'"
src="http://bbs.pcbeta.com/favicon.ico" style="background: url(loading.gif) repeat scroll 
center center transparent;"/>

那个onerror知道是什么吧？不知道看我上篇文章。style中的background设置了一个loading图片，即可在图标位置背景处显示。我们要做的就是在图片加载后去除这个图片。onload（它常见于被用于window对象）是我在这里添加的一个对象属性。图片加载完成后触发动作函数javascript:this.style.backgroundImage=’none’，将这个img对象的background-image属性去除，即去掉了后面的loading图片。

至于怎么处理我就无需多讲了吧，就像我上篇文章所讲的添加onerror属性一样加到那里即可。

具体效果请再次移步到我的友情链接页面吧！dd

——————————————————————分割线——————————————————————

有了以上思路，我们可以将这个方法拓展一下。比如，可以给gravatar头像添加这个，甚至侧边栏的wp-recentcomments。方法都是一样的。本站即这样处理了gravatar头像。

再广一点，可以给全站的img对象添加这个。当然，如果只是给文章中图片对象加入loading图片，则只需css中定义好一个class样式，如

.imgload{//手动给每个img对象加入class=imgload
   background:url(loading.gif) no-repeat center center;
   }



img{//全站图片加上loading图片，如果有页面有透明属性图片，则会显示出背后的loading图片



   background:url(loading.gif) no-repeat center center;



   }






以后文章中加入的图片可以给加个class=imgload,即可在图片未加载时显示一个loading图片了。这里没有考虑图片加载后隐藏掉loading图片，因为文章中图片大都是jpg，很少透明吧！呵呵，不排除有人会用有透明的png，gif图片，这些人还是考虑用JavaScript来处理这个问题吧。






——By QiQiBoY




声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy ! 
 
本文地址: http://qiqi.boy.im/1e
Look, this post is replyed so hot, let's go O(∩_∩)O~.
Related comments
  • 2010年08月28日, david say: 哇。。这个很不错哦。
等下我也去应用看看行不？
  • 2010年08月28日, joyla say: @QiQiBoY   :!:  我很杯具  很久碰到去了！
  • 2010年08月28日, QiQiBoY say: @joyla
故意的，运气差你要先等上2s评论才会开始加载。。。
  • 2010年08月28日, joyla say: 评论加载过慢！
  • 2010年03月27日, test say: 留言能关闭广告？？呵呵 试试。
  • 2009年12月27日, evlos say: @ QiQiBoY : 喔，这样，了解了。多谢解释那么详细。
  • 2009年12月27日, QiQiBoY say: @ evlos : 其实这句完成的应该是每个img对象都加入了onload=javascript:this.style.backgroundImage=’none’ ，关键在onload
  • 2009年12月27日, QiQiBoY say: @ evlos : 当然，这个是为了让图片在载入完成后自清除背景（我的友链就用到了这个），但有时候图片很小，尤其是评论头像，在脚本起作用前就已经载入了，所以为了清除这部分载入太快的图片的背景，就还需要用jQuery设置网页载入完成后15秒内再全站清除一遍图片背景jquery('img').css('background-image','none');
]]>
			http://www.qiqiboy.com/2009/12/03/enhancing-the-user-experience-further-beautification-links-page.html/feed
		16