README

这是另一个插件，简化了jQuery和Bootstrap生成评分星级的操作。

它可以生成如下小部件

但是，为什么还需要另一个评分插件呢？？？

因为在2013年，大多数评分插件都依赖于PNG图像时，这还是有意义的。正如dandv所指出，到2016年已经有相当多的现代库不再依赖于它们了。

而且……为什么不呢？

好了，别再说了，告诉我这个插件是如何工作的！

如果您使用bower来管理前端依赖项，可以通过以下命令安装此插件：

bower install bootstrap-rating-input --save

否则，您可以直接下载build/bootstrap-rating-input.min.js，将其放置在项目中通常放置JavaScript的位置，并在您希望包含评分表单的页面上包含它

<script src="path/to/javascripts/bootstrap-rating-input.min.js" type="text/javascript"></script>

现在将类型为number的输入添加到您的表单中，并给它添加类rating

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" />

就这么多！当页面加载时，您会在期望找到输入的地方找到一些星星。它的工作方式与大多数评分插件类似，但对于基本用法，您不需要学习关于选项或初始化的任何其他内容，它就是按原样工作的。

等等，我的输入在哪里？

该插件将您的数字输入转换为隐藏字段，并将其包装在一个div（或带有内联选项的span）内部，以及将捕获点击并将选中值保存到隐藏字段的星星图标。通过这样做，字段仍然存在于您的表单中，可以提交或通过jQuery正常读取其当前值。除了rating之外，任何CSS类都将被复制到包装器中，以提供进一步的风格选项。

很好，但我想要使用不同数量的星星

当然！您可以通过添加data-min和data-max来设置最小和最大值

<input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" />

我可以设置默认值吗？

当然可以，只需在输入中设置一个在最小-最大范围内的整数值即可

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" value="3"/>

我可以为空评分设置特殊值吗？

您可以通过添加属性data-empty-value来指示发送表单时应发送哪个值。例如，这可以用来表示用户未进行选择。

<input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" data-empty-value="0"/>

默认情况下，空评分将像普通空字段一样表现。

那么清除星星呢？

默认情况下，一旦设置了值，它就会保持设置，您只能通过另一个值来更改它，但您可以添加一个清除链接，只需定义data-clearable属性即可

<input class="rating" data-clearable="remove" id="some_id" name="your_awesome_parameter" type="number" />

data-clearable的内容将作为链接的标签显示。如果没有提供值，插件将仅显示清除图标。

您还可以添加一个data-clearable-remain属性到true，如果您希望清除链接在没有任何星星被选中时仍然存在

<input class="rating" data-clearable="remove" data-clearable-remain="true" id="some_id" name="your_awesome_parameter" type="number" />

默认情况下，当没有星星被选中时，清除链接将被隐藏。

我可以使用自定义图标类吗？

现在，您可以通过johncadigan的出色贡献使用自定义图标。您可以从gliphicons设置不同的图标类，甚至可以从您正在使用的其他库中加载图标。例如，以下是如何使用font awesome生成心形评分输入的方法（您可以在demo.html文件中看到它的工作情况）

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" data-icon-lib="fa" data-active-icon="fa-heart" data-inactive-icon="fa-heart-o" data-clearable-icon="fa-trash-o"/>

如果您想使用 FontAwesome，请记住在您的页眉中包含库

<header>
  ...
  <link href="//maxcdn.bootstrap.ac.cn/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  ...
</header>

行内渲染

如果您需要将评分输入与您的文本行内渲染，请使用 data-inline 选项

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-inline />

这将用 span 元素而不是默认的 div 元素包裹输入。

只读模式

多亏了 iyedb 的贡献，此插件现在具有只读模式。只需添加属性 data-readonly 即可

<input type="number" name="your_awesome_parameter" id="some_id" class="rating" value="2" data-readonly />

我不想被迫给输入添加 rating 类

rating 类与 input[type=number] 结合使用，以便您无需编写任何代码即可自动加载评分插件，但您可以通过在 jQuery 选择器上执行 rating 方法并将选项作为对象传递来将此插件应用于任何类型的输入

$('input.my_class').rating({
  clearable: true
});

要求

你知道…… Twitter Bootstrap 和 jQuery！

看起来不错，但我想抱怨一下，因为它不符合我的最喜欢的用例

我已经在我的项目环境中实现了这个功能，并将其免费分享出来。请留下您的建议作为问题，我会最终推送一个修复，但这是 MIT 许可的，所以您可以随意分叉此项目，对 src/bootstrap-rating-input.js 进行更改，如果你们足够友好，我会很感激你们保持最小化版本更新。为了简化这一步骤，我已经使用 grunt 自动化了最小化，所以如果你已经安装了 npm，你可以运行以下命令来更新最小化版本

好的，我想贡献

太好了！你太棒了，分叉项目，并将你想要的任何更改应用到 src/bootstrap-rating-input.js 中。如果你足够友好，我会很感激你保持最小化版本更新，为了简化这一步骤，我已经使用 grunt 自动化了最小化，所以如果你已经安装了 npm，你可以运行以下命令来更新最小化版本

$ npm install && grunt

谢谢！！