JavaScript options
parent
bfbdfcc15e
commit
9112c7aa41
11
Readme.md
11
Readme.md
|
@ -68,7 +68,7 @@ If you want to remove button titles add `social-likes_notext` class to make it l
|
|||
|
||||
### Options
|
||||
|
||||
Options define via HTML data attributes.
|
||||
Options define via HTML data attributes or JavaScript parameters object.
|
||||
|
||||
`url`
|
||||
|
||||
|
@ -104,6 +104,15 @@ Examples:
|
|||
</ul>
|
||||
```
|
||||
|
||||
```js
|
||||
$('.social-likes').socialLikes({
|
||||
url: 'https://github.com/sapegin/social-likes/',
|
||||
title: 'Beautiful “like” buttons with counters for popular social networks',
|
||||
html: '<a href="https://github.com/sapegin/social-likes/">Share with us!</a>',
|
||||
counters: 'yes'
|
||||
});
|
||||
```
|
||||
|
||||
### Services specific options
|
||||
|
||||
#### Twitter
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Social Likes</title>
|
||||
<!-- <link href="../social-likes_classic.css" rel="stylesheet"> -->
|
||||
<link href="../social-likes_flat.css" rel="stylesheet">
|
||||
<link href="../social-likes.css" rel="stylesheet">
|
||||
<!--script src="http://yandex.st/jquery/1.10.2/jquery.min.js"></script-->
|
||||
<script src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script src="social-likes.js"></script>
|
||||
|
@ -211,6 +211,21 @@ sl.on('counter.social-likes', function(event, service, number) {
|
|||
console.log('Counter', service, number);
|
||||
});
|
||||
sl.socialLikes();
|
||||
</script>
|
||||
|
||||
<h3>Manual initialization with JavaScript options</h3>
|
||||
<ul id="social-likes-manual-options">
|
||||
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
$('#social-likes-manual-options').socialLikes({
|
||||
url: 'https://github.com/sapegin/social-likes/',
|
||||
title: 'Beautiful “like” buttons with counters for popular social networks',
|
||||
html: '<a href="https://github.com/sapegin/social-likes/">Share with us!</a>',
|
||||
counters: 'yes',
|
||||
zeroes: 'no'
|
||||
});
|
||||
</script>
|
||||
|
||||
<h3>User button & custom count</h3>
|
||||
|
|
|
@ -165,16 +165,16 @@ var counters = {
|
|||
/**
|
||||
* jQuery plugin
|
||||
*/
|
||||
$.fn.socialLikes = function() {
|
||||
$.fn.socialLikes = function(options) {
|
||||
return this.each(function() {
|
||||
new SocialLikes($(this));
|
||||
new SocialLikes($(this), options);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
function SocialLikes(container) {
|
||||
function SocialLikes(container, options) {
|
||||
this.container = container;
|
||||
this.init();
|
||||
this.init(options || {});
|
||||
}
|
||||
|
||||
SocialLikes.prototype = {
|
||||
|
@ -202,17 +202,17 @@ SocialLikes.prototype = {
|
|||
convert: function(value) { return value === 'yes'; }
|
||||
}
|
||||
},
|
||||
init: function() {
|
||||
init: function(options) {
|
||||
// Add class in case of manual initialization
|
||||
this.container.addClass(prefix);
|
||||
|
||||
this.readOptions();
|
||||
this.readOptions(options);
|
||||
this.single = this.container.hasClass(prefix + '_single');
|
||||
|
||||
this.initUserButtons();
|
||||
|
||||
if (this.single) {
|
||||
this.makeSingleButton();
|
||||
this.makeSingleButton(options);
|
||||
}
|
||||
|
||||
var options = this.options;
|
||||
|
@ -220,11 +220,13 @@ SocialLikes.prototype = {
|
|||
new Button($(this), options);
|
||||
});
|
||||
},
|
||||
readOptions: function() {
|
||||
readOptions: function(options) {
|
||||
this.options = {};
|
||||
for (var key in this.optionsMap) {
|
||||
for (var key in this.optionsMap) {
|
||||
var option = this.optionsMap[key];
|
||||
var value = this.container.data(option.attr);
|
||||
var paramOption = options[option.attr];
|
||||
var value = paramOption || this.container.data(option.attr);
|
||||
|
||||
if (!value) {
|
||||
if ($.isFunction(option.defaultValue)) {
|
||||
value = $.proxy(option.defaultValue, this)();
|
||||
|
@ -245,7 +247,7 @@ SocialLikes.prototype = {
|
|||
}
|
||||
this.userButtonInited = true;
|
||||
},
|
||||
makeSingleButton: function() {
|
||||
makeSingleButton: function(options) {
|
||||
var container = this.container;
|
||||
container.addClass(prefix + '_vertical');
|
||||
container.wrap($('<div>', {'class': prefix + '_single-w'}));
|
||||
|
@ -256,7 +258,7 @@ SocialLikes.prototype = {
|
|||
|
||||
var button = $('<div>', {
|
||||
'class': getElementClassNames('button', 'single'),
|
||||
'text': container.data('single-title') || 'Share'
|
||||
'text': options['single-title'] || container.data('single-title') || 'Share'
|
||||
});
|
||||
button.prepend($('<span>', {'class': getElementClassNames('icon', 'single')}));
|
||||
wrapper.append(button);
|
||||
|
|
Loading…
Reference in New Issue