首页>>Jquery文字>>简单的社交按钮分享(2019-03-01)

简单的社交按钮分享

简单的社交按钮分享
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="container">  
  2.   <div class="row">  
  3.     <div class="col-md-12"> <h1jQuery da-share: Social Share Buttons  
  4.       </h1>  
  5.       <br>  
  6.       <h2>Easy Mode:</h2>  
  7.       <br>  
  8.       <div class="da-share-html da-fb da-vk da-tw da-ok da-pi da-gp"></div>  
  9.       <br>  
  10.       <pre><code><div class="da-share-html da-fb da-vk da-tw da-ok da-gp"></div></code></pre>  
  11.       <br>  
  12.       <br>  
  13.       <div class="da-share-html da-vk da-ok"></div>  
  14.       <br>  
  15.       <pre><code><div class="da-share-html da-vk da-ok"></div></code></pre>  
  16.       <br>  
  17.       <br>  
  18.       <h2>Hard Mode:</h2>  
  19.       <br>  
  20.       <a href="#" onClick="da_share.fb();" class="text-nowrap">Share on Facebook</a> | <a href="#" onClick="da_share.tw();"  class="text-nowrap">Tweat This</a> | <a href="#" onClick="da_share.gp();"  class="text-nowrap">Share on Google Plus</a> <br>  
  21.       <br>  
  22.       <pre><code><a href="#" onclick="da_share.fb();">Share on Facebook</a> |  
  23. <a href="#" onclick="da_share.tw();">Tweat This</a> |  
  24. <a href="#" onclick="da_share.gp();">Share on Google Plus</a></code></pre>  
  25.     </div>  
  26.   </div>  
  27. </div>  

 

JavaScript Code
  1. jQuery(function ($) {  
  2.   
  3.     // FUCKING AWESOME CODE  
  4.   
  5.     window.da_share = {  
  6.         fb: function (url) {  
  7.             if (event) event.preventDefault();  
  8.             url = url || window.location.href;  
  9.             var link = 'https://www.facebook.com/share.php?u=';  
  10.             link += encodeURI(url);  
  11.             da_share.popup(encodeURI(link));  
  12.         },  
  13.         vk: function (url, title, description, image) {  
  14.             if (event) event.preventDefault();  
  15.             url = url || window.location.href;  
  16.             var link = 'https://vk.com/share.php?url=' + encodeURI(url);  
  17.             if (title) link += '&title=' + title;  
  18.             if (description) link += '&description=' + description;  
  19.             if (image) link += '&image=' + image;  
  20.             da_share.popup(encodeURI(link));  
  21.         },  
  22.         tw: function (url, text, hashtags, via) {  
  23.             if (event) event.preventDefault();  
  24.             url = url || window.location.href;  
  25.             var link = 'https://twitter.com/intent/tweet?url=';  
  26.             link += encodeURI(url);  
  27.             if (text) link += '&text=' + text;  
  28.             if (hashtags) link += '&hashtags=' + hashtags;  
  29.             if (via) link += '&via=' + via;  
  30.             da_share.popup(encodeURI(link));  
  31.         },  
  32.         ok: function (url, title, image) {  
  33.             if (event) event.preventDefault();  
  34.             url = url || window.location.href;  
  35.             var link = 'https://connect.ok.ru/offer?url=' + encodeURI(url);  
  36.             if (title) link += '&title=' + title;  
  37.             if (image) link += '&imageUrl=' + image;  
  38.             da_share.popup(encodeURI(link));  
  39.         },  
  40.         gp: function (url) {  
  41.             if (event) event.preventDefault();  
  42.             url = url || window.location.href;  
  43.             var link = 'https://plus.google.com/share?url=' + encodeURI(url);  
  44.             da_share.popup(encodeURI(link));  
  45.         },  
  46.         pi: function (url, description, image) {  
  47.             if (event) event.preventDefault();  
  48.             url = url || window.location.href;  
  49.             var link = 'https://www.pinterest.com/pin/create/button/?url=' + encodeURI(url);  
  50.             if (description) link += '&description=' + description;  
  51.             if (image) link += '&media=' + image;  
  52.             da_share.popup(encodeURI(link));  
  53.         },  
  54.         popup: function(link) {  
  55.             //console.log({'link': link});  
  56.             window.open(link,'_blank','toolbar=0,status=0,width=626,height=436');  
  57.         }  
  58.     };  
  59.   
  60.     // STUPID HTML TEMPLATE  
  61.   
  62.     var da_share_elements = $('.da-share-html');  
  63.   
  64.     da_share_elements.each(function(index){  
  65.   
  66.         var da_share_html = "<div class='btn-group'>";  
  67.   
  68.         if ( da_share_elements.eq(index).hasClass('da-fb') ) {  
  69.             da_share_html += "<a class='btn btn-lg px-2 text-white' style='background:#3b5998;' onclick='da_share.fb()'><i class='fa fa-facebook-square fa-fw fa-lg my-1'></i></a>";  
  70.         }  
  71.         if ( da_share_elements.eq(index).hasClass('da-vk') ) {  
  72.             da_share_html += "<a class='btn btn-lg px-2 text-white' style='background:#0976b4' onclick='da_share.vk()'><i class='fa fa-lg fa-vk fa-fw my-1'></i></a>";  
  73.         }  
  74.         if ( da_share_elements.eq(index).hasClass('da-tw') ) {  
  75.             da_share_html += "<a class='btn btn-lg px-2 text-white' style='background:#55acee' onclick='da_share.tw()'><i class='fa fa-twitter fa-fw fa-lg my-1'></i></a>";  
  76.         }  
  77.         if ( da_share_elements.eq(index).hasClass('da-ok') ) {  
  78.             da_share_html += "<a class='btn btn-lg px-2 text-white' style='background:#ed812b' onclick='da_share.ok()'><i class='fa fa-odnoklassniki fa-fw fa-lg my-1'></i></a>";  
  79.         }  
  80.         if ( da_share_elements.eq(index).hasClass('da-pi') ) {  
  81.             da_share_html += "<a class='btn btn-lg px-2 text-white' style='background:#E60019' onclick='da_share.pi()'><i class='fa fa-fw fa-lg fa-pinterest my-1'></i></a>";  
  82.         }  
  83.         if ( da_share_elements.eq(index).hasClass('da-gp') ) {  
  84.             da_share_html += "<a class='btn btn-lg px-2 text-white' style='background:#cc2127' onclick='da_share.gp()'><i class='fa fa-fw fa-lg fa-google-plus-circle my-1'></i></a>";  
  85.         }  
  86.   
  87.         da_share_html += "</div>";  
  88.   
  89.         da_share_elements.eq(index).html(da_share_html);  
  90.   
  91.     });  
  92.   
  93. });  

 


原文地址:http://www.freejs.net/article_jquerywenzi_730.html