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 现在微信的功能众所周知,用户量.影响力也是惊人,很多应用接入微信的功能已成为一种不可缺 ...
随机推荐
- eventfd
#include <sys/eventfd.h> int eventfd(unsigned int initval, int flags); eventfd() creates an &q ...
- hdu 3367 Pseudoforest(并查集)
题意:有一种叫作Pseudoforest的结构,表示在无向图上,每一个块中选取至多包含一个环的边的集合,又称“伪森林”.问这个集合中的所有边权之和最大是多少? 分析:如果没有环,那么构造的就是最大生成 ...
- df 命令
linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1.命令格式: df [选项] [文件] 2.命 ...
- 【Mac系统 + Mysql】之安装Mysql数据库
安装Mysql步骤: 一.下载 参考文章<mac 安装MySQL> 到Mysql官网下载.dmg格式的文件 先放弃了,看下面的简易安装. 二.使用homebrew安装MySQL(推荐) 如 ...
- 【JMeter4.0学习(七)】之配置元素
目录 CSV Data Set Config HTTP Cookie管理器 HTTP信息头管理器 JDBC Connection Configuration 用户定义的变量 计数器 一.CSV Dat ...
- 09 nginx Rewrite(重写)详细解析
一:Rewrite(重写)详细解析 rewrite 重写 重写中用到的指令 if (条件) {} 设定条件,再进行重写 set #设置变量 return #返回状态码 break #跳出rewri ...
- python基础-------python2.7教程学习【廖雪峰版】(二)
2017年6月7日14:59:27任务: 看完python基础1.计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文 ...
- [学英语]vocabulary.com你都可以怎么用
vocabulary.com你都可以怎么用? 核心就是背单词. 1.利用纯英文环境熟悉单词,看看他们是如何解释单词的. 2.对于大段的文章,可以提炼出你需要背的单词. 3.以游戏的方式来背单词,app ...
- 九度OJ 1355:扑克牌顺子 (模拟)
时间限制:2 秒 内存限制:32 兆 特殊判题:否 提交:1676 解决:484 题目描述: LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^). ...
- 九度OJ 1252:回文子串 (字符串处理、DP)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:387 解决:224 题目描述: 输入一个字符串,输出该字符串中对称的子字符串的最大长度. 比如输入字符串"google" ...