一個分享按鈕的插件使用介紹（可擴展，內附開發制作流程）_jquery

　　既然要做成插件，那可制定性肯定要強，不能定死，比如不能把顯示個數定死，不能把分享按鈕排序定死等等（不過有些東西還是要定死的，太靈活了也就成不了插件了）。這里我的操作辦法是……先看代碼吧
代碼如下:













我把所有按鈕都用A標記來制作，然后用一個div容器把它們都包在里面，只要在這個容器里，用的是A標記，并且class的名稱是按我的規定來命名的就一切OK，至于顯示數量，排列順序什么的，隨意。
　　HTML制定好規范后，就可以開始寫css樣式了，需要注意的是，為了減少http的請求，按鈕的圖片我是用css sprites拼接在一起了，如

　　同時我也制作了32*32的大圖標版本，當然你也可以制作其他尺寸的，按個人需求來就行。下面是css代碼，沒有太多好介紹的，看下就行。
代碼如下:
.hr-share-16 a{display:block;width:18px;height:16px;background:url(HRico_16x16.png) no-repeat;float:left;cursor:pointer}
.hr-share-16 a:hover{opacity:0.8}
.hr-share-16 a.hr-share-more{background-position:0 0}
.hr-share-16 a.hr-share-tsina{background-position:0 -16px}
.hr-share-16 a.hr-share-tqq{background-position:0 -32px}
.hr-share-16 a.hr-share-qzone{background-position:0 -48px}
.hr-share-16 a.hr-share-renren{background-position:0 -px}
.hr-share-16 a.hr-share-baidu{background-position:0 -80px}
.hr-share-16 a.hr-share-115{background-position:0 -96px}
.hr-share-16 a.hr-share-tsohu{background-position:0 -112px}
.hr-share-16 a.hr-share-taobao{background-position:0 -128px}
.hr-share-16 a.hr-share-xiaoyou{background-position:0 -144px}
.hr-share-16 a.hr-share-hi{background-position:0 -160px}
.hr-share-16 a.hr-share-fanfou{background-position:0 -176px}
.hr-share-16 a.hr-share-sohubai{background-position:0 -192px}
.hr-share-16 a.hr-share-feixin{background-position:0 -208px}
.hr-share-16 a.hr-share-youshi{background-position:0 -224px}
.hr-share-16 a.hr-share-tianya{background-position:0 -240px}
.hr-share-16 a.hr-share-msn{background-position:0 -256px}
.hr-share-16 a.hr-share-douban{background-position:0 -272px}
.hr-share-16 a.hr-share-twangyi{background-position:0 -288px}
.hr-share-16 a.hr-share-mop{background-position:0 -304px}

這里我特地為每個按鈕的樣式加了個.hr-share-16這個前綴，目的一是為了區分出16*16和32*32的圖標樣式，二是為了之后js代碼部分的操作，后面我會講到。
　　做完了上面這兩步，接下來重點就來了，就是JS的編寫，在此之前，我們先把思路理一下，防止在編寫完JS后發現有更好的方法，導致重新編寫。
　　首先，每個網站都有自己特定分享鏈接的代碼，我們隨機拿2個過來參考下，比如最近很火的騰訊微博和新浪微博。
view sourceprint?http://v.t.qq.com/share/share.php?title=分享插件 - jquery.HooRay - jQuery插件 - 制作：胡尐睿丶&url=http://saw.caifutang.com/jquery.hooray/HRshare.html&appkey=118cd1d635c44eab9a4840b2fbf8b0fb
view sourceprint?http://service.weibo.com/share/share.php?title=分享插件 - jquery.HooRay - jQuery插件 - 制作：胡尐睿丶&url=http://saw.caifutang.com/jquery.hooray/HRshare.html&source=bookmark&appkey=2992571369
　　發現沒有？對，就是一般的分享鏈接只需要兩個參數就行，一是頁面的標題，另一個就是頁面的鏈接，至于騰訊微博和新浪微博都需要一個appkey，這個另外再說，如果沒有，直接用我提供的這個就行，因為appkey需要去申請，過程略微有點麻煩。
　　接下來，如果掌握了這個，操作起來就簡單了，我們只需要對每個按鈕綁定一個點擊事件，然后調轉到制定的鏈接，就一切OK了。但是如果手動一個個去綁定，那感覺就很麻煩了，而且如果增加一個新的分享，改動的代碼量似乎也有點大，而且代碼行數也多。所以，綁定按鈕事件我是通過循環綁定的。下面就來看下部分代碼片段吧。
　　首先我定義了這么兩個數組（tab鍵的縮進在這里不起作用了，大家湊合著看吧）：
代碼如下:
var shareico = {
"tqq" :"http://v.t.qq.com/share/share.php?title={title}&url={url}&appkey=118cd1d635c44eab9a4840b2fbf8b0fb",
"tsina" :"http://service.weibo.com/share/share.php?title={title}&url={url}&source=bookmark&appkey=2992571369",
"qzone" :"http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&title={title}",
"renren" :"http://share.renren.com/share/buttonshare.do?link={url}&title={title}",
"baidu" :"http://cang.baidu.com/do/add?it={title}&iu={url}&fr=ien#nw=1",
"115" :"http://sc.115.com/add?url={url}&title={title}",
"tsohu" :"http://t.sohu.com/third/post.jsp?url={url}&title={title}&content=utf-8",
"taobao" :"http://share.jianghu.taobao.com/share/addShare.htm?url={url}",
"xiaoyou" :"http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&url={url}",
"hi" :"http://apps.hi.baidu.com/share/?url={url}&title={title}",
"fanfou" :"http://fanfou.com/sharer?u={url}&t={title}",
"sohubai" :"http://bai.sohu.com/share/blank/add.do?link={url}",
"feixin" :"http://space3.feixin.10086.cn/api/share?title={title}&url={url}",
"youshi" :"http://www.ushi.cn/feedShare/feedShare!sharetomicroblog.jhtml?type=button&loginflag=share&title={title}&url={url}",
"tianya" :"http://share.tianya.cn/openapp/restpage/activity/appendDiv.jsp?app_id=jiathis&ccTitle={title}&ccUrl={url}&jtss=tianya&ccBody=",
"msn" :"http://profile.live.com/P.mvc#!/badge?url={url}&screenshot=",
"douban" :"http://shuo.douban.com/!service/share?image=&href={url}&name={title}",
"twangyi" :"http://t.163.com/article/user/checkLogin.do?source={title}&info={title}+{url}&images=",
"mop" :"http://tk.mop.com/api/post.htm?url={url}&title={title}"
};
var shareiconame = {
"tqq" :"騰訊微博",
"tsina" :"新浪微博",
"qzone" :"QQ空間",
"renren" :"人人網",
"baidu" :"百度收藏",
"115" :"115",
"tsohu" :"搜狐微博",
"taobao" :"淘江湖",
"xiaoyou" :"騰訊朋友",
"hi" :"百度空間",
"fanfou" :"飯否",
"sohubai" :"搜狐白社會",
"feixin" :"飛信",
"tianya" :"天涯社區",
"youshi" :"優士網",
"msn" :"MSN",
"douban" :"豆瓣",
"twangyi" :"網易微博",
"mop" :"貓撲推客"
};

