공유 버튼 플러그인 사용 소개(확장 가능, 개발, 제작 과정 포함)_jquery

얼마 전 일이 있어서 공유 버튼을 만들어야 해서 다른 프로젝트에서도 사용할 수 있을 것 같아 플러그인으로 작성하려고 하다가 우연히 하나 추가하게 되었습니다. 플러그인 jquery.hooray 새로운 기능에 모두의 시간을 낭비하지 않기 위해 데모를 먼저 공개하겠습니다. 사용할 수 있다고 생각하거나 만드는 방법을 배우고 싶다면 계속하세요. 독서. (데모)

플러그인이기 때문에 사용자 정의가 가능해야 하고 고정이 불가능합니다. 예를 들어 디스플레이 수를 고정할 수 없고, 공유 버튼의 순서를 고정할 수 없습니다. (그러나 몇 가지 사항은 다음과 같습니다. 여전히 수정해야 합니다. 너무 유연하기 때문에 플러그인이 되지 않습니다. 여기서 제 작업 방법은... 먼저 코드를 보세요

코드 복사 코드는 다음과 같습니다.

< ;/a>

< ;/a>

>

모두 공유합니다. 버튼은 모두 A 태그로 만든 다음 div 컨테이너를 사용하여 이 컨테이너에 A 태그를 사용하고 클래스 이름은 내 규정에 따라 지정합니다. , 모든 것이 괜찮습니다. 디스플레이는 수량, 순서 등이 임의적입니다.
HTML 사양이 공식화되면 CSS 스타일 작성을 시작할 수 있습니다. HTTP 요청을 줄이기 위해 CSS 스프라이트를 사용하여

과 같이 버튼 이미지를 연결했습니다.

동시에 32*32 대형 아이콘 버전도 만들었습니다. 물론 개인의 필요에 따라 다른 크기도 만들 수 있습니다. 다음은 CSS 코드입니다. 소개할 내용은 많지 않으니 한번 살펴보시기 바랍니다.

코드 복사 코드는 다음과 같습니다. .hr-share-16 a{display :block; 너비:18px;높이:16px;배경: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{배경-위치:0 0}
.hr-share-16 a.hr-share-tsina{배경-위치: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{배경-위치:0 -128px}
.hr-share-16 a.hr-share-xiaoyou{배경-위치:0 -144px}
.hr- 공유-16 a.hr-share-hi{배경-위치:0 -160px}
.hr-share-16 a.hr-share-fanfou{배경-위치:0 -176px}
.hr- share-16 a.hr-share-sohubai{배경-위치:0 -192px}
.hr-share-16 a.hr-share-feixin{배경-위치:0 -208px}
.hr- share-16 a.hr-share-youshi{배경-위치:0 -224px}
.hr-share-16 a.hr-share-tianya{배경-위치: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{배경-위치:0 -288px}
.hr-share-16 a.hr-share-mop{배경-위치:0 -304px}


여기서는 각 버튼의 스타일에 접두사 .hr-share-16을 특별히 추가했습니다. 첫 번째 목적은 16*16 및 32*32 아이콘 스타일을 구별하는 것이고, 두 번째 목적은 후속 작업을 용이하게 하는 것입니다. Node.js 코드 부분에 대해서는 나중에 이야기하겠습니다.
위의 두 단계를 완료한 후 다음 초점은 JS 작성입니다. 그 전에 먼저 JS 작성을 마친 후 다시 작성되지 않도록 아이디어를 정리하고 더 나은 방법을 찾아보겠습니다.
우선, 각 웹사이트에는 고유한 공유 링크 코드가 있습니다. 최근 인기가 높은 Tencent Weibo와 Sina Weibo 등을 참고로 무작위로 2개를 선택해 보겠습니다.
원본 보기?http://v.t.qq.com/share/share.php?title=Share 플러그인-jquery.HooRay-jQuery 플러그인-제작자: Hu Yirui丶&url=http://saw .caifutang.com/jquery .hooray/HRshare.html&appkey=118cd1d635c44eab9a4840b2fbf8b0fb
view sourceprint?http://service.weibo.com/share/share.php?title=공유 플러그인 - jquery.HooRay - jQuery 플러그- in - 제작: 후이루이丶&url=http: //saw.caifutang.com/jquery.hooray/HRshare.html&source=bookmark&appkey=2992571369
찾으셨나요? 예, 일반 공유 링크에는 두 개의 매개변수만 필요합니다. 하나는 페이지 제목이고 다른 하나는 페이지 링크입니다. Tencent Weibo와 Sina Weibo의 경우 둘 다 앱 키가 필요합니다. 그냥 나를 사용하세요. 제공된 키를 사용하면 됩니다. 왜냐하면 appkey를 신청해야 하고 프로세스가 약간 번거롭기 때문입니다.
다음으로 이것을 익히면 작업이 간단해집니다. 각 버튼에 클릭 이벤트를 바인딩한 다음 지정된 링크로 전송하면 모든 것이 정상입니다. 그런데 수동으로 하나씩 바인딩을 하면 굉장히 번거로운 느낌이 들고, 새로 공유를 추가하면 코드 변경량이 좀 큰 것 같고, 코드 줄도 많이 늘어나는 것 같습니다. 따라서 루프를 통해 버튼 이벤트를 바인딩합니다. 몇 가지 코드 조각을 살펴보겠습니다.
먼저 다음 두 개의 배열을 정의했습니다(여기에서는 탭 키의 들여쓰기가 작동하지 않으므로 그대로 사용하겠습니다).

코드 복사 코드는 다음과 같습니다.

var shareico = {
"tqq" :"http://v.t.qq.com/share/share.php?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={제목}&iu={url}&fr=ien#nw=1",
"115" :"http://sc.115.com/add?url={url}&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":"Tencent Weibo",
"tsina":"Sina Weibo",
"qzone":"QQ Space",
"renren":"Renren",
"baidu" :"Baidu Collection",
"115" :"115",
"tsohu" :"Sohu Weibo",
"taobao" :"Taojianghu",
"xiaoyou" :"Tencent Friends ",
"hi" :"Baidu Space",
"fanfou" :"Fanfou",
"sohubai" :"Sohu Baixie",
"feixin" :"Fetion",
"tianya" :"Tianya Community",
"youshi" :"Youshi.com",
"msn" :"MSN",
"douban" :"Douban ",
"twangyi " :"NetEase Weibo",
"mop" :"Maopu Tike"
};

첫 번째 배열은 매우 명확합니다. 각 공유 버튼에 해당하는 링크 주소입니다. 제목과 URL을 {title} 및 {url}로 대체한 다음 Lose 바인딩 중에 정규식을 통해 대체했습니다. 두 번째 배열은 각각의 중국어 이름에 해당하며 프론트 데스크의 각 버튼 제목을 표시하는 데 사용됩니다(예: Tencent Weibo에 공유, Sina Weibo에 공유 등).
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 컨테이너에 클래스 스타일을 추가했습니다. 이 코드를 실행하면 페이지에 있는 버튼의 스타일이 표시되는 것을 확인할 수 있습니다.
다음으로 각각 document.title과 window.location.href를 통해 현재 페이지의 제목과 링크를 얻었습니다. 그리고 eFunction이라는 방법이 있습니다. 이 내용은 건너뛰고 나중에 이야기하겠습니다.
다음은 루프 바인딩 클릭 이벤트의 효과를 구현하는 for 루프입니다. 여기서는 두 가지 점에 유의해야 합니다. 첫째, 플러그인으로 작성하고 있기 때문에 공유 버튼이 페이지의 여러 위치에서 사용될 수 있습니다. 반복되는 이벤트 바인딩을 방지하기 위해 die를 사용하여 각 바인딩을 해제합니다. 두 번째로, 일부 프로젝트의 공유 플러그인은 페이지 로딩 후 ajax를 통해 로딩될까 봐 라이브로 직접 바인딩합니다.
eFunction 문제에 대해 다시 이야기해 보겠습니다. 왜 eFunction의 내용이 라이브 클릭 이벤트에 직접 작성되지 않는지 궁금해하시는 분들이 있을 것입니다. 사실 처음에는 이렇게 했는데 안 한 이유는 아주 간단합니다. 맞춤 매개변수를 전달할 수 없었거든요. 이유는 몇몇 JS 전문가에게 물어봤는데 클로저 문제라서 잘 모르겠어서 해결 방법을 찾았습니다. 누구든지 폐쇄 문제에 대해 자세히 설명해 주시면 매우 감사하겠습니다.
바인딩 이벤트에도 formatmodel 메소드가 있습니다. 이는 위에서 말했듯이 정규식을 사용하여 {title} 및 {url}을 대체할 수 있습니다. 여러 곳에서 사용됨:

코드 복사 코드는 다음과 같습니다:

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

이 단계 후에는 모든 것이 정상입니다. 어떤 사람들은 "more" 버튼이 왜 언급되지 않았는지 물을 수도 있습니다. 사실 그것은 단지 html css의 표시 효과일 뿐입니다. 관심이 있으시다면, 내 전체를 다운로드할 수 있습니다. 플러그인 소스 코드를 확인하세요. 플러그인은 무료이며 오픈 소스이며 마음대로 수정할 수 있지만 작성자와 연락처 정보를 유지하시기 바랍니다.
전체 플러그인 주소 보기: 입력하려면 클릭하세요.