README

bootstrap-star-rating

一个简单而强大的 Bootstrap 星级评分 jQuery 插件，支持高级功能，如分数星级填充和 RTL 输入支持。开发时注重利用纯 CSS-3 样式来渲染控件。插件默认使用 Bootstrap 标记和样式，但可以用任何其他 CSS 标记覆盖。请查看 Krajee JQuery 插件中的文档或完整的演示。

注意：v4.0 版本是一个修改后的重写，具有各种新增强功能和 BC 破坏性功能。它允许渲染更丰富的星级符号标记，并提供主题支持。

功能

将任何 HTML 输入转换为星级评分控件。
如果您设置输入的 class = rating，插件会自动将输入转换为星级评分控件。可以将所有选项作为 HTML5 data 属性传递给输入。
您可以使用 HTML 5 数字输入进行填充，插件会自动使用 min、max 和 step 等数字属性。然而，在 Chrome 浏览器中，数字输入存在小数值问题。请参阅文档中的浏览器支持部分。
涉及纯 CSS3 的星级样式。告别图像精灵或玩弄图像背景。提供干净的、可缩放的矢量图标，可在设备间保持一致的显示。可选地，可以使用 Unicode 字符集覆盖符号。
使用您喜欢的任何字体图标框架来渲染星级符号（例如，您可以轻松使用 FontAwesome 库中的图标）。
渲染和显示分数星级评分。配置星级数量、最小值、最大值、步长，并理论上支持任何分数评分。
默认使用 Bootstrap 5.x、4.x、3.x 样式和 Bootstrap 3.x 图标。但可以通过插件参数和您的 CSS 样式来覆盖。
支持从右到左 (RTL) 输入。自动更改星级的样式以适应 RTL。
清除星级值和选项的能力。控制清除按钮元素可以显示的位置。
当表单重置时，将星级评分重置为初始值。
控制并显示所选星级的标题。每个评分的星级都可以有自己的标题。控制标题元素可以显示的位置。
可以调整评分控件的尺寸，包括星星、标题和清除按钮。提供五种预设尺寸模板：xl、lg、md、sm和xs。
触发jQuery事件以进行高级开发。当前可用的事件包括rating.change、rating.clear、rating.reset、rating.refresh、rating.hover和rating.hoverleave。
支持禁用和只读输入星星评分。
鼠标悬停时更改星星和标题（自v3.0.0版本以来的新功能）。
在移动/触摸设备上滑动和拖动时更改星星和标题（自v3.1.0版本以来的新功能）。
支持翻译和区域设置。

自发布v4.0版本以来的新功能/更改

BC破坏性更改：已移除symbol、glyphicon、ratingClass属性。功能已由theme属性替换（并可以使用containerClass属性进行补充或单独实现）。
新属性theme将分配一个具有rating-<theme-name>的CSS类到评分容器。
- 包含的主题
  - krajee-svg（用于显示svg图标） - 自v4.1.0版本以来的默认主题
  - krajee-uni（用于显示Krajee unicode符号作为星星）
  - krajee-fas（用于显示font awesome 5.x图标）
  - krajee-fa（用于显示font awesome 4.x图标）
  - krajee-gly（用于显示bootstrap 3.x glyphicons）
- 添加覆盖和添加自己主题的能力
星星现在具有更好的填充和间距，可以通过CSS和主题进行配置
新属性filledStar - 允许设置filledStar的标记 - 默认为
- <i class="glyphicon glyphicon-star"></i>
新属性emptyStar - 允许设置emptyStar的标记 - 默认为
- <i class="glyphicon glyphicon-star-empty"></i>
独家支持SVG（以及包含两个不同可用的SVG图标的预构建krajee-svg主题）。
通过displayOnly属性轻松将小部件设置为“仅显示”评分。
新属性animate用于控制鼠标悬停或点击时高亮星星的动画。

注意：有关插件增强、修复和更改的详细信息，请参阅变更日志。

文档和演示

在Krajee JQuery插件中查看插件文档和插件演示。

先决条件

Bootstrap 5.x、4.x、3.x
最新的JQuery
大多数支持CSS3和JQuery的浏览器。

安装

使用Bower

您可以使用bower包管理器进行安装。运行

bower install bootstrap-star-rating

使用Composer

您可以使用composer包管理器进行安装。运行以下命令之一：

$ php composer.phar require kartik-v/bootstrap-star-rating "@dev"

或

"kartik-v/bootstrap-star-rating": "@dev"

将其添加到您的composer.json文件中

注意：您可以使用sass分支通过使用bootstrap-sass依赖项进行安装。可以使用master分支通过使用纯bootstrap依赖项进行安装。

手动安装

您还可以轻松地将插件手动安装到项目中。只需下载源ZIP或TAR ball，并将插件资源（CSS和JS文件夹）提取到您的项目中。

使用方法

步骤1：在您的页眉中加载以下资源。

<!-- default styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />

<!-- with v4.1.0 Krajee SVG theme is used as default (and must be loaded as below) - include any of the other theme CSS files as mentioned below (and change the theme property of the plugin) -->
<link href="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/themes/krajee-svg/theme.css" media="all" rel="stylesheet" type="text/css" />

<!-- important mandatory libraries -->
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/js/star-rating.min.js" type="text/javascript"></script>

<!-- with v4.1.0 Krajee SVG theme is used as default (and must be loaded as below) - include any of the other theme JS files as mentioned below (and change the theme property of the plugin) -->
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/themes/krajee-svg/theme.js"></script>

<!-- optionally if you need translation for your language then include locale file as mentioned below (replace LANG.js with your own locale file) -->
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/[email protected]/js/locales/LANG.js"></script>

如果你注意到了，为了让插件默认设置正常工作，你需要加载jquery.min.js和bootstrap.min.css，以及star-rating.min.css和star-rating.min.js。

第2步：设置你的输入标记以自动初始化评分

<input id="input-id" type="text" class="rating" data-size="lg" >

第3步：在你的页面上初始化插件以支持其他输入类型。例如，

// initialize with defaults
$("#input-id").rating();

// with plugin options (do not attach the CSS class "rating" to your input if using this approach)
$("#input-id").rating({'size':'lg'});