知也无涯插件 http://blog.xiaoding.org 什么都略懂一点，生活会多彩一些 Tue, 03 Aug 2010 18:01:34 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 自制了山寨版的评论框表情插件 http://blog.xiaoding.org/post/selfmade-wpgrins-popup-plugin.html http://blog.xiaoding.org/post/selfmade-wpgrins-popup-plugin.html#comments Wed, 13 May 2009 17:46:40 +0000 xiaoding http://blog.xiaoding.org/?p=190 自制的表情选择框

自制的表情选择框

最初在博客中也是用的 mg12 写的 Highslide4WP 插件，主要用途是评论框的那个表情弹窗。因为 mg12 不再更新原来的 WP Grins Popup ，只有这个好用了。

前几天给博客做了一下手动优化，主要是加快页面的载入速度。除了 HTML 缓存这种传统的技术之外，还分析了页面 <head> 部分载入的代码。纯HTML代码无关紧要，无非是给页面定义了一些 meta tag 之类的东西，关键是看载入的 Javascript 和 CSS 代码。最后无奈地发现 Highslide4wp 中用到的 javascript 库居然有 31KB 之大，对我来说这无法忍受，只好把这个插件撤下了。mg12 在 WP Grins Popup 的说明中也写到：

但前提是你正在使用 Highslide JS. 如果你不喜欢 Highslide 那样的效果, 只是为了这个表情图标的 pupop 而浪费 50kB 左右的开销以加载 JavaScript 代码, 会显得有些不值得.

后来换上了 ThinkAgain 写的 Wordpress Smilies，虽然效果不够炫丽，但是网页的开销是降低了不少。由于博客中使用了 jQuery 库的缘故，一直琢磨着用 jQuery 做出一个与 Highslide4wp 类似的表情弹窗出来。今天折腾了大半个晚上，总算是搞定了。

弹窗的CSS样式我没有重写（准确地说俺还不太会创造，只能改改），而是直接借用了主题中的 div 容器效果，协调一点也好。至于动画效果，我琢磨着 Highslide4wp 中的那种 expand 效果比较困难，要在四个边上同时进行移动，自己对 CSS 又不太熟，干脆直接用了 jQuery 中的几个效果，看上去也不错 :-) 至少也是动画的嘛。

感谢 mg12 的插件以及主题作者 yinheli ，借用了不少东西。    :-)  

这等山寨的东西我拿不出手，自己凑合着用就行啦。

PS: 下次写一写盗版 awflasher 的“正在加载”进度条的过程。

By the time your rss reader get this post here is 26 comments ,Welcome you come to leave your opinion !

相关文章

]]> http://blog.xiaoding.org/post/selfmade-wpgrins-popup-plugin.html/feed 26