jQuery划词分享插件ContentShare

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery划词分享插件ContentShare 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery划词分享插件ContentShare</title>
    <link rel="stylesheet" type="text/css" href="css/main-style.css" />
    <link rel="stylesheet" type="text/css" href="css/tooltipster.min.css" />
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato:300,400,700|Port+Lligat+Slab|Alegreya+SC:700|Montserrat" />
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
    <script src="js/contentshare.js"></script>
</head>
<body>
    <div class="header-container">
        <header>
            <h1>
                ContentShare Demo<span>
                    A jQuery Plugin which
                    lets you Share what you Like
                </span>
            </h1>
        </header>
    </div>

    <div class="main container clearfix mr_top_20x">
        <h3>Intro</h3>
        <p>
            ContentShare is a jQuery plugin which lets you share the
            exact content on a page which you actually want to
            share. It enables you to share sections of text on your
            social network rather the default text specified in the <code>
                &lt;meta&gt;
            </code> tags. By default, it supports Facebook and
            Twitter but you can add more networks easily.
        </p>
    </div>
    <div class="main container demo clearfix">
        <h3>
            Demo
            <span>
                - Select some Content you Like
            </span>
        </h3>
        <p>
            Compzets.com is India&#39;s first open source software and
            freeware publishing site, Download and Upload Open
            source software and Freeware relevant to the Paid ones
            for PC,Mac and Linux.
        </p>
        <p>
            It also makes its own Cloud Applications for making
            tasks easy. Recently it has launched a new Plugin
            Showcase too.
        </p>
    </div>
</body>
</html>

JS代码(contentshare.js):

/* * @build:24 Aug,2013 * @author:Ram swaroop * @company:Compzets.com */
(function($){
	$.fn.contentshare = function(options){
	// fetch options var opts = $.extend({
}
,$.fn.contentshare.defaults,options);
	$.extend($.fn.contentshare,{
	init:function(shareable){
	$.fn.contentshare.defaults.shareable = shareable;
}
,getContent:function(){
	var content="";
	for(var i=0;
	i<opts.shareLinks.length;
	i++){
	content+='<a href="'+opts.shareLinks[i]+this.getSelection()+'" '+((opts.newTab)?"target=\"_blank\"":"")+'><img src="'+opts.shareIcons[i]+'" '+((i!=0)?"style=\"margin-left:5px\"":"")+'/></a>';
}
return content;
}
,getSelection:function(option){
	if(window.getSelection){
	return (option=='string')?encodeURIComponent($.trim(window.getSelection().getRangeAt(0).toString())):window.getSelection().getRangeAt(0);
}
else if(document.selection){
	return (option=='string')?encodeURIComponent($.trim(document.selection.createRange().text())):document.selection.createRange();
}
}
,showTooltip:function(){
	this.clear();
	if(this.getSelection('string').length < opts.minLength) return;
	var range = this.getSelection();
	var newNode = document.createElement("mark");
	range.surroundContents(newNode);
	$('mark').addClass(opts.className);
	$('.'+opts.className).tooltipster({
	trigger:'custom',interactive:true,content:this.getContent()}
);
	$('.'+opts.className).tooltipster('show');
}
,clear:function(){
	$('.'+opts.className).tooltipster('hide');
	$('mark').contents().unwrap();
	$('mark').remove();
}
}
);
	// initialize the awesome plugin $.fn.contentshare.init(this);
}
;
	// default options $.fn.contentshare.defaults ={
	shareable:{
}
,shareIcons:["img/fb.png","img/tw.png"],shareLinks:["http://www.facebook.com/sharer.php?s=100&p[url]="+document.URL+"&p[title]="+document.title+"&p[summary]=","http://twitter.com/intent/tweet?text="],minLength:5,newTab:true,className:"contentshare"}
;
}
(jQuery));
	// calling the plugin on DOM ready$(document).ready(function(){
	$("p").contentshare();
	$.fn.contentshare.defaults.shareable.on('mouseup',function(){
	$.fn.contentshare.showTooltip();
}
);
}
);

CSS代码(main-style.css):

/* Main Style */
body,html{font-size:15px;padding:0;margin:0;outline:none;overflow-x:hidden}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
body{font-family:'Lato',Calibri,Arial,sans-serif;color:#89867e;background:#fff;}
::-moz-selection{color:#13ACD9;}
::selection{color:#13ACD9;}
a{color:#333;text-decoration:none;}
.main,.header-container > header{width:100%;margin:0 auto}
.main{max-width:50em;min-height:10em}
.header-container > header{text-align:center;font-size:16px;padding:4em 2em 3em 0;background:#13ACD9}
.header-container > header h1{font-size:2.625em;line-height:1.3;margin:0;font-weight:700;color:#fff}
.header-container > header span{display:block;font-size:60%;color:#A6EDFF;padding:0 0 0.6em 0.1em;font-weight:300;}
.container{font-family:'Montserrat',sans-serif;font-size:20px;line-height:1.8}
.container > h3{font-family:'Alegreya SC',serif;font-size:42px;}
.container > h3 > span{font-family:'Lato',Calibri,Arial,sans-serif;font-weight:normal;font-size:18px;display:block}
.demo > p{font-family:'Port Lligat Slab',serif;font-size:30px;line-height:normal}
/*For Tables*/
table{width:100%;border-collapse:collapse}
tr:nth-child(odd){background:#ecfafd}
td{padding:2em}
td pre{color:#13ACD9}
/*Helper css*/
.mr_top_20x{margin-top:20px}
.btn{padding:10px;border:3px solid #89867e;background-color:transparent;color:#89867e;font-weight:700;text-transform:uppercase;display:inline-block}
.btn:hover{color:#89867e;border-style:dashed;cursor:pointer}
.btn:active{border-style:dotted}
.social-buttons{padding:10px 40px 10px 50px;background-color:#F4F5F7;display:inline-block}
.w30{width:30%}
.w50{width:50%}
.w60{width:60%}
.w70{width:70%}
.fl{float:left}
.fr{float:right}
.ac{text-align:center}
.al{text-align:left}
.vl-mid{vertical-align:middle}
.disp_inl{display:inline}
.disp_inl_blk{display:inline-block}
/* For Responsiveness */
@media (min-width:32.5em) and (max-width:61.250em){[id^="section-"] .content-wrapper{font-size:1.2em}
[id^="section-"] .content-wrapper>pre{display:block}
.demo-btn{position:relative}
.easing-buttons,.download-buttons{margin-top:0}
.fr{float:none}
.w30,.w60,.w70{width:100%}
}
@media (min-width:32.5em) and (max-width:38.688em){.header-container>header{font-size:75%}
.container > h3{font-size:22px}
*,p,.demo > p,div{font-size:15px}
}
@media (max-width:32.438em){.header-container>header{font-size:75%}
.container > h3{font-size:11px}
*,p,.demo > p,div{font-size:14px}
}
@media screen and (max-width:25em){.header-container>header{font-size:75%}
.container > h3{font-size:19px}
*,p,.demo > p,div{font-size:13px}
}

附件:下载该文件资源,减少时间成本(增值服务)