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 相关文章推荐
jquery获取input的value问题说明
Aug 19 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
js数组的操作详解
Mar 27 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
JavaScript经典案例之简易计算器
Aug 24 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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
PHP+javascript液晶时钟
2006/10/09 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
PHP多进程简单实例小结
2019/11/09 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
json简单介绍
2008/06/10 Javascript
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
js实现楼层导航功能
2017/02/23 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
linux下python抓屏实现方法
2015/05/22 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
python绘制条形图方法代码详解
2017/12/19 Python
python设置值及NaN值处理方法
2018/07/03 Python
在Python中COM口的调用方法
2019/07/03 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
区三好学生主要事迹
2014/01/30 职场文书
积极向上的团队口号
2014/06/06 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
期末个人总结范文
2015/02/13 职场文书
交通安全学习心得体会
2016/01/18 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
spring boot实现文件上传
2022/08/14 Java/Android