JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版


Posted in Javascript onApril 02, 2010

JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理,今天不知不觉又弄到了这个时候,这次对上一版做了很大改进:
首先,原来自动提交留言信息的同时会自动推荐,大量的推荐数,直接影响了博客园的推荐排名机制,所以后来在第一时间修改成了询问是否要推荐的交互模式!
其次,虽然快捷功能有了,并且很好用,但是满屏幕的“好贴!我顶你!”也确实有些审美疲劳了,并且没什么实际意义,留言还是要能产生互动才有价值,所以V2这版重点在交互模式上改进原有的形式,新版快捷留言相当于把博客园原有的留言框和推荐都浮动起来显示在屏幕右侧垂直居中的位置,目的就是让使用者可以非常方便地快捷留言。
最后,新版快捷留言功能对上一版的使用者完全支持透明升级,也就是说原来使用上一版的用户,现在自己的博客里看到的应该已经是最新版本的界面和功能了!这里再重新说一遍jMsg的使用方法,跟以前完全一样:
其实用法真的很简单,只需要在[后台管理]->[设置]->[页首Html代码]的文本框里,填入下面这句话就行了:

//放在[后台管理]->[设置]->[页首Html代码]的文本框里 
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/justinw/jMsg.js"></script>

具体如下图所示:
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
新版jMsg具体的功能细节,上图中已经描述很详细了,就不在累述,下面是新版的源代码,同样还有很多功能特性待完善,比如界面效果可以再美化一下,现在只提供了最简约的风格,不论是代码还是功能设计,都欢迎您批评指正。代码的组织形式同上一版比有了很大改动,上一版的源代码在这里可以获得。
新版的源代码如下:
//作者:Justin 
//出处:http://justinw.cnblogs.com/ 
//版权:转载请保留出处即可。 
//版本:V2.0 
//最后更新:201004020037 
//备注:如有问题,可以优先到 http://www.cnblogs.com/justinw/archive/2010/03/30/1700190.html 留言提问。 
//更新: 
//1.v2在V1beta的基础上做了很大改进,交互模式和功能合理性都有本质提高。 //--begin--jMsg--- 
jMsg = function() { 
var chkRecomend = false; 
} 
jMsg.prototype = { 
//初始化动作 
initialize: function() { 
jMsg.loadEvent(this.combat); 
this.msgDIV(); 
}, 
dispose: function() { 
//todoSomething... 
}, 
//提交留言信息 
post: function(msg) { 
//这里通过判断HaveUp标志位,来防止反复提交相同留言。 
if (window.top.HaveUp) { 
alert('您已经顶过了!谢谢朋友 :)'); 
return false; 
} 
if (msg.trim().length == 0) { 
alert('怎么也得留一个字吧!'); 
return false; 
} 
else if (msg.trim().length > 1000) { 
alert('这枚同学,快捷留言最多支持1000个字符!'); 
return false; 
} 
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; 
//这是博客园提交留言用的方法,通过这里正是提交留言。 
//如果没有登录就直接在客户端调用这个方法,内部会抛个错。(博客园代码问题,没有判空) 
var rlt = PostComment(); 
this.setMsgText(""); 
return true; 
} 
else { 
//目前博客园功能上约束只有登录后才能提交留言。 
//如果找不到tbCommentBody元素,可以认为当前用户没有登录。 
alert("使用博客园留言功能需要先登录哦!"); 
return false; 
} 
}, 
//推荐 
recommend: function() { 
var diggit = jMsg.getElementsByClassName('diggit'); 
if ((diggit) && (diggit[0])) { 
diggit[0].onclick(); 
} 
else { 
alert("Debug:推荐按钮的ClassName改名了!"); 
} 
}, 
//反对 
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); 
} 
}, 
//提交留言的同时推荐 
superPost: function(msg) { 
if (this.post(msg)) { 
//这里增加询问功能,不支持自动直接推荐 
if (this.chkRecomend) { 
this.recommend(); 
} 
else { 
if (confirm("您是否要同时推荐该篇文章呢?")) { 
this.recommend(); 
} 
} 
} 
}, 
//快捷留言的浮动导航条 
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.scrollTop 
else 
{ /*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; 
} 
document.write(this.getMsgBoxHTML()); 
window.setInterval(beat, 120); 
}, 
getMsgBoxHTML: function() { 
var _HTML = ""; 
_HTML += "<div id=\"msgDiv\" style=\"width:265px;z-index:2010; right:15px; top:400px; position:absolute;\">"; 
_HTML += "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"; 
_HTML += "<tbody>"; 
_HTML += "<tr><td colspan=\"2\"><textarea id=\"jmsg\" title=\"使用快捷留言,想说就说!\" style=\"border-color:navy;background-color:transparent;width:265px;height:100px\">文章不错,支持!</textarea></td></tr>"; 
_HTML += "<tr><td style=\"width:200px\"><input title=\"Alt+Enter\" name=\"postjMsg\" type=\"submit\"onclick=\"$jMsg.superPost($jMsg.getMsgText());return false;\" value=\"提交\" style=\"width:80px\"/>"; 
_HTML += " <a id =\"passBy\" onclick=\"$jMsg.setMsgText('路过...');return false;\" href=\"###\">路过</a> "; 
_HTML += "<input name=\"chkjMsg\" type=\"checkbox\" onclick=\"$jMsg.setChkRecomend(this.checked);\"/>推荐</td><td style=\"font-size:small;text-align:right;vertical-align:top\">2010©<a href=\"http://justinw.cnblogs.com\" target=\"_blank\">Justin</a></td></tr>"; 
_HTML += "</tbody></table>"; 
_HTML += "</div>"; 
return _HTML; 
}, 
setMsgText: function(txt) { 
var area = document.getElementById("jmsg"); 
area.value = txt; 
}, 
getMsgText: function() { 
var area = document.getElementById("jmsg"); 
return area.value; 
}, 
setChkRecomend: function(val) { 
this.chkRecomend = val; 
} 
} 
//附加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; 
} 
String.prototype.trim = function() { 
return this.replace(/(^\s*)|(\s*$)/g, ""); 
} 
//--end--jMsg--- 
//todo:提供设置是否显示浮动条的接口 
//todo:提供完全自定义浮动条内容的接口 
//todo:提供浮动以外的交互模式接口 
var $jMsg = new jMsg(); 
$jMsg.initialize();

作者:Justin
出处:http://justinw.cnblogs.com/
Javascript 相关文章推荐
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
京东优选小程序的实现代码示例
Feb 25 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
js 刷新页面的代码小结 推荐
Apr 02 #Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 #Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 #Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 #Javascript
初试jQuery EasyUI 使用介绍
Apr 01 #Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 #Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
Python中random模块用法实例分析
2015/05/19 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Python应用库大全总结
2018/05/30 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
详解python中*号的用法
2019/10/21 Python
关于python中的xpath解析定位
2020/03/06 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
工程师岗位职责
2013/11/08 职场文书
销售经理工作职责
2014/02/03 职场文书
教师党员一句话承诺
2014/03/28 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python
Django中celery的使用项目实例
2022/07/07 Python