[JavaScript]只需一行代码,轻松搞定快捷留言功能
快捷留言功能,就是您现在看到在右侧浮动的那个小玩意,通过它可以直接提交留言并推荐,您想在博客里加上这个功能吗?
别急,方法非常简单,还是先听我说说它的来历吧...
最开始,快捷留言这个功能要追溯到发表[AjaxControlToolkitTests自动测试框架完全解析之一:架构篇]这篇文章的时候,当时它纯粹是那篇文章的副产品,本来没太在意,本想只是给像我一样的懒人准备的一条捷径而已,后来因为没有提示这个功能会直接自动提交留言,还引起了几枚同学的不满意,于是后来又在醒目位置加上了提示:[提示:快捷链接会直接推荐并提交留言信息。],才平息了局势;
再后来,有部分同学可能是鼠标太高级,连击速度特别快的原因,每次使用我的快捷留言功能都会把五个(我要顶,路过,期待下一篇,太棒了,我要推荐)快捷链接都全部点一遍才过瘾,本来嘛,我放那么多快捷链接是希望给大家多提供几种选择,本意是不希望您每个都点一遍的,结果本来是出于为懒人提供的懒工具,却让人突然变勤劳了,实在是罪过。大家都这么勤劳,我可受不起,留言搞得跟聊天室刷屏一样,究其根本,还是原来的程序写得太简单,没有考虑细节,于是现在只留下了两个快捷链接,并且在程序上加了限制,这样就不至于会刷屏了。
再再后来,就是最近几天,我发现快捷留言的功能被越来越多的人加到了自己的博客里,昨天看到这篇文章(here)更是几乎原封不动地白盒拷贝了我的快捷留言功能的代码。这些应用让我重新思考快捷留言这个小功能的定位,客观地说,这个功能其实是对博客园现有留言功能的一个很好的扩展!那么,与其让人反复地去重新制作轮子,为啥不提供一个公共的扩展给大家直接使用呢?
基于以上历史原因,经过几个小时的努力,新版的通用快捷留言功能诞生了!这个版本的目标就是做到简单通用,其他博客园的博主只需简单的引用就可以直接在自己的博客里添加快捷留言功能了!目前该功能定为v1.0bate版,还有一些特性待完善,未来版本会提供更多的用户自定义设置功能,有什么新的想法也会逐步加进去,所以如果您希望未来能够自动升级新版本,就直接引用我这里的文件即可,所有使用这个脚本的用户都会同时同步更新。
其实用法真的很简单,只需要在[后台管理]->[设置]->[页首Html代码]的文本框里,填入下面这句话就行了。
//放在[后台管理]->[设置]->[页首Html代码]的文本框里<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/justinw/jMsg.js"></script>
具体如下图所示:
这里就是整个通用快捷留言功能的源代码了,时间很短,代码没有经过严格的测试,所以也请大家先实际使用测试一下,欢迎您批评指正!代码都很简单,我也加了很多注释,这里就不再累述了,有问题直接留言就行了。
//作者:Justin
//出处:http://justinw.cnblogs.com/
//版权:转载请保留出处即可。
//版本:V1.0 beta
//最后更新:201003300330
//备注:如有问题,可以优先到 http://www.cnblogs.com/justinw/archive/2010/03/30/1700190.html 留言提问。//--begin--jMsg---
function jMsg() { }//初始化动作
jMsg.prototype.setup = function() {jMsg.loadEvent(this.combat);//jMsg.loadEvent(jMsg.msgDIV);jMsg.msgDIV();
}//提交留言信息
jMsg.prototype.post = function(msg) {//这里通过判断HaveUp标志位,来防止反复提交相同留言。if (window.top.HaveUp) {alert('您已经顶过了!谢谢朋友 :)');return;}var txt = document.getElementById('tbCommentBody');if (txt != null) {txt.style.backgroundColor = "#E4F5FF";var date = new Date();txt.value = msg;txt.focus();//如果提交过一次快捷留言,HaveUp就设置为true//每次重新进入页面,HaveUp就会被初始化。window.top.HaveUp = true;//这是博客园提交留言用的方法,通过这里正是提交留言。//如果没有登录就直接在客户端调用这个方法,内部会抛个错。(博客园代码问题,没有判空)PostComment();}else {//目前博客园功能上约束只有登录后才能提交留言。//如果找不到tbCommentBody元素,可以认为当前用户没有登录。alert("使用博客园留言功能需要先登录哦!");}
}//推荐
jMsg.prototype.recommend = function() {var diggit = jMsg.getElementsByClassName('diggit');if ((diggit) && (diggit[0])) {diggit[0].onclick();}else {alert("Debug:推荐按钮的ClassName改名了!");}
}//反对
jMsg.prototype.combat = function() {var buryitMsg = function() {//目前博客园推荐和反对都是不记名的,被反对了当然希望知道原因啦。//这个功能只能做到防君子不防小人,仅仅是给了个提示而已。 var txt = document.getElementById('tbCommentBody');if (txt != null) {alert('这枚同学,非常希望能听到您的宝贵意见,请赐教...');txt.style.backgroundColor = "#fe9ab3";txt.focus();}}var buryit = jMsg.getElementsByClassName('buryit');if ((buryit) && (buryit[0])) {jMsg.addEvent(buryit[0], "click", buryitMsg);}
}//提交留言的同时推荐
jMsg.prototype.superPost = function(msg) {this.post(msg);this.recommend();
}//附加onload事件
jMsg.loadEvent = function(fn) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = fn;} else {window.onload = function() {oldonload();fn();}}
}//附加事件
jMsg.addEvent = function(obj, type, fn) {if (obj.addEventListener)obj.addEventListener(type, fn, true);else if (obj.attachEvent) {obj.attachEvent("on" + type, function() {fn();});}
}//通过ClassName找到DOM元素
jMsg.getElementsByClassName = function(n) {var el = [],_el = document.getElementsByTagName('*');for (var i = 0; i < _el.length; i++) {if (_el[i].className == n) {el[el.length] = _el[i];}}return el;
}//快捷留言的浮动导航条
jMsg.msgDIV = function() {//是否出现浮动条。if (!(window.location.href.indexOf(".html") > -1)) return;//动态计算浮动滚动条的位置lastScrollY = 0;var beat = function() {var diffY;if (document.documentElement && document.documentElement.scrollTop)diffY = document.documentElement.scrollTop;else if (document.body)diffY = document.body.scrollTopelse{ /*Netscape stuff*/ }percent = .1 * (diffY - lastScrollY);if (percent > 0) percent = Math.ceil(percent);else percent = Math.floor(percent);document.getElementById("msgDiv").style.top = parseInt(document.getElementById("msgDiv").style.top) + percent + "px";lastScrollY = lastScrollY + percent;}msgDivCode = "<div id=\"msgDiv\" style='z-index:2010; right:2px; top:400px; position:absolute;'><strong><span style=\"color: red; font-size: 10pt;\">[快捷留言:点击下面链接后会直接提交留言信息。]</span></strong><br /><img src=\"http://images.cnblogs.com/cnblogs_com/justinw/24983/o_hel.gif\" /><a οnclick=\"$jMsg.superPost('好贴!我顶你!');return false;\" href=\"###\"><span style=\"font-size: 30pt;\">我要顶!</span></a> <a οnclick=\"$jMsg.superPost('好贴!路过!');return false;\" href=\"###\"><span style=\"font-size: 18pt;\">路过</span></a></div>";document.write(msgDivCode);window.setInterval(beat, 120);
}
//--end--jMsg---
//todo:提供设置是否显示浮动条的接口
//todo:提供自定义浮动条图片的接口
//todo:提供完全自定义浮动条内容的接口
//todo:提供浮动条以外的交互模式接口
var $jMsg = new jMsg();
$jMsg.setup();
Update:201003301250->为维护博客园的推荐排名机制的公平有效和世界和平,特将superPost方法修正为不默认自动推荐文章,而是弹出提示框询问用户“是否要同时推荐该篇文章”,原来的[路过]链接改为使用post方法提交,只提交快捷留言信息,不会自动推荐:
jMsg.prototype.superPost = function(msg) {this.post(msg);//这里增加询问功能,不支持自动直接推荐if (confirm("您是否要同时推荐该篇文章呢?")) {this.recommend();}
}
Update:201004020225->jMsg.js已经更新到V2版,功能和交换模式都有很大改变,具体参考下图和最新的V2升级版文章。
转载于:https://www.cnblogs.com/justinw/archive/2010/03/30/1700190.html
[JavaScript]只需一行代码,轻松搞定快捷留言功能相关推荐
- [JavaScript]只需一行代码,轻松搞定快捷留言-V2升级版
前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知 ...
- [JavaScript]只需一行代码,轻松搞定快捷留言-V2升级版javascript
评论 2243573 #1楼 回复 引用 查看 文章不错,支持! 2010-04-02 02:52 | 夜雨瞳 #2楼 回复 引用 查看 文章不错,支持! 2010-04-02 07:56 | kea ...
- 手机如何去视频水印?只需几步轻松搞定
手机如何去视频水印?只需几步轻松搞定 很多人对于ps相关的功能有极大的误解,认为必须通过专业的软件才能够实现,而且很多专业的ps软件并不是仅仅拥有一部手机就能够使用的,还需要具备一定配置的电脑. 其实 ...
- 重磅!百度飞桨开源语音基础模型库|中英文语音识别、语音翻译、语音合成、声音分类通通一行代码轻松搞定...
导读 要说生活里最常见的AI应用场景,语音合成与识别当属大家最为耳熟能详的场景之一了. 寻常到平时地图导航的播报.微信语音转文字.手机语音输入,以及小度智能音箱,都离不开语音技术的加持. 语音技术到底 ...
- 一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题? 百度源代码如下: <!Doctype html& ...
- php导航代码在线编辑器,只需一行代码,轻松实现一个在线编辑器
在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离.作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑 ...
- java request 克隆_Java 复制HttpServletRequest InputStream的方法 只需2步轻松搞定
你可能很疑惑,为什么request对象中的InputStream或者Reader只能使用一次? 原理很简单,可以把流比喻成水,request里面的inputStream就好比杯子中的水.试问杯子中的水 ...
- 抽奖随机滚动_手把手教你制作EXCEL抽奖器,只需两步轻松搞定
[例一]利用CHOOSE函数和RANDBETWEEN函数进行抽奖设置.如下图: 目的:在B列随机生成1-50的随机整数,取号码末尾数值,对应奖品,当末尾数值大于5时,为空奖. 操作: 第一步:在B2单 ...
- html 简繁文件转换器,几行代码轻松搞定网页的简繁转换
几行代码轻松搞定网页的简繁转换以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 对网页进行简繁字体转换的方法一般有两种 ...
最新文章
- 离散蚁群算法实例(求解旅行商问题)
- java使用:: 表达式_Java 13:切换表达式的增强功能
- 云桌面 瘦终端_云桌面选择云终端还是瘦客户机?
- bzoj 2648: SJY摆棋子2716: [Violet 3]天使玩偶 --kdtree
- 计算机组成原理 第六章 总线
- Android中Activity的启动模式和使用场景
- 感受McAfee.Secure.Internet.Gateway
- hacker rank bash
- python程序设计课程设计二级减速器_二级减速器课程设计完整版
- 文件夹自定义重命名的步骤
- 洛谷 P1192 台阶问题
- 计算机信息心得体会作文50字,考试感想作文50字5篇
- 远程桌面计算机用户名,远程桌面设置及使用
- 几道和「黑洞照片」那种海量数据有关的算法问题
- Android使用Startup和Lifecycle打造一个单独的测试module
- 手机个人征信查询攻略
- python生成html报告
- 普通高中计算机装备标准,普通高中教育技术装备标准Ⅰ.doc
- 世界顶级的程序员大佬都有谁?
- 动态内存与静态内存的区别