Use ASP. net mvc + Bootstrap to build a personal blog praise. js likes special effect plug-in (2), mvcpraise. js

Use ASP. net mvc + Bootstrap to build a personal blog praise. js likes special effect plug-in (2), mvcpraise. js

In the previous article, I introduced the use of ASP. net mvc and Bootstrap to quickly build a responsive personal blog site (I ). Next we will introduce you to the thumb ups plug-in. Let's take a look at this article!

1. Why is this thumb up plug-in required?

Praise. js is a small jQuery thumb up plug-in, which is easy to use and elegant.

I encountered a thumbs-up issue during my blog. It's cool and cool to think of the special likes in various social networks: gesture amplification, red-hearted amplification, and so on. However, there is no ready-to-use plug-in, so I plan to build a similar thumb-up plug-in and put my favorite thumb-up icons. PS: The iconfont of alimama comes from the icons of the station. You can find your favorite icons. In the previous blog, I introduced the brief information about this site: Can you check it out?

Let's take a look: You can also go to the blog site www.zynblog.com to try it out.

Note: (blog address: www.zynblog.com, built using ASP. net mvc + Bootstrap)

2. Plug-in source code

Praise. js:

// *** Extension object thumb-up plug-in and special thumb-up effects *** // *** modify blog **////* ** usage: jQuery ('. praisebtn '). praise (options); *** //; (function ($) {$. fn. praise = function (options) {var defaults = {obj: null, // jq object, which object uses this tipsBox function str: "+ 1", // string, the content to be displayed. You can also pass an html startSize: "10px", // The text size endSize starting with the animation: "30px", // The text size after the animation ends with interval: 600, // text animation 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); // click the like icon to restore the original function niceIn (prop) {prop.find('.praisenum').addclass('nicein'}.css ("color", "red "); setTimeout (function () {prop.find('.praisenum'0000.css ("color", "#45BCF9 "). removeClass ('nicin') ;}, 1000 );};

3. Usage:

Introduce jquery. js and prase. js on the page that requires the thumb-up plug-in, and then register the click event for "praisebtn" in $ (function.

HTML:

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

JQuery: (this site does not force visitors to sign up and log on to the site before they can like, so it does not limit the number of visits to likes)

// Likes special effects + Ajax statistics likes number pariseShow: function () {// use the custom likes special effect plug-in the thumb blog. before js, You need to introduce this plug-in // jquery to bind events to ungenerated tags. You must use on ('event', 'object', 'event handler') jQuery (document ). on ("click ",". praisebtn ", function (e) {e. preventDefault (); // get the id of the liked article praise-flag: 0, 1: liked. // when the page was just created, you can determine from the database whether the user likes and assign the initial value to the praise-flag attribute // It is not necessary to be so rigorous, so the initial value is 1, (at most, mark the cookie again.) var praiseFlag = jQuery (this ). children ('A '). attr ('praise-flag'); // alert (praiseFla G); var praiseArtId = jQuery (this ). children ('A '). attr ('data-id'); // alert (praiseArtId); // 1. if you have not liked if (praiseFlag = 0) {var curPraise = jQuery (this ). children ('A'); curPraise. attr ('praise-flag', "1"); // set the attribute value of the like flag to 1 jQuery (this ). praise ({obj: jQuery (this), str: "+ 1", callback: function () {jQuery. post ("/Archives/PraiseStatic", {"artId": praiseArtId}, function (data) {if (data. status = 1) {v Ar 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 liked jQuery ("body "). append ("<span class = 'praisetip '> you have liked 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 ();});}});},

Download praise. js source code: jquery. praise. js

The above section describes the use of ASP. net mvc + Bootstrap build personal blog praise. js likes special effect plug-in (2). I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!