自己寫的一個分享按鈕的插件（可擴充，内附開發制作流程）

　　中秋了，一個團圓的日子，結果從杭州回到老家，發現家裡的狗沒了，一問才得知是去世了，雖然一共加起來沒見過幾次，但還是挺難過的。發一張照片留作紀念吧。

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

<code>&lt;</code><code>div</code> <code>class="HRshare1"&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-tsina"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-tqq"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-qzone"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-renren"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-baidu"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-115"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-tsohu"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-taobao"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-xiaoyou"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>a</code> <code>class="hr-share-more"&gt;&lt;/</code><code>a</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

　　我把所有按鈕都用A标記來制作，然後用一個div容器把它們都包在裡面，隻要在這個容器裡，用的是A标記，并且class的名稱是按我的規定來命名的就一切OK，至于顯示數量，排列順序什麼的，随意。

　　HTML制定好規範後，就可以開始寫css樣式了，需要注意的是，為了減少http的請求，按鈕的圖檔我是用css sprites拼接在一起了，如

　　同時我也制作了32*32的大圖示版本，當然你也可以制作其他尺寸的，按個人需求來就行。下面是css代碼，沒有太多好介紹的，看下就行。

<code>.hr-share</code><code>-16</code> <code>a{</code><code>display</code><code>:</code><code>block</code><code>;</code><code>width</code><code>:</code><code>18px</code><code>;</code><code>height</code><code>:</code><code>16px</code><code>;</code><code>background</code><code>:</code><code>url</code><code>(HRico_</code><code>16</code><code>x</code><code>16</code><code>.png)</code><code>no-repeat</code><code>;</code><code>float</code><code>:</code><code>left</code><code>;</code><code>cursor</code><code>:</code><code>pointer</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a:hover{opacity:</code><code>0.8</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-more{</code><code>background-position</code><code>:</code><code>0</code> <code>0</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-tsina{</code><code>background-position</code><code>:</code><code>0</code> <code>-16px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-tqq{</code><code>background-position</code><code>:</code><code>0</code> <code>-32px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-qzone{</code><code>background-position</code><code>:</code><code>0</code> <code>-48px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-renren{</code><code>background-position</code><code>:</code><code>0</code> <code>-64px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-baidu{</code><code>background-position</code><code>:</code><code>0</code> <code>-80px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share</code><code>-115</code><code>{</code><code>background-position</code><code>:</code><code>0</code> <code>-96px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-tsohu{</code><code>background-position</code><code>:</code><code>0</code> <code>-112px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-taobao{</code><code>background-position</code><code>:</code><code>0</code> <code>-128px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-xiaoyou{</code><code>background-position</code><code>:</code><code>0</code> <code>-144px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-hi{</code><code>background-position</code><code>:</code><code>0</code> <code>-160px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-fanfou{</code><code>background-position</code><code>:</code><code>0</code> <code>-176px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-sohubai{</code><code>background-position</code><code>:</code><code>0</code> <code>-192px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-feixin{</code><code>background-position</code><code>:</code><code>0</code> <code>-208px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-youshi{</code><code>background-position</code><code>:</code><code>0</code> <code>-224px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-tianya{</code><code>background-position</code><code>:</code><code>0</code> <code>-240px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-msn{</code><code>background-position</code><code>:</code><code>0</code> <code>-256px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-douban{</code><code>background-position</code><code>:</code><code>0</code> <code>-272px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-twangyi{</code><code>background-position</code><code>:</code><code>0</code> <code>-288px</code><code>}</code>

<code>.hr-share</code><code>-16</code> <code>a.hr-share-mop{</code><code>background-position</code><code>:</code><code>0</code> <code>-304px</code><code>}</code>

　　這裡我特地為每個按鈕的樣式加了個.hr-share-16這個字首，目的一是為了區分出16*16和32*32的圖示樣式，二是為了之後js代碼部分的操作，後面我會講到。

　　做完了上面這兩步，接下來重點就來了，就是JS的編寫，在此之前，我們先把思路理一下，防止在編寫完JS後發現有更好的方法，導緻重新編寫。

　　首先，每個網站都有自己特定分享連結的代碼，我們随機拿2個過來參考下，比如最近很火的騰訊微網誌和新浪微網誌。

<code>http://v.t.qq.com/share/share.php?title=分享插件 - jquery.HooRay - jQuery插件 - 制作：胡尐睿丶&amp;url=http://saw.caifutang.com/jquery.hooray/HRshare.html&amp;appkey=118cd1d635c44eab9a4840b2fbf8b0fb</code>

<code>http://service.weibo.com/share/share.php?title=分享插件 - jquery.HooRay - jQuery插件 - 制作：胡尐睿丶&amp;url=http://saw.caifutang.com/jquery.hooray/HRshare.html&amp;source=bookmark&amp;appkey=2992571369</code>

　　發現沒有？對，就是一般的分享連結隻需要兩個參數就行，一是頁面的标題，另一個就是頁面的連結，至于騰訊微網誌和新浪微網誌都需要一個appkey，這個另外再說，如果沒有，直接用我提供的這個就行，因為appkey需要去申請，過程略微有點麻煩。

　　接下來，如果掌握了這個，操作起來就簡單了，我們隻需要對每個按鈕綁定一個點選事件，然後調轉到制定的連結，就一切OK了。但是如果手動一個個去綁定，那感覺就很麻煩了，而且如果增加一個新的分享，改動的代碼量似乎也有點大，而且代碼行數也多。是以，綁定按鈕事件我是通過循環綁定的。下面就來看下部分代碼片段吧。

　　首先我定義了這麼兩個數組（tab鍵的縮進在這裡不起作用了，大家湊合着看吧）：

<code>var</code> <code>shareico = {</code>

<code>    </code><code>"tqq"</code>       <code>:</code><code>"http://v.t.qq.com/share/share.php?title={title}&amp;url={url}&amp;appkey=118cd1d635c44eab9a4840b2fbf8b0fb"</code><code>,</code>

<code>    </code><code>"tsina"</code>     <code>:</code><code>"http://service.weibo.com/share/share.php?title={title}&amp;url={url}&amp;source=bookmark&amp;appkey=2992571369"</code><code>,</code>

<code>    </code><code>"qzone"</code>     <code>:</code><code>"http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={url}&amp;title={title}"</code><code>,</code>

<code>    </code><code>"renren"</code>    <code>:</code><code>"http://***/share/buttonshare.do?link={url}&amp;title={title}"</code><code>,</code>

<code>    </code><code>"baidu"</code>     <code>:</code><code>"http://cang.baidu.com/do/add?it={title}&amp;iu={url}&amp;fr=ien#nw=1"</code><code>,</code>

<code>    </code><code>"115"</code>       <code>:</code><code>"http://sc.115.com/add?url={url}&amp;title={title}"</code><code>,</code>

<code>    </code><code>"tsohu"</code>     <code>:</code><code>"http://t.sohu.com/third/post.jsp?url={url}&amp;title={title}&amp;content=utf-8"</code><code>,</code>

<code>    </code><code>"taobao"</code>    <code>:</code><code>"http://share.jianghu.taobao.com/share/addShare.htm?url={url}"</code><code>,</code>

<code>    </code><code>"xiaoyou"</code>   <code>:</code><code>"http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?to=pengyou&amp;url={url}"</code><code>,</code>

<code>    </code><code>"hi"</code>        <code>:</code><code>"http://apps.hi.baidu.com/share/?url={url}&amp;title={title}"</code><code>,</code>

<code>    </code><code>"fanfou"</code>    <code>:</code><code>"http://fanfou.com/sharer?u={url}&amp;t={title}"</code><code>,</code>

<code>    </code><code>"sohubai"</code>   <code>:</code><code>"http://bai.sohu.com/share/blank/add.do?link={url}"</code><code>,</code>

<code>    </code><code>"feixin"</code>    <code>:</code><code>"http://space3.feixin.10086.cn/api/share?title={title}&amp;url={url}"</code><code>,</code>

<code>    </code><code>"youshi"</code>    <code>:</code><code>"http://www.ushi.cn/feedShare/feedShare!sharetomicroblog.jhtml?type=button&amp;loginflag=share&amp;title={title}&amp;url={url}"</code><code>,</code>

<code>    </code><code>"tianya"</code>    <code>:</code><code>"http://share.tianya.cn/openapp/restpage/activity/appendDiv.jsp?app_id=jiathis&amp;ccTitle={title}&amp;ccUrl={url}&amp;jtss=tianya&amp;ccBody="</code><code>,</code>

<code>    </code><code>"msn"</code>       <code>:</code><code>"http://profile.live.com/P.mvc#!/badge?url={url}&amp;screenshot="</code><code>,</code>

<code>    </code><code>"douban"</code>    <code>:</code><code>"http://shuo.douban.com/!service/share?image=&amp;href={url}&amp;name={title}"</code><code>,</code>

<code>    </code><code>"twangyi"</code>   <code>:</code><code>"http://t.163.com/article/user/checkLogin.do?source={title}&amp;info={title}+{url}&amp;images="</code><code>,</code>

<code>    </code><code>"mop"</code>       <code>:</code><code>"http://tk.mop.com/api/post.htm?url={url}&amp;title={title}"</code>

<code>};</code>

<code>var</code> <code>shareiconame = {</code>

<code>    </code><code>"tqq"</code>       <code>:</code><code>"騰訊微網誌"</code><code>,</code>

<code>    </code><code>"tsina"</code>     <code>:</code><code>"新浪微網誌"</code><code>,</code>

<code>    </code><code>"qzone"</code>     <code>:</code><code>"QQ空間"</code><code>,</code>

<code>    </code><code>"renren"</code>    <code>:</code><code>"人人網"</code><code>,</code>

<code>    </code><code>"baidu"</code>     <code>:</code><code>"百度收藏"</code><code>,</code>

<code>    </code><code>"115"</code>       <code>:</code><code>"115"</code><code>,</code>

<code>    </code><code>"tsohu"</code>     <code>:</code><code>"搜狐微網誌"</code><code>,</code>

<code>    </code><code>"taobao"</code>    <code>:</code><code>"淘江湖"</code><code>,</code>

<code>    </code><code>"xiaoyou"</code>   <code>:</code><code>"騰訊朋友"</code><code>,</code>

<code>    </code><code>"hi"</code>        <code>:</code><code>"百度空間"</code><code>,</code>

<code>    </code><code>"fanfou"</code>    <code>:</code><code>"飯否"</code><code>,</code>

<code>    </code><code>"sohubai"</code>   <code>:</code><code>"搜狐白社會"</code><code>,</code>

<code>    </code><code>"feixin"</code>    <code>:</code><code>"飛信"</code><code>,</code>

<code>    </code><code>"tianya"</code>    <code>:</code><code>"天涯社群"</code><code>,</code>

<code>    </code><code>"youshi"</code>    <code>:</code><code>"優士網"</code><code>,</code>

<code>    </code><code>"msn"</code>       <code>:</code><code>"MSN"</code><code>,</code>

<code>    </code><code>"douban"</code>    <code>:</code><code>"豆瓣"</code><code>,</code>

<code>    </code><code>"twangyi"</code>   <code>:</code><code>"網易微網誌"</code><code>,</code>

<code>    </code><code>"mop"</code>       <code>:</code><code>"貓撲推客"</code>

　　第一個數組很明了，就是每個分享按鈕對應的連結位址，我把其中title和url都替換成了{title}和{url}，之後在循環綁定的時候，通過正則去替換掉。第二個數組就是對應各自的中文名稱，用于顯示前台每個按鈕的title，如：分享到騰訊微網誌、分享到新浪微網誌等。

　　因為js沒有多元數組的概念，是以我就定義了2數組。接下來就是js代碼實作部分了（為了當作教程，我把一些參數直接寫死了，便于大家了解）。

<code>$(</code><code>"div"</code><code>).addClass(</code><code>"hr-share-16"</code><code>);</code>

<code>var</code> <code>title = document.title;</code>

<code>var</code> <code>url = window.location.href;</code>

<code>function</code> <code>eFunction(str){</code>

<code>    </code><code>return</code> <code>function</code><code>(){</code>

<code>        </code><code>window.open(formatmodel(shareico[str],{title:title, url:url}));</code>

<code>    </code><code>}</code>

<code>}</code>

<code>for</code><code>(si</code><code>in</code> <code>shareico){</code>

<code>    </code><code>$(</code><code>".hr-share-"</code><code>+si).die(</code><code>'click'</code><code>).live(</code><code>'click'</code><code>,eFunction(si)).attr(</code><code>"title"</code><code>,</code><code>"分享到"</code><code>+shareiconame[si]);</code>

　　這裡，我首先給最外面那個div容器添加了一個class樣式，就是我上面說到的那個，執行到這句代碼後，你會發現頁面上按鈕的樣式都出來了。

　　接着，我分别通過document.title和window.location.href擷取到了目前頁面的标題和連結。然後是一個叫eFunction的方法，這個跳過下，等會說。

　　下面是一個for循環，這裡就是實作了循環綁定點選事件的效果。這裡需要注意兩點：一，因為我是寫成插件，是以頁面上可能不止一處用到分享按鈕，為了防止重複事件綁定，是以我在綁定每個事件前都用die去解除綁定；二，我用的是live，而不是bind，因為我擔心可能有的項目裡的分享插件是通過ajax在頁面載入完畢之後再載入進來的，是以我綁定就直接用live綁定了。

　　再說下那個eFunction的問題，肯定有人會問為什麼不把eFunction裡的内容直接寫在live的click事件裡。其實我最開始也是這麼做的，但不這麼做的原因很簡單，我無法把自定義的參數傳進去。至于為什麼，我問了下一些JS高人，是個閉包的問題，這個東西我不是很清楚，總之就是找了這麼一個辦法來解決了。如果有人能給我具體講解下閉包的問題，我非常感謝。

　　在綁定事件裡還有一個formatmodel方法，這個是替換用的，也就是我上面說的，用正則去替換掉{title}和{url}，這個function大家可以參考學習下，能用在很多地方：

<code>function</code> <code>formatmodel(str,model){</code>

<code>    </code><code>for</code><code>(</code><code>var</code> <code>k</code><code>in</code> <code>model){</code>

<code>        </code><code>var</code> <code>re =</code><code>new</code> <code>RegExp(</code><code>"{"</code><code>+k+</code><code>"}"</code><code>,</code><code>"g"</code><code>);</code>

<code>        </code><code>str = str.replace(re,model[k]);</code>

<code>    </code><code>return</code> <code>str;</code>

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

   本文轉自胡尐睿丶部落格園部落格，原文連結：http://www.cnblogs.com/hooray/archive/2011/09/10/2172946.html，如需轉載請自行聯系原作者