亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JavaScript 輕松搞定快捷留言功能 只需一行代碼

 更新時間:2010年04月01日 00:53:01   作者:  
快捷留言功能,就是您現(xiàn)在看到在右側(cè)浮動的那個小玩意,通過它可以直接提交留言并推薦,您想在博客里加上這個功能嗎?
別急,方法非常簡單,還是先聽我說說它的來歷吧...

最開始,快捷留言這個功能要追溯到發(fā)表[AjaxControlToolkitTests自動測試框架完全解析之一:架構(gòu)篇]這篇文章的時候,當(dāng)時它純粹是那篇文章的副產(chǎn)品,本來沒太在意,本想只是給像我一樣的懶人準(zhǔn)備的一條捷徑而已,后來因?yàn)闆]有提示這個功能會直接自動提交留言,還引起了幾枚同學(xué)的不滿意,于是后來又在醒目位置加上了提示:[提示:快捷鏈接會直接推薦并提交留言信息。],才平息了局勢;

再后來,有部分同學(xué)可能是鼠標(biāo)太高級,連擊速度特別快的原因,每次使用我的快捷留言功能都會把五個(我要頂,路過,期待下一篇,太棒了,我要推薦)快捷鏈接都全部點(diǎn)一遍才過癮,本來嘛,我放那么多快捷鏈接是希望給大家多提供幾種選擇,本意是不希望您每個都點(diǎn)一遍的,結(jié)果本來是出于為懶人提供的懶工具,卻讓人突然變勤勞了,實(shí)在是罪過。大家都這么勤勞,我可受不起,留言搞得跟聊天室刷屏一樣,究其根本,還是原來的程序?qū)懙锰唵?,沒有考慮細(xì)節(jié),于是現(xiàn)在只留下了兩個快捷鏈接,并且在程序上加了限制,這樣就不至于會刷屏了。

再再后來,就是最近幾天,我發(fā)現(xiàn)快捷留言的功能被越來越多的人加到了自己的博客里,昨天看到這篇文章(here)更是幾乎原封不動地白盒拷貝了我的快捷留言功能的代碼。這些應(yīng)用讓我重新思考快捷留言這個小功能的定位,客觀地說,這個功能其實(shí)是對博客園現(xiàn)有留言功能的一個很好的擴(kuò)展!那么,與其讓人反復(fù)地去重新制作輪子,為啥不提供一個公共的擴(kuò)展給大家直接使用呢?
基于以上歷史原因,經(jīng)過幾個小時的努力,新版的通用快捷留言功能誕生了!這個版本的目標(biāo)就是做到簡單通用,其他博客園的博主只需簡單的引用就可以直接在自己的博客里添加快捷留言功能了!目前該功能定為v1.0bate版,還有一些特性待完善,未來版本會提供更多的用戶自定義設(shè)置功能,有什么新的想法也會逐步加進(jìn)去,所以如果您希望未來能夠自動升級新版本,就直接引用我這里的文件即可,所有使用這個腳本的用戶都會同時同步更新。
其實(shí)用法真的很簡單,只需要在[后臺管理]->[設(shè)置]->[頁首Html代碼]的文本框里,填入下面這句話就行了。
復(fù)制代碼 代碼如下:

//放在[后臺管理]->[設(shè)置]->[頁首Html代碼]的文本框里
<script language="javascript" type="text/javascript" src="http://files.cnblogs.com/justinw/jMsg.js"></script>

具體如下圖所示:

這里就是整個通用快捷留言功能的源代碼了,時間很短,代碼沒有經(jīng)過嚴(yán)格的測試,所以也請大家先實(shí)際使用測試一下,歡迎您批評指正!代碼都很簡單,我也加了很多注釋,這里就不再累述了,有問題直接留言就行了。
復(fù)制代碼 代碼如下:

//作者:Justin
//版權(quán):轉(zhuǎn)載請保留出處即可。
//版本:V1.0 beta
//最后更新:201003300330
//備注:如有問題,可以優(yōu)先到 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標(biāo)志位,來防止反復(fù)提交相同留言。
if (window.top.HaveUp) {
alert('您已經(jīng)頂過了!謝謝朋友 :)');
return;
}

