CSS3分享功能
[代码][CSS]代码  
$.fn.share = function(opts) {
  var $body, $head;
  if ($(this).length === 0) {
    console.log("Share Button: No elements found.");
    return;
  }
  $head = $('head');
  $body = $('body');
  return $(this).each(function(i, el) {
    var $sharer, bubble, bubbles, click_link, close, config, open, parent, paths, protocol, set_opt, toggle,
      _this = this;
    $sharer = $(this);
    $sharer.addClass("sharer-" + i);
    $sharer.hide();
    if (opts == null) {
      opts = {};
    }
    config = {};
    config.url = opts.url || window.location.href;
    config.text = opts.text || $('meta[name=description]').attr('content') || '';
    config.app_id = opts.app_id;
    config.title = opts.title;
    config.image = opts.image;
    config.flyout = opts.flyout || 'top center';
    config.button_color = opts.color || '#333';
    config.button_background = opts.background || '#e1e1e1';
    config.button_icon = opts.icon || 'export';
    config.button_text = typeof opts.button_text === 'string' ? opts.button_text : 'Share';
    set_opt = function(base, ext) {
      if (opts[base]) {
        return opts[base][ext] || config[ext];
      } else {
        return config[ext];
      }
    };
    config.twitter_url = set_opt('twitter', 'url');
    config.twitter_text = set_opt('twitter', 'text');
    config.fb_url = set_opt('facebook', 'url');
    config.fb_title = set_opt('facebook', 'title');
    config.fb_caption = set_opt('facebook', 'caption');
    config.fb_text = set_opt('facebook', 'text');
    config.fb_image = set_opt('facebook', 'image');
    config.gplus_url = set_opt('gplus', 'url');
    config.selector = "." + ($sharer.attr('class').split(" ").join("."));
    config.twitter_text = encodeURIComponent(config.twitter_text);
    if (typeof config.app_id === 'integer') {
      config.app_id = config.app_id.toString();
    }
    if (!$('link[href="http://weloveiconfonts.com/api/?family=entypo"]').length) {
      $("<link />").attr({
        rel: "stylesheet",
        href: "http://weloveiconfonts.com/api/?family=entypo"
      }).appendTo($("head"));
    }
    if (!$('link[href="http://fonts.googleapis.com/css?family=Lato:900"]').length) {
      $("<link />").attr({
        rel: "stylesheet",
        href: "http://fonts.googleapis.com/css?family=Lato:900"
      }).appendTo($("head"));
    }http://www.huiyi8.com/yanjiangzhici/
    if (!$("meta[name='sharer" + config.selector + "']").length) {
      $('head').append(getStyles(config)).append("<meta name='sharer" + config.selector + "'>");
    }演讲致辞
    $(this).html("<label class='entypo-" + config.button_icon + "'><span>" + config.button_text + "</span></label><div class='social " + config.flyout + "'><ul><li class='entypo-twitter' data-network='twitter'></li><li class='entypo-facebook' data-network='facebook'></li><li class='entypo-gplus' data-network='gplus'></li></ul></div>");
    if (!window.FB && config.app_id && ($('#fb-root').length === 0)) {
      protocol = ['http', 'https'].indexOf(window.location.href.split(':')[0]) === -1 ? 'https://' : '//';
      $body.append("<div id='fb-root'></div><script>(function(a,b,c){var d,e=a.getElementsByTagName(b)[0];a.getElementById(c)||(d=a.createElement(b),d.id=c,d.src='" + protocol + "connect.facebook.net/en_US/all.js#xfbml=1&appId=" + config.app_id + "',e.parentNode.insertBefore(d,e))})(document,'script','facebook-jssdk');</script>");
    }
    paths = {
      twitter: "http://twitter.com/intent/tweet?text=" + config.twitter_text + "&url=" + config.twitter_url,
      facebook: "https://www.facebook.com/sharer/sharer.php?u=" + config.fb_url,
      gplus: "https://plus.google.com/share?url=" + config.gplus_url
    };
    parent = $sharer.parent();
    bubbles = parent.find(".social");
    bubble = parent.find("" + config.selector + " .social");
    toggle = function(e) {
      e.stopPropagation();
      return bubble.toggleClass('active');
    };
    open = function() {
      return bubble.addClass('active');
    };
    close = function() {
      return bubble.removeClass('active');
    };
    click_link = function() {
      var link, popup;
      link = paths[$(this).data('network')];
      if (($(this).data('network') === 'facebook') && config.app_id) {
        if (!window.FB) {
          console.log("The Facebook JS SDK hasn't loaded yet.");
          return;
        }
        window.FB.ui({
          method: 'feed',
          name: config.fb_title,
          link: config.fb_url,
          picture: config.fb_image,
          caption: config.fb_caption,
          description: config.fb_text
        });
      } else {
        popup = {
          width: 500,
          height: 350
        };
        popup.top = (screen.height / 2) - (popup.height / 2);
        popup.left = (screen.width / 2) - (popup.width / 2);
        window.open(link, 'targetWindow', "toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,left=" + popup.left + ",top=" + popup.top + ",width=" + popup.width + ",height=" + popup.height);
      }
      return false;
    };
    $sharer.find('label').on('click', toggle);
    $sharer.find('li').on('click', click_link);
    $body.on('click', function() {
      return bubbles.removeClass('active');
    });
    setTimeout((function() {
      return $sharer.show();
    }), 250);
    return {
      toggle: toggle.bind(this),
      open: open.bind(this),
      close: close.bind(this),
      options: config,
      self: this
    };
  });
};
}.call(this)
CSS3分享功能的更多相关文章
- 9款经典华丽的CSS3分享按钮
		
