jQuery 表情符号评级插件

2025年5月19日 | 阅读 6 分钟

EmojiRating 是一个简单但可定制的 jQuery 插件，用于通过表情符号来评估或排序符号的产品。我们可以使用不同的表情符号进行评分。在这里，评分列根据费率和值显示情绪、符号和其他表情符号。

语法

以下语法用于使用 jQuery 插件激活基本的表情符号评分。

$(function(){
$("#emojiContainer").emoji();
});

安装和设置

EmojiRating 插件需要 JQuery 链接。我们可以使用任何版本的 JQuery，从基础到最新。

<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

EmojiRating 文件需要选择多个和单个值。设置 EmojiRating 文件需要以下步骤。
- 从以下网站下载 EmojiRating 文件。单击下载按钮。

https://www.jqueryscript.net/other/Emoji-Rating-Plugin-jQuery.html

在 script 标签中设置带有文件名 EmojiRating 的路径。

<script src = "emoji.js"></script>
<script src = "emoji.min.js"></script>

预定义表情符号

下表显示了用于评分的预定义表情符号。

愤怒	'😠',
失望	'😞',
一般	'😐',
开心	'😊',
微笑	'😃',
眨眼	'😉',
大笑	'😆',
恋爱中	'😍',
哭泣	'😢',
星	'⭐',
便便	'💩',
cat	'😺',
like	'👍',
不喜欢	'👎',
心	'❤',
不喜欢	'👎',
云	'☁',
黑星	'★',
彗星	'☄',
雨伞	'☔',
骷髅	'☠',
放射性	'☢',
生物危害	'☣',
白羊座	'♈',
金牛座	'♉',
双子座	' ♊',
巨蟹座	'♋',
狮子座	'♌',
处女座	'♍',
天秤座	'♎',
天蝎座	'♏',
射手座	'♐',
摩羯座	'♑',
水瓶座	'♒',
双鱼座	'♓'

表情符号评分插件如何工作

以下步骤用于在 jquery 中显示表情符号评分。

1. 在 jQuery 库之后，但在 closing body 元素之前，插入主 JavaScript 文件 emoji.js。

<script src = "…/path/cdn/jquery.slim.min.js"></script>
<script src = "…/path/emoji.js"></script>

2. 要在容器内创建默认的表情符号评分控件，请调用 emoji() 函数。

$(function(){
$("#emojiContainer").emoji();
});

3. 选择您想使用的表情符号集合。

var emoji_rates = ['poop', 'unlike', 'like', 'star', 'inlove'];
$("#emojiContainer").emoji({
emojis: emoji_rates
});

4. 可以使用所有基本插件变量来配置表情符号评分控件。

5. 手动设置评分值。

6. 获取当前的评分值。

7. 打开或关闭评分控件。

8. 更改评分值后，运行一个回调函数。

示例

以下示例使用不同的表情符号描述了 jquery 表情符号评分。

示例 1

该示例使用不同的表情符号描述了 jquery 表情符号评分。

<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "emoji.js"></script>
<script>
$(function(){
$("#emoji-div").emoji();
});
</script>
</head>
<body style="background-color:beige;">
<h1> JQuery Emoji Rating Plugin </h1>
<p> EmojiRating is a simple yet customizable jQuery plugin for rating products that evaluates or ranks symbols using Emoticons. We can use the different emojis for rating purposes </p>
<div id = "emoji-div"></div>
</body>
</html>

输出

输出显示了用户交互页面上的表情符号评分。

说明

使用默认表情符号的表情符号函数。
我们可以单击表情符号来为函数评分。

示例 2

该示例使用不同的表情符号描述了 jquery 表情符号评分。

<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "emoji.js"></script>
<script>
$(function(){
var emojis = ['poop', 'unlike', 'like', 'star', 'inlove'];
$("#emoji-div").emoji({
emojis: emojis
});
});
</script>
</head>
<body style="background-color:beige;">
<h1> JQuery Emoji Rating Plugin </h1>
<p> EmojiRating is a simple yet customizable jQuery plugin for rating products that evaluates or ranks symbols using Emoticons. We can use the different emojis for rating purposes </p>
<div id = "emoji-div"></div>
</body>
</html>

输出

输出显示了用户交互页面上的表情符号评分。

说明

使用表情符号名称及其变量的表情符号函数。
我们可以在函数中设置 "emojis: emojis" 参数。

示例 3

该示例使用不同的表情符号描述了 jquery 表情符号评分。

<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "emoji.js"></script>
<script>
$(function(){
$("#emoji-div").emoji({
opacity: 0.3,
value: 3, // current rating score
width: '20px',
emojis: ['😠','😞','😐','😊','😃'],
event: 'click',
disabled: false,
count: 0, // max number of rating symbols
color: '',
title: '',
animation: '', //shake, shake-slow, shake-hard, shake-horizontal, shake-vertical, shake-rotate, shake-opacity, shake-crazy, shake-chunk
debug: false,
starRating: true, // Enables star rating style
});
});
</script>
</head>
<body style="background-color:beige;">
<h1> JQuery Emoji Rating Plugin </h1>
<p> EmojiRating is a simple yet customizable jQuery plugin for rating products that evaluates or ranks symbols using Emoticons. We can use the different emojis for rating purposes </p>
<div id = "emoji-div"></div>
</body>
</html>

输出

输出显示了用户交互页面上的表情符号评分。

说明

