A few days ago because the work needed to make a share button, considering the subsequent other items may also be used, so I intend to write plug-ins, Just also give my own plug-in jquery.hooray add a new function, in order not to waste everyone's time, I first put out the demo, if you think you can use, or want to learn how to make, then continue to look down. (Demo demo)
Since to make plug-ins, that can be formulated must be strong, can not be determined to die, such as the number of the display can not be fixed dead, can not be the sharing button to order dead and so on (but some things still want to set dead, too flexible also can not become plug-ins). The way I operate here is ... Look at the code first.
Copy Code code as follows:
<div class= "HRshare1" >
<a class= "Hr-share-tsina" ></a>
<a class= "HR-SHARE-TQQ" ></a>
<a class= "Hr-share-qzone" ></a>
<a class= "Hr-share-renren" ></a>
<a class= "Hr-share-baidu" ></a>
<a class= "hr-share-115" ></a>
<a class= "Hr-share-tsohu" ></a>
<a class= "Hr-share-taobao" ></a>
<a class= "Hr-share-xiaoyou" ></a>
<a class= "Hr-share-more" ></a>
</div>
I make all the buttons with a tag. And then use a div container to put them all in the inside, as long as in this container, with a tag, and class name is according to my rules to name the all OK, as to the number of display, the order of anything, random.
HTML to make good specifications, you can start to write CSS style, it should be noted that in order to reduce the HTTP request, the button picture I was using CSS sprites stitching together, such as
At the same time I also made a big icon version of 32*32, of course, you can also make other sizes, according to the personal needs of the line. The following is the CSS code, not too much good introduction, look at the line.
Copy Code code as follows:
. 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{background-position:0 -32px}
. hr-share-16 a.hr-share-qzone{background-position:0 -48px}
. hr-share-16 a.hr-share-renren{background-position:0 -64px}
. hr-share-16 a.hr-share-baidu{background-position:0 -80px}
. hr-share-16 a.hr-share-115{background-position:0 -96px}
. hr-share-16 a.hr-share-tsohu{background-position: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{background-position:0 -160px}
. hr-share-16 a.hr-share-fanfou{background-position: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{background-position:0 -256px}
. hr-share-16 a.hr-share-douban{background-position:0 -272px}
. hr-share-16 a.hr-share-twangyi{background-position:0 -288px}
. hr-share-16 a.hr-share-mop{background-position:0 -304px}
Here I have specially added a. hr-share-16 this prefix, the purpose is to distinguish between the 16*16 and 32*32 icon style, the second is for the JS code part of the operation, later I will talk about.
Finished the above two steps, the next point is to write JS, before this, we first put the idea of a solution, to prevent the completion of JS after the discovery of a better method, resulting in rewriting.
First of all, each site has its own specific link to share the code, we randomly take 2 to refer to, such as the recent very hot Tencent Weibo and Sina Weibo.
View sourceprint?http://v.t.qq.com/share/share.php?title= Share plugin-jquery. Hooray-jquery Plug-in-production: Hu Yuan, &url=http://saw.caifutang.com/jquery.hooray/hrshare.html&appkey= 118cd1d635c44eab9a4840b2fbf8b0fb
View sourceprint?http://service.weibo.com/share/share.php?title= Share plugin-jquery. Hooray-jquery Plugin-production: Hu Yuan &url=http://saw.caifutang.com/jquery.hooray/HRshare.html&source=bookmark& appkey=2992571369
Did you find it? Yes, the general sharing links only need two parameters on the line, one is the title of the page, the other is the link to the page, as for Tencent Weibo and Sina Weibo need a appkey, this addition, if not, directly with the provision of this on the line, because appkey need to apply, the process a little trouble.
Next, if mastered this, the operation is simple, we only need to bind each button a click event, and then switch to the established link, all OK. But if you manually bind one to another, it feels like a hassle, and if you add a new share, the amount of code you change seems a bit large, and there are more lines of code. So, the binding button event is bound by loops. Let's take a look at some of the code snippets below.
First I've defined two arrays (the tab indent doesn't work here, so let's see):
Copy Code code as follows:
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",
"Http://sc.115.com/add?url={url}&title={title": "The"
"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": "Everyone Net",
"Baidu": "Collection",
"115": "115",
"Tsohu": "Sohu Weibo",
"Taobao": "Amoy Rivers and Lakes",
"Xiaoyou": "Tencent Friends",
"HI": "Baidu Space",
"Fanfou": "Rice No",
"Sohubai": "Sohu White Society",
"Feixin": "Fly a Letter",
"Tianya": "Tianya",
"Youshi": "Excellent scholar Net",
"MSN": "MSN",
"Douban": "Watercress",
"Twangyi": "NetEase Weibo",
"Mop": "Mop and push the passengers"
};
The first array is very clear, that is, each share button corresponding to the link address, I put the title and URL are replaced by the {title} and {URL}, and then in the loop binding, through the replacement. The second array is the corresponding Chinese name, used to display the title of each button in the foreground, such as: share to Tencent micro-blog, share to Sina Weibo and so on.
Because JS does not have the concept of multidimensional arrays, I have defined 2 arrays. Next is the JS Code Implementation section (in order to as a tutorial, I have some parameters directly written dead, easy to understand).
Copy Code code as follows:
$ ("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", "Share to" +shareiconame[si]);
}
Here, I first add a class style to the outermost div container, which is the one I mentioned above, and after executing this code, you will find that the buttons on the page are out of style.
Next, I get the title and link to the current page through Document.title and Window.location.href respectively. Then there is a method called Efunction, which jumps over, and so on.
Here is a For loop, which is the effect of the loop-bound fixed-point hit event. Here are two points to note: one, because I am written as a plugin, so there may be more than one use of the Share button on the page, in order to prevent duplication of event binding, so I use Die to unbind each event before binding; Two, I'm using live, not bind, Because I was afraid that the sharing plugin in the possible project would be loaded by Ajax after the page was loaded, so I tied it directly to live.
Besides that efunction question, someone would ask why not write the contents of the efunction directly in the live click event. In fact, I did this at the beginning, but the reason for not doing so is very simple, I can not pass the custom parameters. As for why, I asked the next some JS, is a closure of the problem, this thing I am not very clear, in short, is to find such a way to solve. If someone can give me a specific explanation of the closure of the problem, I am very grateful.
In the binding event there is also a Formatmodel method, this is the replacement, that is, I said above, with the positive to replace the {title} and {URL}, this function can be referred to under the study, can be used in many places:
Copy Code code as follows:
function Formatmodel (Str,model) {
For (var k in model) {
var re = new RegExp ("{" +k+ "}", "G");
str = str.replace (re,model[k]);
}
return str;
}
To do this step, it is all OK. Some people will ask the "more" button how not to say, in fact, that and JS not too much contact, just html+css display effect, event binding or above the core code, if interested, you can download my entire plug-in source to view, plug-in free open source use, you can modify, But please keep the author and contact method.
Full Plugin View address: Click to enter
