另一个简化jQuery和Bootstrap评级星生成的插件
Posted
tags:
中文标题：另一个简化jQuery和Bootstrap评级星生成的插件 原文标题：Another plugin that eases the generation of rating stars for jQuery and Bootstrap 项目评级：Star:317 Fork:160 下载地址：https://github.com/javiertoledo/bootstrap-rating-input 详情介绍引导额定值输入
这是另一个简化jQuery和Bootstrap评级星生成的插件。
它生成的小部件如下：
但是，为什么又是一个该死的评级插件？？？
因为这在2013年是有意义的，当时大多数评级插件都依赖于PNG图像。正如dandv所指出的，2016年有相当多的现代图书馆不再依赖它们。
而且。。。为什么不呢？
好吧，说得够多了，告诉我这东西是怎么工作的！
如果你使用bower来管理你的前端依赖关系，你只需发出以下命令就可以安装这个插件：
bower install bootstrap-rating-input --save
否则，您只需下载build/bootstrap-rating-input.min.js，将其放在您通常将JavaScripts放在项目中的任何位置，并将其包含在您想要具有评级的表单的页面上：
<script src="path/to/javascripts/bootstrap-rating-input.min.js" type="text/javascript"></script>
现在，将类型的数字输入添加到表单中，并将类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的出色贡献。您可以从英语中设置不同的图标类，甚至可以从您正在使用的其他库中加载图标。例如，以下是如何生成字体很棒的心率输入（您可以在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.bootstrapcdn.com/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
);
要求
你知道的。。。推特引导和jQuery！
它看起来不错，但我想抱怨，因为它不适合我最喜欢的用例
我已经在我的环境中为我的项目实现了这一点，并免费共享。给我留下一个你的建议的问题，我最终会推动解决方案，但这是麻省理工学院授权的，所以欢迎你放弃这个项目，提出修复和改进的请求，为自己重新实现更好的版本，或者做任何你想做的事，如果它变得有用或激励至少一个人，我会很高兴。
好的，我想贡献一份力量
美好的你太棒了，把项目分叉，做任何你想做的改变，变成src/bootstrap-rating-input.js。如果你足够友善，我会很感激你保持缩小版的更新，为了简化这一步骤，我已经用grunt自动缩小了，所以如果你安装了npm，你可以发出以下命令来更新缩小版：
$ npm install && grunt
谢谢
jQuery 突出显示在 bootstrap v4 按钮上不起作用
electron开发记录：调用jquery,bootstrap并对其一些用法的总结
electron开发记录：调用jquery,bootstrap并对其一些用法的总结