var txt = document.getElementById('tbCommentBody');
if (txt != null) {
txt.style.backgroundColor = "#E4F5FF";
var date = new Date();
txt.value = msg;
txt.focus();
//如果提交過一次快捷留言,HaveUp就設(shè)置為true
//每次重新進(jìn)入頁面,HaveUp就會被初始化。
window.top.HaveUp = true;
//這是博客園提交留言用的方法,通過這里正是提交留言。
//如果沒有登錄就直接在客戶端調(diào)用這個方法,內(nèi)部會拋個錯。(博客園代碼問題,沒有判空)
PostComment();
}
else {
//目前博客園功能上約束只有登錄后才能提交留言。
//如果找不到tbCommentBody元素,可以認(rèn)為當(dāng)前用戶沒有登錄。
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() {
//目前博客園推薦和反對都是不記名的,被反對了當(dāng)然希望知道原因啦。
//這個功能只能做到防君子不防小人,僅僅是給了個提示而已。
var txt = document.getElementById('tbCommentBody');
if (txt != null) {
alert('這枚同學(xué),非常希望能聽到您的寶貴意見,請賜教...');
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;
}

//快捷留言的浮動導(dǎo)航條
jMsg.msgDIV = function() {
//是否出現(xiàn)浮動條。
if (!(window.location.href.indexOf(".html") > -1)) return;

//動態(tài)計(jì)算浮動滾動條的位置
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;
}

msgDivCode = "<div id=\"msgDiv\" style='z-index:2010; right:2px; top:400px; position:absolute;'><strong><span style=\"color: red; font-size: 10pt;\">[快捷留言:點(diǎn)擊下面鏈接后會直接提交留言信息。]</span></strong><br /><img src=\"/upload/2010-4/20100401005300831.gif\" /><a onclick=\"$jMsg.superPost('好貼!我頂你!');return false;\" href=\"###\"><span style=\"font-size: 30pt;\">我要頂!</span></a>&nbsp;<a onclick=\"$jMsg.superPost('好貼!路過!');return false;\" href=\"###\"><span style=\"font-size: 18pt;\">路過</span></a></div>";
document.write(msgDivCode);

window.setInterval(beat, 120);
}
//--end--jMsg---
//todo:提供設(shè)置是否顯示浮動條的接口
//todo:提供自定義浮動條圖片的接口
//todo:提供完全自定義浮動條內(nèi)容的接口
//todo:提供浮動條以外的交互模式接口
var $jMsg = new jMsg();
$jMsg.setup();

Update:201003301250->為維護(hù)博客園的推薦排名機(jī)制的公平有效和世界和平,特將superPost方法修正為不默認(rèn)自動推薦文章,而是彈出提示框詢問用戶“是否要同時推薦該篇文章”,原來的[路過]鏈接改為使用post方法提交,只提交快捷留言信息,不會自動推薦:

復(fù)制代碼 代碼如下:

jMsg.prototype.superPost = function(msg) {
this.post(msg);
//這里增加詢問功能,不支持自動直接推薦
if (confirm("您是否要同時推薦該篇文章呢?")) {
this.recommend();
}
}

作者:Justin

相關(guān)文章

  • Javascript 自適應(yīng)高度的Tab選項(xiàng)卡

    Javascript 自適應(yīng)高度的Tab選項(xiàng)卡

    選項(xiàng)卡的原理其實(shí)比較簡單,就是設(shè)置2種狀態(tài),選中和未選中的2中不同CSS狀態(tài),因此也有直接不用JS之用css就能實(shí)現(xiàn)的效果
    2011-04-04
  • 淺談移動端之js touch事件 手勢滑動事件

    淺談移動端之js touch事件 手勢滑動事件

    這篇文章主要和大家聊一聊移動端之js touch事件,即手指的滑動事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • 24個解決實(shí)際問題的ES6代碼片段(小結(jié))

    24個解決實(shí)際問題的ES6代碼片段(小結(jié))

    這篇文章主要介紹了24個解決實(shí)際問題的ES6代碼片段,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • JavaScript era庫的使用詳解

    JavaScript era庫的使用詳解

    這篇本文主要給大家介紹了JavaScript era庫的使用,使用 ora 這個 JavaScript 庫可以在命令行應(yīng)用程序中提供漂亮的加載狀態(tài)提示,本文詳細(xì)介紹如何使用該庫,并結(jié)合多個例子演示其功能,需要的朋友可以參考下
    2024-02-02
  • JavaScript進(jìn)階(四)原型與原型鏈用法實(shí)例分析

    JavaScript進(jìn)階(四)原型與原型鏈用法實(shí)例分析

    這篇文章主要介紹了JavaScript原型與原型鏈,結(jié)合實(shí)例形式分析了JavaScript原型與原型鏈基本概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
    2020-05-05
  • Promise中的then鏈機(jī)制用法詳解

    Promise中的then鏈機(jī)制用法詳解

    這篇文章給大家詳細(xì)介紹了Promise中的then鏈機(jī)制用法,每一次 .then都會返回一個新的promise實(shí)例,文中通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)

    JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法總結(jié)

    這篇文章主要給大家介紹了關(guān)于JavaScript中l(wèi)ayer關(guān)閉指定彈出窗口方法的相關(guān)資料,layer是layui的一個彈出層組件,但是可以作為獨(dú)立組件使用,需要的朋友可以參考下
    2023-10-10
  • ES6使用 const 聲明過程詳解

    ES6使用 const 聲明過程詳解

    這篇文章主要介紹了ES6使用 const 聲明,本文給大家介紹的非常詳細(xì)對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-08-08
  • js實(shí)現(xiàn)上下左右彈框劃出效果

    js實(shí)現(xiàn)上下左右彈框劃出效果

    本文主要介紹js實(shí)現(xiàn)上下左右彈框劃出效果的實(shí)例,具有很好的參考價(jià)值。下面跟著小編一起來看下吧
    2017-03-03
  • window.parent調(diào)用父框架時 ie跟火狐不兼容問題

    window.parent調(diào)用父框架時 ie跟火狐不兼容問題

    window.parent調(diào)用父框架時,ie跟火狐不兼容問題!
    2009-07-07

最新評論