| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Sharrre.com</title> |
| <meta name="description" content="Sharrre" /> |
| <script src="http://code.jquery.com/jquery-1.7.min.js"></script> |
| <script src="jquery.sharrre-1.3.4.js"></script> |
| <script> |
| $(function(){ |
| $('#demo1').sharrre({ |
| share: { |
| googlePlus: true, |
| facebook: true, |
| twitter: true, |
| delicious: true |
| }, |
| buttons: { |
| googlePlus: {size: 'tall'}, |
| facebook: {layout: 'box_count'}, |
| twitter: {count: 'vertical'}, |
| delicious: {size: 'tall'} |
| }, |
| hover: function(api, options){ |
| $(api.element).find('.buttons').show(); |
| }, |
| hide: function(api, options){ |
| $(api.element).find('.buttons').hide(); |
| } |
| }); |
| |
| $('#demo2').sharrre({ |
| share: { |
| googlePlus: true, |
| facebook: true, |
| twitter: true |
| }, |
| url: 'http://sharrre.com', |
| enableHover: false |
| }); |
| }); |
| </script> |
| <style type="text/css"> |
| #demo1.sharrre { |
| width:100%; |
| display:inline-block; |
| } |
| #demo2.sharrre { |
| width:50px; |
| } |
| .sharrre .box{ |
| float:left; |
| } |
| .sharrre .count { |
| color:#444444; |
| display:block; |
| font-size:17px; |
| line-height:34px; |
| height:34px; |
| padding:4px 0; |
| position:relative; |
| text-align:center; |
| text-decoration:none; |
| width:50px; |
| background-color:#eee; |
| -webkit-border-radius:4px; |
| -moz-border-radius:4px; |
| border-radius:4px; |
| } |
| .sharrre .share { |
| color:#FFFFFF; |
| display:block; |
| font-size:11px; |
| height:16px; |
| line-height:16px; |
| margin-top:3px; |
| padding:0; |
| text-align:center; |
| text-decoration:none; |
| width:50px; |
| background-color:#9CCE39; |
| -webkit-border-radius:4px; |
| -moz-border-radius:4px; |
| border-radius:4px; |
| } |
| .sharrre .buttons { |
| display:none; |
| float:left; |
| width:300px; |
| } |
| .sharrre .button { |
| float:left; |
| max-width:50px; |
| height:50px; |
| margin-left:10px; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Sharrre demo</h1> |
| <div id="demo1" data-title="sharrre" data-url="http://sharrre.com" ></div> |
| <br /><br /> |
| <div id="demo2"></div> |
| </body> |
| </html> |
| |
