Using ASP.NET MVC+Bootstrap to build a personal blog praise.js likes the special effects plug in of II

In the last article, we introduced the use of ASP. NET MVC and Bootstrap to quickly build a responsive personal blog station (1). Next, I will introduce you to learn from this article if you do a like plug-in.

1. Why do you want to make this praise plug-in?

praise. js is a small jQuery like plug-in, which is easy to use and beautiful.

When I was doing my personal blog, I encountered the problem of praising articles. Associated with the special effects of praise in major social networks: gesture enlargement, red heart enlargement and so on, it is cool and dazzling. But there is no ready-made easy-to-use plug-in, so I plan to make a similar praise plug-in and put my favorite praise icon. PS: The icons of the station are all from the iconfont owned by Ali's mother. You can find your favorite icons there. The last blog post introduced the brief situation of this site: Go and have a look?

Let's take a look at the renderings first: you can also go directly to the blog station www.zynblog.com to experience one

Note: (Blog address: www. zynblog. com, built with ASP. NET MVC + Bootstrap)

2. Plug-in source code

praise. js:

//*** Extend the object to like the plug-in and like the special effects ***//
//***Zynblog**//
//***2016-5-11**//
//*** Usage: jQuery('.praisebtn').praise(options);***//
; (function ($) {
 $.fn.praise = function (options) {
 var defaults = {
  obj: null, //jq Object for which object to use this tipsBox Function 
  str: "+1", // String, what to display ; It can also be transmitted 1 Segment html
  startSize: "10px", // Text size at the beginning of animation 
  endSize: "30px", // Text size at the end of animation 
  interval: 600, // Text animation time interval 
  color: "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.startSize,
  "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);
// Like the icon to restore it as it is 
function niceIn(prop) {
 prop.find('.praisenum').addClass('niceIn').css("color", "red");
 setTimeout(function () {
 prop.find('.praisenum').css("color", "#45BCF9").removeClass('niceIn');
 }, 1000);
};

3. Usage:

Introduce jquery. js, prase. js to the page where the like plug-in needs to be used, and then register the click event for "praisebtn" in $(function () {}).

HTML:

<span class="praisebtn">
 <img src="/Content/images/ico_praise.png" class="praisenum" data-bd-imgshare-binded="1">
  ( <a href="#" praise-flag="0" data-id="7">2</a> ) 
</span> 

jQuery: (This site does not force visitors to register and log in before they can like it, so it does not limit the number of times visitors like it)

// Like special effects +Ajax Count the number of likes 
 pariseShow: function () {
 // Use a custom like special effects plug-in , In zynblog.js This plug-in should be introduced before 
 //jquery To bind events to tags that have not yet been generated, use the on(' Events ',' Object ',' Event handle ')
 jQuery(document).on("click", ".praisebtn", function (e) {
  e.preventDefault();
  // Get the praised article id praise-flag:0 I haven't saved it, 1 : Yes 
  // When the page is first generated, you can determine whether the user likes it from the library, and set the praise-flag Attribute assigns initial value 
  // There is no need to be so rigorous here, so the initial values are all 1 , ( At most, it is again cookie Give a mark in )
  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 it 
  if (praiseFlag == 0) {
  var curPraise = jQuery(this).children('a');
  curPraise.attr('praise-flag', "1");// First, set the attribute value of the like identification 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 you have already praised it 
  jQuery("body").append("<span class='praisetip'> You have praised it ~</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