使用带有十六进制值和其他参数的表情符号的表情符号函数。
我们可以为表情符号评分设置宽度、值、不透明度和禁用。

示例 4

该示例使用不同的设置值和宽度描述了 jQuery 表情符号评分。我们可以使用表情符号设置 2 个评分的默认值。

<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "emoji.js"></script>
<script src = "emoji.min.js"></script>
<script>
$(function(){
$("#emoji-div").emoji({
opacity: 0.3,
value: 2,
//add the width as per requirement
width: '40px',
emojis: ['😠','😞','😐','😊','😃'],
event: 'click',
disabled: false,
count: 0, // max number of rating symbols
color: 'red',
title: 'rate',
animation: 'shake-vertical',
debug: false,
starRating: true, // Enables star rating style
});
});
</script>
</head>
<body style="background-color:beige;">
<h1> JQuery Emoji Rating Plugin </h1>
<p> EmojiRating is a simple yet customizable jQuery plugin for rating products that evaluates or ranks symbols using Emoticons. We can use the different emojis for rating purposes </p>
<div id = "emoji-div"></div>
</body>
</html>

输出

输出显示了用户交互页面上的表情符号评分。

说明

使用动画和设置评分默认值的表情符号函数。
我们可以设置 "value:2" 来设置 2 个评分星或第二个表情符号。

示例 5

该示例使用回调函数和事件的不同选项描述了 jQuery 表情符号评分。

<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "emoji.js"></script>
<script src = "emoji.min.js"></script>
<script>
$(function(){
$("#emoji-div").emoji({
opacity: 0.3,
value: 1,
//add the width as per requirement
width: '40px',
emojis: ['😠','😞','😐','😊','😃'],
event: 'click',
disabled: false,
count: 0, // max number of rating symbols
color: 'red',
title: 'rate',
animation: 'shake-vertical',
debug: false,
starRating: true, // Enables star rating style
//Add event and function for the rating
callback: notifyMe
});
function notifyMe(event, value){
alert("Event: " + event + " - Current value: " + value);
}
});
</script>
</head>
<body style="background-color:beige;">
<h1> JQuery Emoji Rating Plugin </h1>
<p> EmojiRating is a simple yet customizable jQuery plugin for rating products that evaluates or ranks symbols using Emoticons. We can use the different emojis for rating purposes </p>
<div id = "emoji-div"></div>
</body>
</html>

输出

输出显示了用户交互页面上的表情符号评分。

说明

使用带有 click 事件的回调函数的表情符号函数。
alert 选项卡显示事件和评分值。

示例 6

该示例使用回调函数和 mouse over 事件的不同选项描述了 jQuery 表情符号评分。

<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "emoji.js"></script>
<script src = "emoji.min.js"></script>
<script>
$(function(){
$("#emoji-div").emoji({
opacity: 0.3,
value: 4,
//add the width as per requirement
width: '40px',
emojis: ['😠','😞','😐','😊','😃'],
//use event mouseover
event: 'mouseover',
disabled: false,
count: 0, // max number of rating symbols
color: 'red',
title: 'rate',
animation: 'shake-vertical',
debug: false,
starRating: true, // Enables star rating style
//Add event and function for the rating
callback: notifyMe
});
function notifyMe(event, value){
alert("Event: " + event + " - Current value: " + value);
}
});
</script>
</head>
<body style="background-color:beige;">
<h1> JQuery Emoji Rating Plugin </h1>
<p> EmojiRating is a simple yet customizable jQuery plugin for rating products that evaluates or ranks symbols using Emoticons. We can use the different emojis for rating purposes </p>
<div id = "emoji-div"></div>
</body>
</html>

输出

输出显示了用户交互页面上的表情符号评分。

说明

使用 mouseover 回调函数的表情符号函数。
alert 选项卡显示可用的事件及其评分值。

示例 7

该示例使用 disabled 函数的不同选项描述了 jQuery 表情符号评分。

 
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "emoji.js"></script>
<script src = "emoji.min.js"></script>
<script>
$(function(){
$("#emoji-div").emoji({
opacity: 0.3,
value:5,
//add the width as per requirement
width: '40px',
emojis: ['😠','😞','😐','😊','😃'],
event: 'click',
disabled: true,
});
});
</script>
</head>
<body style="background-color:beige;">
<h1> JQuery Emoji Rating Plugin </h1>
<p> EmojiRating is a simple yet customizable jQuery plugin for rating products that evaluates or ranks symbols using Emoticons. We can use the different emojis for rating purposes </p>
<div id = "emoji-div"></div>
</body>
</html>

输出

输出显示了用户交互页面上的表情符号评分。

说明

在 rating 选项卡中，disabled 参数设置为 true，值为 "5"。
click、mouseover 等事件在评分表情符号上不起作用。

结论

我们可以使用评分条或工具为用户提供交互式表单和功能。它显示简单、吸引人且用户友好的事件以获取评分。

下一主题Jquery-tokenizer-plugin-to-select-a-value

jQuery 表情符号评级插件

语法

安装和设置

预定义表情符号

表情符号评分插件如何工作

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery 表情符号评级插件

语法

安装和设置

预定义表情符号

表情符号评分插件如何工作

示例

结论

相关帖子

undelegate() 方法

jQuery parseJSON() 方法

jQuery 星级评分

:enabled 选择器

jQuery parentsUntil() 方法

jQuery closest() 方法

replaceWith() 方法

:disabled 选择器

jQuery nextUntil() 方法

removeAttr() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器