jQuery - Selected Text Sharer 實際執行畫面

有時候在寫文章的時候有些專有名詞需要解釋但是在下方做註解又不太方便瀏覽，或者是方便讓使用者來搜尋或分享某一些內容，這個時候 Selected Text Sharer 這一個方便的套件就對你來說很有幫助了，它可以讓你的網頁上一部分的元素可以有另外類似提示視窗的對話泡泡介面，方便解釋內容或者是分享內容等等。

使用方法：
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
//jQuery - Selected Text Sharer 的主程式碼
<script src="jquery.selected-text-sharer.min.js"></script>


第二步 寫一些文章內容
<div class="demo1">內容內容我是內容</div>
<div class="demo2">內容</div>
<textarea class="demo4"></textarea>
<input class="demo4" type="text" />

第三步 加上 JavaScript
$(function(){
    $('.demo1').selectedTextSharer({
        lists:"Twitter,http://twitter.com/home?status=%ts ,favicon|Facebook,http://www.facebook.com/sharer.php?t=%s&u=http://google.com,favicon|Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
extraClass: 'dark',
title: 'Share this text ...',
borderColor: '#00ccff',
hoverColor: '#FFFFCC'
    });
$('.demo2').selectedTextSharer({
        lists:"Add or remove any items. The format for adding a list is Name URL Icon-URL (Spaces indicate comma). Use %s in the search/share URL for the selected term. Also you can use favicon for the Icon URL to automatically detect the icon",
title: 'Change everything you want',
borderColor: '#00ccff',
hoverColor: '#FFFFCC'
    });
$('.demo3').selectedTextSharer({
        lists:"Email,mailto:?subject=Aakash Web  Just another WordPress weblog&body=%s - http://google.com,http://mail.google.com/favicon.ico|Print,http://www.printfriendly.com/print?url=http://google.com,http://www.printfriendly.com/images/printfriendly.ico|Blogger,http://www.blogger.com/blog_this.pyra?t&u=http://google.com&n=Aakash Web  Just another WordPress weblog&pli=1,favicon|Orkut,http://promote.orkut.com/preview?nt=orkut.com&tt=Aakash Web  Just another WordPress weblog&du=http://google.com&cn=%s,http://orkut.com/favicon.ico|Tumblr,http://www.tumblr.com/share?v=3&u=http://google.com&t=Aakash Web  Just another WordPress weblog&s=%s,favicon|LinkedIn,http://www.linkedin.com/shareArticle?mini=true&url=http://google.com&title=Aakash Web  Just another WordPress weblog&source=Aakash+Web+Just+another+WordPress+weblog&summary=%s,favicon|RSS,http://localhost/wordpress/feed/rss/,favicon|Sphinn,http://sphinn.com/index.php?c=post&m=submit&link=http://google.com,favicon|SphereIt,http://www.sphere.com/search?q=sphereit:http://google.com&title=Aakash Web  Just another WordPress weblog,favicon",
truncateChars: "115",
borderColor: "#430070",
background: "#fff",
titleColor: "#f2f2f2",
hoverColor: "#c2f7ff",
textColor: "#000"
    });
$('.demo4').selectedTextSharer({
        lists:"Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
title: 'Search this text ...',
borderColor: '#009900',
hoverColor: '#FFFFCC'
    });
});

附上可修改參數設定

$('Element selector').selectedTextSharer({
 title : 'Share this text ...', // 顯示的小視窗的抬頭
 lists : 'Google, http://www.google.com/search?q=%s, favicon',
        // 分享連結或提示內容 標題,連結,圖示(分享連結格式)
 truncateChars : 115,  // 第幾個字元自動截斷
 extraClass : 'someClass', // 自定義的 Class 名稱
 borderColor : '#444',  // 外框的顏色
 background : '#fff',  // 背景的顏色
 titleColor : '#f2f2f2',  // 標題的顏色
 hoverColor : '#ffffcc',  // 連結滑過的顏色
 textColor : '#000'  // 文字的顏色
});

作者網站：http://www.aakashweb.com/jquery-plugins/selected-text-sharer/
檔案大小：5.87 KB
檔案下載：http://www.aakashweb.com/resources/downloads/jquery.selected-text-sharer.zip
檔案備份：下載