Seven Yu @ 08/19/2008 (5:30 pm)

基于 jQuery 的 Plurk 表情猴子脚本(Greasemonkey)

verion 1.0
Plurk Smile

verion 2.0
Plurk Smile

verion 3.0
Plurk Smile V3.0

最近研究 jQuery 小有收获,感觉这玩意儿真是方便,于是到处找实习机会。

昨天,土豆王Plurk 上发布了一个 用 AutoHotkey 写的自动插入表情的小程序,感觉想法非常不错,只是需要记住表情的代码,有点麻烦。我想最好能弹出窗口让用户点击选择表情,这样既直观又方便,而且不用记忆表情代码。

于是研究了一下ahk的gui部分,未果。今天偶然想到之前 Eddie 推荐的 Greasemonkey,据说这玩意儿很强大,而且脚本是用javascript,用这东西把表情整合到 Plurk 页面再合适不过了,于是诞生了下面的脚本(代码是 version 1.0 的, 新版本的源码可以看这里):

PLAIN TEXT >> JAVASCRIPT:
  1. // ==UserScript==
  2. // @name           Plurk Smile
  3. // @namespace      http://phpz.org/
  4. // @description    Easy to insert Smile
  5. // @include        http://www.plurk.com/user/*
  6. // ==/UserScript==
  7.  
  8. // jQuery 1.2.6 pack
  9. // 这里是 jQuery 脚本
  10.  
  11. // My Script
  12. var phpzOrgPlurkFaceCount = new Array();
  13.  
  14. phpzOrgPlurkFaceCount.push(new Array('http://ipx6.cn/plotion/onion/',
  15. new Array('ah.gif','ah2.gif','ah3.gif','angry.gif','angry2.gif','angry3.gif',
  16. 'angry4.gif','angry5.gif','baby.gif','bath.gif','buddha.gif','bye.gif',
  17. 'circle.gif','cold.gif','cold2.gif','cold3.gif','cold4.gif','comfortable.gif',
  18. 'cool.gif','cry.gif','cry2.gif','cry3.gif','cry4.gif','dizzy.gif','faint.gif',
  19. 'ghost.gif','glasses.gif','hand.gif','happiness.gif','hope.gif','idea.gif',
  20. 'ill.gif','knife.gif','lol.gif','look.gif','love.gif','lovely.gif','music.gif',
  21. 'nose.gif','oh2.gif','orz2.gif','pia.gif','question.gif','redcard.gif','runcry.gif',
  22. 'shrug.gif','shy.gif','shy2.gif','shy3.gif','sleep.gif','smile.gif','smoke.gif',
  23. 'soccer.gif','soccer2.gif','soccer3.gif','speed.gif','star.gif','sweat.gif',
  24. 'sweatlove.gif','think.gif','vomit.gif','w.gif','wall.gif','wind.gif',
  25. 'wind2.gif','wow.gif','xd.gif','yawn.gif','yellowcard.gif')));
  26.  
  27. var phpzOrgPlurkImageArea = $('
  28. ');
  29. var phpzOrgPlurkShowSmile = $('<a href="javascript:void 0;">Show Smile&gt;</a>');
  30.  
  31. $(phpzOrgPlurkFaceCount).each(function(item)
  32. {
  33. phpzOrgPlurkAppendImage(this);
  34. });
  35.  
  36. $(function()
  37. {
  38. var curInput = $('#input_big');
  39. var in_big = $('#input_big');
  40. $('#input_big').add('#input_small').bind('focus', function()
  41. {
  42. curInput = $(this);
  43. });
  44. phpzOrgPlurkShowSmile.insertAfter(in_big)
  45. .css('font-size', '12px')
  46. .toggle(function()
  47. {
  48. $(this).html('Hide Smile &lt;');
  49. phpzOrgPlurkImageArea.slideDown('slow');
  50. },
  51. function()
  52. {
  53. $(this).html('Show Smile&gt;');
  54. phpzOrgPlurkImageArea.slideUp('slow');
  55. });
  56. phpzOrgPlurkImageArea.insertAfter(in_big)
  57. .hide()
  58. .css('background-color', '#fff')
  59. .find('img')
  60. .css({'width':'27px', 'margin':'2px'})
  61. .bind('click', function()
  62. {
  63. curInput.val(curInput.val() + ' ' + this.src + ' ').focus();
  64. });
  65. });
  66.  
  67. function phpzOrgPlurkAppendImage(arr)
  68. {
  69. var baseUrl = arr[0];
  70. $(arr[1]).each(function()
  71. {
  72. var _url = baseUrl + this;
  73. phpzOrgPlurkImageArea.append('<a href="javascript:void 0;"><img src="'+_url+'" alt="'+this+'" /></a>');
  74. });
  75. }

脚本页面:version 1.0 version 2.0 version 4.6,点击 “install this script”,提示安装成功后刷新 Plurk 页面就能看到效果了。

Seven Yu @ 08/12/2008 (12:48 pm)

[BS IE7]关于 IE7 中的 file 表单

Tags: , , ::

困扰了2天的问题终于找到原因了,起初测试表单总是无法提交(firefox 和 opera 没问题),上网搜了一下发现有人问 IE7 下提交表单没反应的问题,以为是 form.onsubmit = function(){return false;} 的问题(伪代码),后来写了个测试代码,发现不是这的问题。

由于是第一次用 jQuery,于是又怀疑自己的表单表达验证脚本,修改脚本、尝试使用 jquery-validation 插件,问题依旧... ( btw:jquery-validation 插件不错哦 :D )

于是我开始抓狂了,就在这时 RP 爆发,偶然想会不会是 file 表单的问题。之前发现 firefox 和 opera 都对 file 表单进行了处理:firefox 中是不允许输入,无论点击文本框和还是点击"浏览..."按钮都会打开文件对话框;opera 中的 file 表单虽然允许输入,但最终提交表单时如果输入的文件路径不存在也会有提示(尽管提示很难看)。所以我想会不会 IE7 中也做了处理呢,于是点击浏览按钮选择了一个本地文件(之前为了测试,file 表单中都是随便输入的字符),再次提交,成功~~ 8-)

我就无语了,既然做了处理,不允许填入不存在的文件路径,为什么不能给个提示呢,哪怕是个很难看的提示。

总结:IE7中file表单中必须选择存在的文件,否则不能提交。