Thứ Hai, 17 tháng 6, 2013

Script hộp văn bản Cookie cực ấn tượng.


Đoạn mã javascript tạo một hộp ghi chú bên phải website giúp người truy cập có thể soạn văn bản và lưu vào đó. Script sử dụng Cookie thông minh để lưu văn bản lâu dài cho những lần truy cập sau.


<style type='text/css'>
#noty-box,#noty-box h2,#noty-box p,#noty-box div,#noty-box ul,#noty-box li,#noty-box strong,#noty-box em,#noty-box small,#noty-box textarea,#noty-box a,#noty-box article,#noty-box footer,#noty-box header{background-attachment:scroll;background-color:transparent;background-image:none;background-position:0 0;background-repeat:repeat;border-style:none;border-width:medium;bottom:auto;clear:none;color:inherit;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:inherit;display:inline;float:none;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:normal;font-weight:inherit;height:auto;left:auto;letter-spacing:normal;line-height:inherit;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;outline:invert none medium;overflow:visible;padding:0;position:static;right:auto;table-layout:auto;text-align:inherit;text-decoration:inherit;text-indent:0;text-transform:none;top:auto;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;width:auto;word-spacing:normal;z-index:auto;border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}#noty-box,#noty-box p,#noty-box div,#noty-box h2,#noty-box ul,#noty-box li,#noty-box textarea,#noty-box article,#noty-box footer,#noty-box header{display:block;}#noty-box strong{font-weight:bold;}#noty-box em{font-style:italic;}#noty-box a,#noty-box a *{cursor:pointer;}#noty-box a:hover{text-decoration:underline;}#noty-box li:before,#noty-box li:after{content:"";content:none;}#noty-box{background:#ccc;background:-moz-linear-gradient(left center,#bbb,#ccc);background:-webkit-gradient(linear,left top,right top,from(#bbb),to(#ccc));color:#000;direction:ltr;font-family:"Times New Roman",serif;font-size:12px;font-style:normal;font-weight:normal;line-height:1.2;opacity:.75;overflow:auto;padding:10px 10px 30px;position:fixed;right:0;text-align:left;text-decoration:none;top:25px;width:200px;border-radius:10px 0 0 10px;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;box-shadow:-2px 1px 5px #333;-moz-box-shadow:-2px 1px 5px #333;-webkit-box-shadow:-2px 1px 5px #333;-webkit-transition:right .5s ease-in-out,opacity .5s ease;-moz-transition:right .5s ease-in-out,opacity .5s ease;}#noty-box:hover,#noty-box.editmode{opacity:.98;}#noty-box.closed{opacity:.50;right:-195px;}#noty-box p{margin:6px;}#noty-box a{color:#666;}#noty-box h2{color:#333;font-size:14px;font-weight:bold;margin:0 0 6px;text-align:center;}#noty-box small{display:block;padding:20px 4px;text-align:center;}#noty-box article{background:#eee;border:1px solid #aaa;font-size:12px;margin:4px 0;padding:0;position:relative;}#noty-box article.editmode{background:#fff;border:1px solid #333;}#noty-box article footer{display:none;margin:0 2px 0 4px;position:absolute;right:4px;top:-8px;}#noty-box article footer a,#noty-box article footer a:hover{background:#669;color:#eee;margin:2px;opacity:.95;padding:1px 4px;text-decoration:none;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;}#noty-box article:hover footer{display:block;}#noty-box.editmode article footer{display:none;}#noty-box footer{display:block;font-size:12px;text-align:right;}#noty-box textarea{background:#fff;border:none;}#noty-box .toggle,#noty-box .toggle:active,#noty-box .toggle:hover{font-size:24px;left:8px;outline:none;position:absolute;text-decoration:none;top:0;}#noty-box .sharemenu{display:none;list-style:none;position:absolute;right:48px;text-align:center;top:16px;z-index:200;}#noty-box .sharemenu a{background:#669;color:#eee;display:block;}
</style>

