Using asp.net mvc+bootstrap to build personal blog Praise.js point praise Special effects Plug-ins (ii) _ Practical skills

In the previous article, we introduced the use of ASP.net mvc and Bootstrap rapid build responsive personal blog station (i). Next to introduce if you do a little praise Plug-ins, together through this article to learn!

1. Why do you want to do this point praise plugin?

Praise.js is a compact jquery point-praise plug-in, easy to use, beautiful effect.

In doing personal blog when encountered the article point praise problem. Lenovo to the major social networks in the point of the special effects: gesture amplification, heart enlargement, etc., is very cool and dazzling. But there is no ready to use plug-ins, so they intend to do a similar point to praise Plug-ins, put on their favorite point of praise icon. PS: The icon of the station from Ali Mother's that Iconfont, we can go there to find their favorite icon. The last blog describes the site's brief situation: to see?

First look at the effect chart: You can also go directly to the blog station www.zynblog.com experience A

Note: (Blog address: www.zynblog.com, using asp.net MVC + bootstrap build)

2. Plug-in Source

Praise.js:

Extended object Point-and-click Plug-ins, point-praise effects ***////***zynblog**////***2016-5-11**////*** usage: jQuery ('. praisebtn '). Praise (options); ***//;  (function ($) {$.fn.praise = function (options) {var defaults = {Obj:null,//JQ object, using this Tipsbox function for which object str: "+1", String, the content to display, or a section of HTML startsize: "10px",//The text size of the start of the animation endsize: "30px",//animation end Text Size interval:600,//Text animation time interval col
 Or: "Red",//Text color callback:function () {}//callback function}; 
 var opt = $.extend (defaults, options);
 $ ("Body"). Append ("<span class= ' num ' >" + opt.str + "</span>");
 var box = $ (". Num"); 
 var left = Opt.obj.offset ()-left + opt.obj.width ()/2;
 var top = Opt.obj.offset (). Top-opt.obj.height (); Box.css ({"position": "Absolute", "left": Left + "px", "top": Top + "px", "z-index": 9999, "font-size": Opt.star
 Tsize, "line-height": opt.endsize, "Color": Opt.color}); Box.animate ({"Font-size": opt.endsize, "opacity": "0", "Top": Top-parseint (opt.endsize) + "px"}, Opt.interval,
function () {box.remove ();  Opt.callback ();
 });
}) (JQuery);
 The dot-hop icon restores its original function Nicein (prop) {Prop.find ('. Praisenum '). addclass (' Nicein '). CSS ("Color", "red");
 settimeout (function () {Prop.find ('. Praisenum '). CSS ("Color", "#45BCF9"). Removeclass (' Nicein ');
}, 1000); };

3. How to use:

Introduce Jquery.js, prase.js in a page that needs to be a point-praising plug-in, and then register the Click event with "Praisebtn" in $ (function () {}).

Html:

<span class= "praisebtn" > 
 (<a href= "#" praise-flag= "0" data-id= "7" >2</a>)

JQuery: (This site does not force visitors to sign up after registration to point praise, so do not limit the number of visitors to the point of praise)

Point Praise Special effects +ajax Statistics dot praise number Pariseshow:function () {///Use custom Point-and-click Effect Plug-ins, before zynblog.js to introduce this plugin//jquery to the temporarily not generated tag binding event to use on (' event ', ' object ', '
  Event handle ') JQuery (document). On ("click", ". Praisebtn", function (e) {e.preventdefault (); Get the point of the article ID praise-flag:0 not saved, 1: praised the//page just generated, you can determine from the library whether the user is the point of praise, and for the Praise-flag attribute assigned initial//here is not necessary so rigorous, so the initial value is 1, (
  The most is a token in the cookie again) var Praiseflag = JQuery (this). Children (' a '). attr (' Praise-flag ');
  alert (Praiseflag);
  var Praiseartid = JQuery (this). Children (' a '). attr (' Data-id ');
  alert (Praiseartid); 1.
  If you haven't praised if (Praiseflag = 0) {var curpraise = JQuery (this). Children (' a '); Curpraise.attr (' Praise-flag ', "1"); Set the attribute value of the mark to 1 jQuery (this). Praise ({obj:jquery (this), str: "+1", callback : function () {jquery.post ("/archives/praisestatic", {"ArtID": Praiseartid}, function (data) {if (data).
    Status = = 1 {var praisecount = parseint (Curpraise.text (). Match (/\d+/));
    Curpraise.text (Curpraise.text (). replace (Praisecount, Praisecount + 1)); else if(Data. Status = = 2) {alert (data.
    message); else if (data. Status = = 0) {alert (data.
    message);
   }
   });
  }
  });
  Nicein (JQuery (this));
  else if (Praiseflag = 1) {//2. If already praised JQuery ("body"). Append ("<span class= ' Praisetip ' > You have praised ~</span>");
  var tipbox = JQuery (". Praisetip");
  var left = JQuery (this). Offset (). Left;
  var top = JQuery (this). Offset (). Top + jquery (this). Height (); Tipbox.css ({"position": "Absolute", "left": Left + "px", "top": Top + "px", "z-index": 9999, "font-size":
  "12px", "Line-height": "13px", "Color": "Red"});
  Tipbox.animate ({"opacity": "0"}, 1200, function () {tipbox.remove ();
  });
 }
 });  },

Praise.js Source Download: jquery.praise.js

The above is a small series to introduce the use of ASP.net mvc+bootstrap build personal blog praise.js point praise Special effects Plug-ins (ii), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!