如果你经常活跃在一些社交网站上,那么你肯定会看到过很多形式各异的分享按钮,目前由于HTML5和CSS3的普及,很多分享按钮也都应用了CSS3样式,甚至会有很多带有动画的CSS3分享按钮.本文就向大家介 ...
 - iOS快速集成友盟社会化分享功能(v6.1.1)
		
1. U-Share SDK集成 1.1 下载U-Share SDK 通过iOS社会化组件选择所需的社交平台后进行下载,下载链接http://dev.umeng.com/social/ios/sdk ...
 - Android中使用ShareSDK集成分享功能
		
引言 现在APP开发集成分享功能已经是非常普遍的需求了.其他集成分享技术我没有使用过,今天我就来介绍下使用ShareSDK来进行分享功能开发的一些基本步骤和注意点,帮助朋友们避免一些坑.好了 ...
 - 微信分享ios设备没有分享图标安卓有分享图标 (分享功能没有问题)
		
解决方案:去除 var sharedata = { title: $("#shareTitle").val(), desc: $("#shareContent" ...
 - 第三方登录分享功能-ShareSDK for iOS适配问题记录
		
最近app里需要添加第三方授权登陆和分享的功能,选择了ShareSDK,参考了ShareSDK文档对该SDK进行了适配,但遇到了一些问题 1.问题:分享功能点击不跳转 原因:适配iOS9添加白名单 ...
 - Web 项目中分享到微博、QQ空间等分享功能
		
Web 项目中分享到微博.QQ空间等分享功能 网上有很多的模板以及代码,但是有很多都不能分享内容,简单的测试了下: 以新浪微博为例,文本框中的内容是title属性,下面的链接是url属性,如果你的链接 ...
 - android一键分享功能不使用任何第三方sdk
		
在android中有自带的一键分享功能,不过它会把所有带分享的应用都找出来,如果我们只需要一些常见的分享应用,该如何做呢? 下面看我的效果图(横屏和竖屏自动适配): 接下来看我的调用(支持图片和文字分 ...
 - QQ空间分享功能(二)
		
http://sns.z.qq.com/tools/share/demo_html.jsp 手机QQ空间分享功能接入指引: 1.请求地址: http://sns.z.qq.com/share 2.请 ...
 - AndroidStudio用微信官方方法接入微信分享功能
		
转载请注明出处:http://www.cnblogs.com/wangoublog/p/5367950.html 现在微信的功能众所周知,用户量.影响力也是惊人,很多应用接入微信的功能已成为一种不可缺 ...
 
随机推荐
- 详细的obs操作教程(windows/mac)图解
			
直播推流软件obs操作配置教程包含支持mac和windows配置 1 2 3 4 5 6 7 8 9
 - vmstat   命令
			
vmstat是Virtual Meomory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行深 ...
 - Yii2实用基础学习笔记(二):Html助手和Request组件 [ 2.0 版本 ]
			
Html助手 1 .在@app\views\test的index.php中: <?php //引入命名空间 use yii\helpers\Html; ?> <?php //[一]表 ...
 - 输入值/表单提交参数过滤有效防止sql注入的方法
			
输入值/表单提交参数过滤,防止sql注入或非法攻击的方法: 代码如下: /** * 过滤sql与php文件操作的关键字 * @param string $string * @return strin ...
 - iOS 富文本类库RTLabel
			
本文转载至 http://blog.csdn.net/duxinfeng2010/article/details/9004749 本节关于RTLable基本介绍,原文来自 https://git ...
 - 【BZOJ4804】欧拉心算 莫比乌斯反演+线性筛
			
[BZOJ4804]欧拉心算 Description 给出一个数字N Input 第一行为一个正整数T,表示数据组数. 接下来T行为询问,每行包含一个正整数N. T<=5000,N<=10 ...
 - centos7 PXE自动安装环境搭建
			
原理: 要进行自动安装的主机A,加电启动时以网卡为第一启动设备 1.启动时会向网络广播,找到dhcp服务器B请求分配IP地址信息,服务器B除了给其分配基本的IP信息(ip.netmask.getewa ...
 - 算法调参  weight_ratio, weight_seqratio
			
from openpyxl import Workbook import xlrd import time import Levenshtein as Le target_city_list = [' ...
 - On the importance of initialization and momentum in deep learning
			
Ilya Sutskever1 ilyasu@google.com James Martens jmartens@cs.toronto.edu George Dahl gdahl@cs.toronto ...
 - PAT 1062. 最简分数(20)
			
一个分数一般写成两个整数相除的形式:N/M,其中M不为0.最简分数是指分子和分母没有公约数的分数表示形式. 现给定两个不相等的正分数 N1/M1 和 N2/M2,要求你按从小到大的顺序列出它们之间分母 ...