シェアボタンプラグインの使い方入門（拡張可能、開発・制作プロセス含む）_jquery

数日前、仕事の関係で共有ボタンを作成する必要があり、その後の他のプロジェクトで使用する可能性を考慮して、たまたま自分のプラグインとして作成する予定でした。プラグイン jquery.hooray 新しい機能で皆さんの時間を無駄にしないように、最初にデモをリリースします。これが使用できると思われる場合、または作成方法を学びたい場合は、続行してください。読む。 (デモ)

プラグインとなるため、高度なカスタマイズが可能であり、表示数を固定できない、共有ボタンの順序を固定できないなどの固定はできません。柔軟性が高すぎるため、プラグインにはなりません)。ここでの私の操作方法は...まずコードを見てください

コードをコピーします コードは次のとおりです:

>





すべて共有します ボタンはすべて A タグで作成され、このコンテナ内で A タグが使用されている限り、div コンテナを使用してそれらをラップし、クラス名は私の規定に従って命名されます。 、表示はすべてOKです。数量、順序などは任意です。

HTML 仕様が策定されたら、CSS スタイルの記述を開始できます。HTTP リクエストを減らすために、

などのボタン画像を結合するために CSS スプライトを使用したことに注意してください。

同時に、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{背景位置:0 -32px}
.hr-share-16 a.hr-share-qzone{背景位置:0 -48px}
.hr-share-16 a.hr-share-renren{背景位置:0 -64px}
.hr-share-16 a.hr-share-baidu{背景位置:0 -80px}
.hr-share-16 a.hr-share-115{背景位置:0 -96px}
.hr-share-16 a.hr-share-tsohu{背景位置: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{背景位置:0 -160px}
.hr-share-16 a.hr-share-fanfou{背景位置: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{背景位置:0 -256px}
.hr-share-16 a.hr-share-douban{背景位置: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 を特別に追加しました。1 つ目の目的は、16*16 と 32*32 のアイコン スタイルを区別することです。2 つ目は、その後の操作を容易にすることです。 jsコード部分については後ほど説明します。
上記の 2 つの手順が完了したら、次は JS の作成に移ります。その前に、JS を書き終わった後に書き直さないようにアイデアを整理し、より良い方法を見つけてください。
まず、各 Web サイトには独自の共有リンク コードがあります。参考として、最近人気の Tencent Weibo や Sina Weibo などをランダムに 2 つ挙げてみましょう。
view sourceprint?http://v.t.qq.com/share/share.php?title=Share plug-in-jquery.HooRay-jQuery プラグイン-制作者: Hu Yirui丶&url=http://saw .caifutang.com/jquery .hooray/HRshare.html&appkey=118cd1d635c44eab9a4840b2fbf8b0fb
ソースプリントを表示?http://service.weibo.com/share/share.php?title=共有プラグイン - jquery.HooRay - jQuery プラグインin - 制作者: Hu Yirui丶&url=http://saw.caifutang.com/jquery.hooray/HRshare.html&source=bookmark&appkey=2992571369
見つかりましたか?はい、一般的な共有リンクには 2 つのパラメータのみが必要です。1 つはページのタイトルで、もう 1 つはページへのリンクです。Tencent Weibo と Sina Weibo の場合は、両方とも appkey が必要です。 appkey を申請する必要があり、手続きが少し面倒なので、提供されているもので十分です。
次に、これをマスターすれば操作は簡単で、各ボタンにクリックイベントをバインドし、指定したリンクに転送するだけでOKです。ただ、一つ一つ手動でバインドすると非常に面倒に感じますし、新たに共有を追加するとコードの変更量が少し多くなり、コード行数も多くなりそうです。したがって、ループを通じてボタン イベントをバインドします。いくつかのコードスニペットを見てみましょう。
まず、次の 2 つの配列を定義しました (ここではタブ キーのインデントが機能しません。それで済ませましょう):

コードをコピー コードは次のとおりです。

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.taabao.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" :"Tencent Weibo"、
"tsina" :"Sina Weibo"、
"qzone" :"QQ スペース"、
"renren" :"Renren"、
"baidu" :"Baidu Collection"、
"115" :"115"、
"tsohu" :"Sohu Weibo"、
"taobao" :"Taojianghu"、
"xiaoyou " :"Tencent Friends ",
"hi" :"Baidu Space"、
"fanfou" :"ファンフー"、
"sohubai" :"Sohu Baixie"、
"feixin" :"フェション"、
"tianya" :"Tianya Community"、
"youshi" :"Youshi.com"、
"msn" :"MSN"、
"douban" :"Douban "、
"twangyi " :"NetEase Weibo",
"モップ" :"Maopu Tike"
};

最初の配列は非常に明確です。これは、各共有ボタンに対応するリンク アドレスであり、タイトルと URL を {title} と {url} に置き換え、ループ バインディング中に正規表現で置き換えました。 2 番目の配列はそれぞれの中国語名に対応し、フロント デスクの各ボタンのタイトル (Tencent Weibo への共有、Sina Weibo への共有など) を表示するために使用されます。
jsには多次元配列の概念がないので、2つの配列を定義しました。次に、js コードの実装部分です (チュートリアルとして、誰でも理解しやすいようにいくつかのパラメーターを直接記述しました)。

コードをコピー コードは次のとおりです。

$("div").addClass( "hr-share-16");
var title = document.title;
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 コンテナにクラス スタイルを追加しました。このコードを実行すると、ページ上のボタンのスタイルが表示されることがわかります。
次に、document.title と window.location.href を通じて現在のページのタイトルとリンクをそれぞれ取得しました。次に、eFunction と呼ばれるメソッドがあります。これについては省略し、後で説明します。
以下は、クリック イベントをバインドするループの効果を実現する for ループです。ここで 2 つの点に注意する必要があります。 まず、プラグインとして作成しているため、共有ボタンがページ上の複数の場所で使用される可能性があります。イベントのバインドが繰り返されるのを防ぐために、die を使用してそれぞれのバインドを解除します。次に、バインドの代わりに live を使用します。これは、一部のプロジェクトの共有プラグインが、ページの読み込み後に ajax 経由で読み込まれることが懸念されるため、live で直接バインドします。
eFunction の問題についてもう一度話しましょう。なぜ eFunction のコンテンツがライブ クリック イベントに直接書き込まれないのかと疑問に思う人もいるでしょう。実際、最初はこれを実行しましたが、これを実行しなかった理由は非常に単純で、カスタム パラメーターを渡すことができませんでした。理由については、何人かの JS 専門家に尋ねたところ、クロージャの問題だったのでよく分からなかったので、解決する方法を見つけました。誰かがクロージャの問題を詳しく説明してくれるなら、とても感謝します。
これは先ほども書きましたが、{title}と{url}を置換するためのformatmodelメソッドがあり、これを参照して学習することができます。多くの場所で使用されています:

コードをコピーします コードは次のとおりです:

function formatmodel(str ,model){
for(var k in model){
var re = new RegExp("{" k "}","g");
str = str.replace(re,model[ k]);
}
return str;
}

このステップの後は、すべて問題ありません。なぜ「詳細」ボタンが記載されていないのか疑問に思う人もいるかもしれません。実際には、これは HTML CSS の表示効果に過ぎません。興味がある方はご覧ください。プラグインのソース コードを確認してください。プラグインは無料でオープン ソースであり、自由に変更できますが、作成者と連絡先情報は保管しておいてください。
完全なプラグイン アドレスを表示します:
クリックして入力