JavaScript Line code, easy to handle floating Express message-v2 upgrade version _javascript tips

Source: Internet
Author: User

The day before yesterday I made a piece of paper [a line of code easy to handle the express message function], At the same time the release of the V1.0beta version of the Quick Message function and source code, the reason is beta, is the feeling although the basic skills can have, but not perfect, the characteristics are not necessarily reasonable, today unknowingly got to this time, the last version made a great improvement:
First of all, the original automatically submitted message information at the same time will automatically recommend, a large number of recommendations, directly affect the blog park recommended ranking mechanism, so later in the first time to change to ask whether to recommend the interactive mode!
Second, although the quick function has, and very good, but full screen of "good stickers!" I'll do you! "There is indeed some aesthetic fatigue, and there is no practical significance, the message or to be able to produce interactive only value, so V2 this version of the focus on interactive mode to improve the original form, the new version of the message is equivalent to the original Blog Park message box and recommended are floating up to show the right side of the screen vertically centered position, The goal is to make it easy for users to express messages.
Finally, the new version of the Quick Message function for the previous version of the user fully support the transparent upgrade, that is, the original use of the previous version of the users, now their blog to see should already be the latest version of the interface and features! Let's go over it again. The use of jmsg is exactly the same as before:
In fact, the usage is really very simple, only in the [admin]->[set]->[page first HTML code] text box, fill in the following sentence on the line:

Copy Code code as follows:

In a text box [background admin]->[set]->[page first HTML code]
<script language= "javascript" type= "Text/javascript" src= "Http://files.cnblogs.com/justinw/jMsg.js" ></ Script>

As shown in the following illustration:

The new version jmsg specific function details, the above figure has been described in detail, is not tired, the following is a new version of the source code, there are many functional features to be perfected, such as the interface effect can be beautified, now only provides the most minimalist style, whether it is code or functional design, are welcome to criticize correct. The organization of the Code as compared to the previous version has changed a lot, the last version of the source code here can be obtained.
The new source code is as follows:
Copy Code code as follows:

Author: Justin
Source: http://justinw.cnblogs.com/
Copyright: Reprint, please keep the source.
Version: V2.0
Last Updated: 201004020037
Note: If there is a problem, you can give priority to http://www.cnblogs.com/justinw/archive/2010/03/30/1700190.html message questions.
Update:
1.v2 has made great improvement on the basis of V1beta, and the interaction mode and function rationality have been improved in essence.

--begin--jmsg---
Jmsg = function () {
var chkrecomend = false;
}

Jmsg.prototype = {
Initialization action
Initialize:function () {
Jmsg.loadevent (This.combat);
This.msgdiv ();
},
Dispose:function () {
Todosomething ...
},
Submit Message
Post:function (msg) {
This is done by judging Haveup flag bits to prevent repeated submissions of the same message.
if (window.top.HaveUp) {
Alert (' You've already topped it! Thank you friend:);
return false;
}
if (Msg.trim (). Length = = 0) {
Alert (' Why do you have to leave a word? ');
return false;
}
else if (Msg.trim (). length > 1000) {
Alert (' This classmate, the express message supports up to 1000 characters! ');
return false;
}

var txt = document.getElementById (' tbcommentbody ');
if (txt!= null) {
Txt.style.backgroundColor = "#E4F5FF";
var date = new Date ();
Txt.value = msg;
Txt.focus ();
Haveup is set to true if a quick message is submitted
Each time you re-enter the page, the Haveup is initialized.
Window.top.HaveUp = true;
This is the blog to submit a message in the way, through here is the submission of messages.
If you call this method directly on the client without logging on, the interior throws a mistake. (Blog yard code problem, no null sentence)
var rlt = postcomment ();
This.setmsgtext ("");
return true;
}
else {
At present, the function of the blog park only after login to submit a message.
If the tbcommentbody element is not found, you can assume that the current user is not logged on.
Alert ("Use Blog Park message function need to log in first!") ");
return false;
}
},
Recommended
Recommend:function () {
var diggit = jmsg.getelementsbyclassname (' diggit ');
if ((diggit) && (Diggit[0])) {
Diggit[0].onclick ();
}
else {
Alert ("Debug: ClassName the recommended button is renamed!") ");
}
},
Against
Combat:function () {
var buryitmsg = function () {
At present, Blog Park recommendations and objections are anonymous, is opposed to the course want to know why.
This function can only do to prevent a gentleman from the villain, just give a hint.
var txt = document.getElementById (' tbcommentbody ');
if (txt!= null) {
Alert (' This classmate, very much hope to hear your valuable advice, please enlighten ... ');
Txt.style.backgroundColor = "#fe9ab3";
Txt.focus ();
}
}
var buryit = jmsg.getelementsbyclassname (' Buryit ');
if ((Buryit) && (Buryit[0])) {
Jmsg.addevent (Buryit[0], "click", Buryitmsg);
}
},
Submit a message while recommending
Superpost:function (msg) {
if (This.post (msg)) {
The query function is added here, the automatic direct recommendation is not supported
if (this.chkrecomend) {
This.recommend ();
}
else {
if (confirm), do you want to recommend the article at the same time? ")) {
This.recommend ();
}
}
}
},
Floating navigation bar for express messages
Msgdiv:function () {
Whether a floating bar appears.
if (!) ( Window.location.href.indexOf (". html") >-1) return;

Dynamically calculate the position of a floating scroll bar
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=\" use express message, want to say! \ "style=\" border-color:navy;background-color:transparent;width:265px;height:100px\ "> Article Good, support!" </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=\ "Submit \" style=\ "width:80px\"/> ";
_html + = "<a ID =\" passby\ "onclick=\" $JMSG. Setmsgtext (' passing ... '); return false;\ "href=\" ###\ "> Pass </a>";
_html + = "<input name=\" chkjmsg\ "type=\" checkbox\ "onclick=\" $JMSG. Setchkrecomend (this.checked); \ "/> Recommended </ TD&GT;&LT;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;
}
}

Additional onload Event
Jmsg.loadevent = function (fn) {
var oldonload = window.onload;
if (typeof window.onload!= ' function ') {
Window.onload = fn;
} else {
Window.onload = function () {
Oldonload ();
FN ();
}
}
}

Attached events
jmsg.addevent = function (obj, type, fn) {
if (Obj.addeventlistener)
Obj.addeventlistener (Type, FN, true);
else if (obj.attachevent) {
Obj.attachevent ("On" + Type, function () {
FN ();
});
}
}

Finding DOM elements by classname
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: Provides an interface for setting whether to display a floating bar
TODO: interfaces that provide full custom floating bar content
TODO: provides an interactive mode interface other than floating
var $jMsg = new Jmsg ();
$jMsg. Initialize ();

Author: Justin
Source: http://justinw.cnblogs.com/
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.