README

基于 https://github.com/masukomi/kudos 的 JS 的 Yii2 Kudos 小部件，用于 Svbtle 风格。

演示

在我的博客帖子详情页或原始 JS 小部件演示

使用示例

	Kudos::widget(
		[
			'widgetId' => 'post',  // unique id of widget on page, to allow more than one widget on the page
			'uid' => $post->id,  // uid of Kudoable element, for stat count
			'count' => $post->kudos, // initial Kudos value, to display
			'onAdded' => 'function (event) {
		// JS callback on Kudo +1 , you can do what ever you want here
		// for example send AJAX request to track stats
		var uid = $(this).data("uid");
		$.post("/kudo/plus/post/" + uid);}',
			'onRemoved' => 'function (event) {
		// JS callback on Kudo -1, send another AJAX request to track stats
		var uid = $(this).data("uid");
		$.post("/kudo/minus/post/" + uid);}',
		]);

跟踪和统计存储服务器端，您应该自己实现您想要的任何内容。

localStorage

用于保存每个用户的个人小部件状态。它使用 widgetId|uid 键在网站上多个小部件中保持唯一性。并且不会通过额外的 Cookies（如果有人在您的许多页面上点击了 Kuoded）污染请求头。

事件

• onActive 在您悬停在对象上（圆圈变大）时发送
• onInactive 在您将鼠标从对象移开时发送
• onAdded 在您成功 kudo 东西时发送
• onRemoved 在您取消 kudo 东西时发送

使用自定义图标的小部件的高级使用

我使用来自 http://fontello.com/ 的 font-smiley。应该准备并连接自定义图标字体，然后您可以通过 CSS 调整表情符号的外观和感觉，并将它们添加到 Kudos 小部件中，如下所示

	Kudos::widget(
		[
			'widgetId' => 'post',
			'uid' => $post->id,
			'count' => $post->kudos,
			'defaultClass' => 'icon icon-emo-thumbsup',
			'onAdded' => 'function (event) {
		var uid = $(this).data("uid");
		$(this).find(".icon").removeClass("icon-emo-thumbsup").addClass("icon-emo-beer");
		$.post("/kudo/plus/post/" + uid);}',
			'onRemoved' => 'function (event) {
		var uid = $(this).data("uid");
		$(this).find(".icon").removeClass("icon-emo-beer").addClass("icon-emo-thumbsup");
		$.post("/kudo/minus/post/" + uid);}',
		]);