<script type='text/javascript'>
//<![CDATA[
(function(d,w){if(w.opera){return}var options={enableNoty:true,pageIdentifier:d.title,defaultClosed:true,enableSharing:true,enableShortLinks:false,proxyScript:"/notyproxy.php",enableTwitter:false,enableGoto:true},lang={mainHeader:"<h2><img src=\"http://2.bp.blogspot.com/-6gvkKAaqkvc/T_GrOFGpu-I/AAAAAAAAIr8/eLqB3803YvM/s1600/address+book-code1k.com.png\" alt=\"\" /> HỘP GHI CHÚ</h2>",helpText:"Đây là nơi để bạn lưu trữ<br>những văn bản ghi chú lâu dài.",toggleText:"",notePlaceholder:"Ghi chú: ",addLink:"<img src=\"http://1.bp.blogspot.com/-stDtYwTqtWE/T_GrNln1PAI/AAAAAAAAIr4/uxhAcyS8bRc/s1600/add-code1k.com.png\" alt=\"\" /> Thêm ghi chú",addText:"",editLink:"sửa",editText:"",deleteLink:"x",deleteText:"",jumpLink:"goto",jumpText:"Scroll to Source",shareLink:"Gửi",shareText:"",emailLink:"Email",emailText:"",emailSubject:"Code saved From Code1k.com",tweetLink:"",tweetText:""},notybox,notyfooter,notytoggle,notyhelp,notyshare,notypage,notydata=[],init=function(){var closed,header,opt;if("object"===typeof notyOptions){for(opt in notyOptions){if(notyOptions.hasOwnProperty(opt)){options[opt]=notyOptions[opt]}}}if(!options.enableNoty){return}if("object"===typeof notyLang){for(opt in notyLang){if(notyLang.hasOwnProperty(opt)){lang[opt]=notyLang[opt]}}}options.proxyScript+=(options.proxyScript.indexOf("?")!==-1)?"&":"?";notypage=options.pageIdentifier;closed=noteStorage.get("isclosed");d.createElement("article");d.createElement("section");d.createElement("header");d.createElement("footer");d.createElement("mark");notybox=d.createElement("section");notybox.setAttribute("id","noty-box");header=d.createElement("header");header.innerHTML=lang.mainHeader;notybox.appendChild(header);notyhelp=d.createElement("small");notyhelp.innerHTML=lang.helpText;header.appendChild(notyhelp);notyfooter=d.createElement("footer");notybox.appendChild(notyfooter);notytoggle=d.createElement("a");notytoggle.setAttribute("href","#");notytoggle.setAttribute("title",lang.toggleText);notytoggle.className="toggle";notybox.appendChild(notytoggle);if(closed==="true"||("string"!==typeof closed&&options.defaultClosed)){notytoggle.innerHTML="&laquo;";notybox.className="closed"}else{notytoggle.innerHTML="&raquo;"}d.body.appendChild(notybox);setBoxHeight();initEvents();if(options.enableSharing){initSharing()}loadNotes()},initEvents=function(){var newnote=initNewLink();addEvent(newnote,"click",function(e){var target=addNewNote(lang.notePlaceholder),id=notydata.length-1;target=target.getElementsByTagName("div")[0];editNote(target,id);return cancel(e)});addEvent(notytoggle,"click",toggleClose);addEvent(notybox,"dragover",setCopyMode);addEvent(notybox,"dragenter",setCopyMode);addEvent(d,"dragstart",setDragData);addEvent(notybox,"drop",dropData);addEvent(w,"resize",setBoxHeight);addEvent(w,"unload",saveNotes)},initNewLink=function(){var newnote=d.createElement("a");newnote.setAttribute("href","#");newnote.setAttribute("title",lang.addText);newnote.innerHTML=lang.addLink;notyfooter.appendChild(newnote);return newnote},initSharing=function(){var email,twitter,li=d.createElement("li");notyshare=d.createElement("ul");notyshare.className="sharemenu";email=d.createElement("a");email.setAttribute("href","#");email.setAttribute("title",lang.emailText);email.innerHTML=lang.emailLink;addEvent(email,"click",emailNote);li.appendChild(email);notyshare.appendChild(li);if(options.enableTwitter){li=li.cloneNode(false);twitter=d.createElement("a");twitter.setAttribute("href","#");twitter.setAttribute("title",lang.tweetText);twitter.innerHTML=lang.tweetLink;addEvent(twitter,"click",tweetNote);li.appendChild(twitter);notyshare.appendChild(li)}addEvent(d,"mouseup",function(){notyshare.style.display="none"});notybox.appendChild(notyshare)},setBoxHeight=function(){var padding=(notybox.offsetTop*2)+20,height=w.innerHeight-padding;height=(height>=200)?height:200;notybox.style.height=height+"px"},setCopyMode=function(e){e.dataTransfer.dropEffect="copy";return cancel(e)},setDragData=function(e){var sel,data={};sel=getSelectionData();if(sel){data.text=sel.text;data.el=sel.el;data=JSON.stringify(data);e.dataTransfer.setData("Text",data)}},dropData=function(e){var data=e.dataTransfer.getData("Text");try{data=JSON.parse(data)}catch(error){data={text:data}}if(data.text!==""){if(data.el){addNewNote(data.text,data.el)}else{addNewNote(data.text)}}return cancel(e)},toggleClose=function(e){if(notybox.className==="closed"){notybox.className="";notytoggle.innerHTML="&raquo;";noteStorage.set("isclosed",false)}else{notybox.className="closed";notytoggle.innerHTML="&laquo;";noteStorage.set("isclosed",true)}return cancel(e)},deleteNote=function(e){var note=this.parentNode.parentNode,id;if(note){id=getId(note);note.parentNode.removeChild(note);notydata[id]=null;if(!notybox.getElementsByTagName("article").length){notyhelp.style.display="block"}}return cancel(e)},startEditNote=function(e){var note=this.parentNode.nextSibling;if(note){editNote(note)}return cancel(e)},editNote=(function(){if("contentEditable" in d.createElement("span")){return function(target){target.contentEditable=true;target.parentNode.className="editmode";notybox.className="editmode";addEvent(target,"blur",function(e){var id=getId(this.parentNode),el=d.createElement("div");notydata[id].text=this.innerHTML;el.innerHTML=this.innerHTML;this.parentNode.className="";notybox.className="";this.parentNode.replaceChild(el,this);return cancel(e)})}}else{return function(target){var field=d.createElement("textarea");field.value=stripTags(target.innerHTML);field.style.width=target.offsetWidth+"px";field.style.height=target.offsetHeight+"px";target.parentNode.replaceChild(field,target);notybox.className="editmode";field.focus();addEvent(field,"blur",function(e){var id=getId(this.parentNode),newtext=formatStr(this.value);notydata[id].text=newtext;target.innerHTML=newtext;this.parentNode.replaceChild(target,this);notybox.className="";return cancel(e)})}}}()),addNewNote=function(s,origin){var id,data={};s=formatStr(s);data.text=s;if(origin){data.origin=origin}notydata.push(data);id=notydata.length-1;return addNote(s,id,origin)},addNote=function(s,id,origin){if("string"!==typeof s||"number"!==typeof id){return null}var el=d.createElement("article"),content=d.createElement("div"),foot=d.createElement("footer"),share,edit,del,jump,node;if(origin&&d.evaluate&&options.enableGoto){node=d.evaluate(origin,d,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;if(node){jump=d.createElement("a");jump.innerHTML=lang.jumpLink;jump.setAttribute("href","#");jump.setAttribute("title",lang.jumpText);addEvent(jump,"click",function(e){node.scrollIntoView();return cancel(e)});foot.appendChild(jump)}}if(options.enableSharing){share=d.createElement("a");share.innerHTML=lang.shareLink;share.setAttribute("href","#");share.setAttribute("title",lang.shareText);addEvent(share,"click",shareNote);foot.appendChild(share)}edit=d.createElement("a");edit.innerHTML=lang.editLink;edit.setAttribute("href","#");edit.setAttribute("title",lang.editText);addEvent(edit,"click",startEditNote);foot.appendChild(edit);del=d.createElement("a");del.innerHTML=lang.deleteLink;del.setAttribute("href","#");del.setAttribute("title",lang.deleteText);addEvent(del,"click",deleteNote);foot.appendChild(del);content.innerHTML=s;el.appendChild(foot);el.appendChild(content);el.setAttribute("id","noty-"+id);notybox.insertBefore(el,notyfooter);notyhelp.style.display="none";return el},shareNote=function(e){this.parentNode.appendChild(notyshare);notyshare.style.display="block";return cancel(e)},emailNote=function(e){var id=getId(this.parentNode.parentNode.parentNode.parentNode);if(id!==null){if(options.enableShortLinks){getShortLink(function(url){sendEmail(id,url)})}else{sendEmail(id,w.location.href)}}return cancel(e)},sendEmail=function(id,url){var msg='"'+stripTags(notydata[id].text)+'"',req="mailto:?subject="+lang.emailSubject+d.title+"&body="+encodeURIComponent(msg+" "+url);w.location=req},tweetNote=function(e){var id=getId(this.parentNode.parentNode.parentNode.parentNode);if(id!==null){if(options.enableShortLinks){getShortLink(function(url){sendTweet(id,url)})}else{sendTweet(id,w.location.href)}}return cancel(e)},sendTweet=function(id,url){var msg='"'+truncate(notydata[id].text,137-url.length)+'"',req="http://twitter.com/home?status="+encodeURIComponent(msg+" "+url);w.open(req)},getShortLink=function(cb){if("function"!==typeof cb){return}var cached,key,req,obj;key="short."+notypage;cached=noteStorage.get(key);if(typeof cached!=="string"){obj=getXMLHttpRequest();if(obj!==null){req=options.proxyScript+"url="+encodeURIComponent(w.location.href);obj.open("GET",req,true);obj.onreadystatechange=function(){if(obj.readyState===4&&obj.status===200){var resp=obj.responseText;if(resp!==""){resp=JSON.parse(resp);if(resp.status_txt==="OK"){noteStorage.set(key,resp.data.url);cb(resp.data.url);return}}cb(w.location.href)}};obj.send(null);return}}cb(cached)},saveNotes=function(){var filtered=[],i,l;for(i=0,l=notydata.length;i<l;i++){if(notydata[i]!==null&&notydata[i].text!==""){filtered.push(notydata[i])}}noteStorage.set("page."+notypage,JSON.stringify(filtered))},loadNotes=function(){var data,i,l;data=noteStorage.get("page."+notypage);if(typeof data==="string"){data=JSON.parse(data);notydata=data||[];if(notydata.length){notyhelp.style.display="none"}for(i=0,l=notydata.length;i<l;i++){addNote(notydata[i].text,i,notydata[i].origin)}}},noteStorage=(function(){if("localStorage" in w&&w.localStorage!==null){return{set:function(key,val){w.localStorage["noty."+key]=val},get:function(key){return w.localStorage["noty."+key]}}}else{return{set:function(key,val){},get:function(key){}}}}()),getSelectionData=function(){var data={},sel,an,fn;if(w.getSelection){sel=w.getSelection();an=sel.anchorNode;if(!an){return null}fn=sel.focusNode;an=(an.nodeType===3)?an.parentNode:an;fn=(fn.nodeType===3)?fn.parentNode:fn;if((an.compareDocumentPosition(fn)&2)===2){an=fn}data.el="/"+getXPath(an).join("/");data.text=sel.toString()}else{if(d.selection){data.el=null;data.text=d.selection.createRange().text}}return data},getXPath=function(node,path){var count,sibling;path=path||[];if(node.parentNode){path=getXPath(node.parentNode,path)}if(node.previousSibling){count=1;sibling=node.previousSibling;do{if(sibling.nodeType===1&&sibling.nodeName===node.nodeName){count++}sibling=sibling.previousSibling}while(sibling);if(count===1){count=null}}else{if(node.nextSibling){sibling=node.nextSibling;do{if(sibling.nodeType===1&&sibling.nodeName===node.nodeName){count=1;sibling=null}else{count=null;sibling=sibling.previousSibling}}while(sibling)}}if(node.nodeType===1){path.push(node.nodeName.toLowerCase()+(node.id?"[@id='"+node.id+"']":count>0?"["+count+"]":""))}return path},getId=function(el){if(!el){return null}return parseInt(el.id.substr(el.id.indexOf("-")+1),10)},cancel=function(e){if(e.preventDefault){e.preventDefault()}return false},truncate=function(str,limit){if("string"!==typeof str){return""}var bits,i;limit=limit-3;str=str.replace(/(<([^>]+)>)/g,"");bits=str.split("");if(bits.length>limit){for(i=bits.length-1;i>-1;--i){if(i>limit){bits.length=i}else{if(" "===bits[i]){bits.length=i;break}}}bits.push("...")}return bits.join("")},formatStr=function(s){if("string"!==typeof s){return"<p></p>"}var e={'"':"&quot;","&":"&amp;","<":"<",">":">"};s=s.replace(/["&<>]/g,function(m){return e[m]});s=s.replace(/\n\n|\r\n\r\n/g,"</p><p>");return"<p>"+s+"</p>"},sanitizeStr=function(s){if("string"!==typeof s){return""}return s.replace(/[\\"']/g,"\\amp;").replace(/\u0000/g,"\\0").replace(/[\r\n]/g,"")},stripTags=function(s){if("string"!==typeof s){return""}s=s.replace(/<\/p><p>/g,"\r\n\r\n");return s.replace(/(<([^>]+)>)/g,"")},getXMLHttpRequest=function(){if(w.XMLHttpRequest){return new XMLHttpRequest()}else{if(w.ActiveXObject){try{return new ActiveXObject("Msxml2.XMLHTTP")}catch(e){try{return new ActiveXObject("Microsoft.XMLHTTP")}catch(e2){return null}}}}return null},addEvent=(function(){if(d.addEventListener){return function(el,type,fn){if(el&&el.nodeName||el===w){el.addEventListener(type,fn,false)}else{if(el&&el.length){var i,l;for(i=0,l=el.length;i<l;i++){addEvent(el[i],type,fn)}}}}}else{return function(el,type,fn){if(el&&el.nodeName||el===w){el.attachEvent("on"+type,function(){return fn.call(el,w.event)})}else{if(el&&el.length){var i,l;for(i=0,l=el.length;i<l;i++){addEvent(el[i],type,fn)}}}}}}()),JSON=w.JSON||{};JSON.stringify=JSON.stringify||function(obj){var t=typeof(obj),v,i,json,arr;if(t!=="object"||obj===null){if(t==="string"){obj='"'+sanitizeStr(obj)+'"'}return String(obj)}else{json=[];arr=(obj&&obj.constructor===Array);for(i in obj){if(obj.hasOwnProperty(i)){v=obj[i];t=typeof(v);if(t==="string"){v='"'+sanitizeStr(v)+'"'}else{if(t==="object"&&v!==null){v=JSON.stringify(v)}}json.push((arr?"":'"'+i+'":')+String(v))}}return(arr?"[":"{")+String(json)+(arr?"]":"}")}};JSON.parse=JSON.parse||function(str){if(str===""){str='""'}eval("var p="+str+";");return p};addEvent(w,"load",init)}(document,window));
//]]>
</script>


Không có nhận xét nào:

Related Posts Plugin for WordPress, Blogger...
BẤM VÀO ẢNH ĐỂ ĐẾN TRANG CẦN XEM.
QUANGHIEN968.
XEM BỘ ẢNH TẠI ĐÂY.
QUANGHIEN968.
XEM BỘ ẢNH TẠI ĐÂY.
QUANGHIEN968.
XEM BỘ ẢNH TẠI ĐÂY.
QUANGHIEN968.
.XEM BỘ ẢNH TẠI ĐÂY.
Blogger Gadgets
Copyright 2010 CODE968.COM

TRANG CHỦ. | ĐỌC BÁO | L.B.V MÁY TÍNH. | NGHE NHẠC. | XEM PHIM. |