第一個數組很明了，就是每個分享按鈕對應的鏈接地址，我把其中title和url都替換成了{title}和{url}，之后在循環綁定的時候，通過正則去替換掉。第二個數組就是對應各自的中文名稱，用于顯示前臺每個按鈕的title，如：分享到騰訊微博、分享到新浪微博等。
　　因為js沒有數組的概念，所以我就定義了2數組。接下來就是js代碼實現部分了（為了當作教程，我把一些參數直接寫死了，便于大家理解）。
代碼如下:
$("div").addClass("hr-share-16");
var title = document.title;
var url = window.location.href;
function eFunction(str){
return function(){
window.open(formatmodel(shareico[str],{title:title, url:url}));
}
}
for(si in shareico){
$(".hr-share-"+si).die('click').live('click',eFunction(si)).attr("title","分享到"+shareiconame[si]);
}

這里，我首先給最外面那個div容器添加了一個class樣式，就是我上面說到的那個，執行到這句代碼后，你會發現頁面上按鈕的樣式都出來了。
　　接著，我分別通過document.title和window.location.href獲取到了當前頁面的標題和鏈接。然后是一個叫eFunction的方法，這個跳過下，等會說。
　　下面是一個for循環，這里就是實現了循環綁定點擊事件的效果。這里需要注意兩點：一，因為我是寫成插件，所以頁面上可能不止一處用到分享按鈕，為了防止重復事件綁定，所以我在綁定每個事件前都用die去解除綁定；二，我用的是live，而不是bind，因為我擔心可能有的項目里的分享插件是通過ajax在頁面載入完畢之后再載入進來的，所以我綁定就直接用live綁定了。
　　再說下那個eFunction的問題，肯定有人會問為什么不把eFunction里的內容直接寫在live的click事件里。其實我最開始也是這么做的，但不這么做的原因很簡單，我無法把自定義的參數傳進去。至于為什么，我問了下一些JS高人，是個閉包的問題，這個東西我不是很清楚，總之就是找了這么一個辦法來解決了。如果有人能給我具體講解下閉包的問題，我非常感謝。
　　在綁定事件里還有一個formatmodel方法，這個是替換用的，也就是我上面說的，用正則去替換掉{title}和{url}，這個function大家可以參考學習下，能用在很多地方：
代碼如下:
function formatmodel(str,model){
for(var k in model){
var re = new RegExp("{"+k+"}","g");
str = str.replace(re,model[k]);
}
return str;
}

做到這一步，就已經全部OK了。有人會問那個“更多”按鈕的怎么沒說，其實那個和js沒有太大聯系了，只是html+css的展示效果而已，事件綁定還是上面那段核心代碼，如果有興趣，可以下載我整個插件源碼進行查看，插件免費開源使用，可以隨意修改，但請保留作者和聯系方式。
完整插件查看地址：點擊進入

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com