前幾天由于工作需要制作一個(gè)分享按鈕，考慮到后續(xù)其他項(xiàng)目可能也會(huì)用到，于是就打算寫成插件化，正好也給我自己的插件jquery.hooray增加一個(gè)新的功能，為了不浪費(fèi)大家時(shí)間，我先把demo放出來，如果覺得能用到，或者想學(xué)是怎么制作的，那就繼續(xù)往下看。（demo演示）

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

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

　　同時(shí)我也制作了32*32的大圖標(biāo)版本，當(dāng)然你也可以制作其他尺寸的，按個(gè)人需求來就行。下面是css代碼，沒有太多好介紹的，看下就行。

這里我特地為每個(gè)按鈕的樣式加了個(gè).hr-share-16這個(gè)前綴，目的一是為了區(qū)分出16*16和32*32的圖標(biāo)樣式，二是為了之后js代碼部分的操作，后面我會(huì)講到。
　　做完了上面這兩步，接下來重點(diǎn)就來了，就是JS的編寫，在此之前，我們先把思路理一下，防止在編寫完JS后發(fā)現(xiàn)有更好的方法，導(dǎo)致重新編寫。
　　首先，每個(gè)網(wǎng)站都有自己特定分享鏈接的代碼，我們隨機(jī)拿2個(gè)過來參考下，比如最近很火的騰訊微博和新浪微博。
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
　　發(fā)現(xiàn)沒有？對，就是一般的分享鏈接只需要兩個(gè)參數(shù)就行，一是頁面的標(biāo)題，另一個(gè)就是頁面的鏈接，至于騰訊微博和新浪微博都需要一個(gè)appkey，這個(gè)另外再說，如果沒有，直接用我提供的這個(gè)就行，因?yàn)閍ppkey需要去申請，過程略微有點(diǎn)麻煩。
　　接下來，如果掌握了這個(gè)，操作起來就簡單了，我們只需要對每個(gè)按鈕綁定一個(gè)點(diǎn)擊事件，然后調(diào)轉(zhuǎn)到制定的鏈接，就一切OK了。但是如果手動(dòng)一個(gè)個(gè)去綁定，那感覺就很麻煩了，而且如果增加一個(gè)新的分享，改動(dòng)的代碼量似乎也有點(diǎn)大，而且代碼行數(shù)也多。所以，綁定按鈕事件我是通過循環(huán)綁定的。下面就來看下部分代碼片段吧。
　　首先我定義了這么兩個(gè)數(shù)組（tab鍵的縮進(jìn)在這里不起作用了，大家湊合著看吧）：

第一個(gè)數(shù)組很明了，就是每個(gè)分享按鈕對應(yīng)的鏈接地址，我把其中title和url都替換成了{(lán)title}和{url}，之后在循環(huán)綁定的時(shí)候，通過正則去替換掉。第二個(gè)數(shù)組就是對應(yīng)各自的中文名稱，用于顯示前臺(tái)每個(gè)按鈕的title，如：分享到騰訊微博、分享到新浪微博等。
　　因?yàn)閖s沒有多維數(shù)組的概念，所以我就定義了2數(shù)組。接下來就是js代碼實(shí)現(xiàn)部分了（為了當(dāng)作教程，我把一些參數(shù)直接寫死了，便于大家理解）。

這里，我首先給最外面那個(gè)div容器添加了一個(gè)class樣式，就是我上面說到的那個(gè)，執(zhí)行到這句代碼后，你會(huì)發(fā)現(xiàn)頁面上按鈕的樣式都出來了。
　　接著，我分別通過document.title和window.location.href獲取到了當(dāng)前頁面的標(biāo)題和鏈接。然后是一個(gè)叫eFunction的方法，這個(gè)跳過下，等會(huì)說。
　　下面是一個(gè)for循環(huán)，這里就是實(shí)現(xiàn)了循環(huán)綁定點(diǎn)擊事件的效果。這里需要注意兩點(diǎn)：一，因?yàn)槲沂菍懗刹寮?，所以頁面上可能不止一處用到分享按鈕，為了防止重復(fù)事件綁定，所以我在綁定每個(gè)事件前都用die去解除綁定；二，我用的是live，而不是bind，因?yàn)槲覔?dān)心可能有的項(xiàng)目里的分享插件是通過ajax在頁面載入完畢之后再載入進(jìn)來的，所以我綁定就直接用live綁定了。
　　再說下那個(gè)eFunction的問題，肯定有人會(huì)問為什么不把eFunction里的內(nèi)容直接寫在live的click事件里。其實(shí)我最開始也是這么做的，但不這么做的原因很簡單，我無法把自定義的參數(shù)傳進(jìn)去。至于為什么，我問了下一些JS高人，是個(gè)閉包的問題，這個(gè)東西我不是很清楚，總之就是找了這么一個(gè)辦法來解決了。如果有人能給我具體講解下閉包的問題，我非常感謝。
　　在綁定事件里還有一個(gè)formatmodel方法，這個(gè)是替換用的，也就是我上面說的，用正則去替換掉{title}和{url}，這個(gè)function大家可以參考學(xué)習(xí)下，能用在很多地方：

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

最新評(píng)論