.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 の表示効果に過ぎません。興味がある方はご覧ください。プラグインのソース コードを確認してください。プラグインは無料でオープン ソースであり、自由に変更できますが、作成者と連絡先情報は保管しておいてください。
完全なプラグイン アドレスを表示します:
クリックして入力