# Bootstrap Rating Input
[![CDNJS version](https://img.shields.io/cdnjs/v/bootstrap-rating-input.svg)](https://cdnjs.com/libraries/bootstrap-rating-input)
This is another plugin that eases the generation of rating stars for jQuery and Bootstrap.
It generates widgets like this:
![Rating example](http://curso-rails-mini-blog.s3.amazonaws.com/rating.png)
## But, why another damn rating plugin???
Because it made sense back in 2013 when most rating plugins depended on PNG images. As noted by [dandv](https://github.com/dandv), in 2016 [there are quite a few modern libraries that don't depend on them anymore](https://github.com/javiertoledo/bootstrap-rating-input/issues/54).
And also... why not!!?
## Ok, enough talking, tell me how this thing works!
If you're using bower to manage your frontend dependencies you can install this plugin by just issuing this command:
bower install bootstrap-rating-input --save
Otherwise you can just download `build/bootstrap-rating-input.min.js`, put it wherever you usually put JavaScripts in your project and include it on pages where you want to have forms with ratings:
<script src="path/to/javascripts/bootstrap-rating-input.min.js" type="text/javascript"></script>
Now add a input of type *number* to your forms and add the class `rating` to it:
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" />
That's all! When page loads, you'll find a few stars where you'd expect to find the input. It works just like most of rating plugins, but for the basic usage you don't need to learn anything else about options or initializations, it just works out of the box.
### Wait, where is my input?
The plugin transforms your number input into a hidden field and wraps it inside a `div` (Or a `span` with the inline option) along with the star icons that will catch your clicks and save the selected values into the hidden field. By doing this, the field still exist in your form and can be submitted or its current value read by jQuery normally. Any CSS class in addition to `rating` will be copied to the wrapper for further styling options.
### Nice, but I want to use a different number of stars
Sure! You can set min and max values adding `data-min` and `data-max`:
<input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" />
### Can I set a default value?
Definitely, just set an integer value in your input that's within your min-max range':
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-clearable="remove" value="3"/>
### Can I set a special value for empty ratings?
You can add the attribute `data-empty-value` to indicate which value should send the form when it have an empty rating. This can be used, for example, to have an special value indicating the user didn't perform a selection:
<input class="rating" data-max="5" data-min="1" id="some_id" name="your_awesome_parameter" type="number" data-empty-value="0"/>
By default empty ratings will behave like a regular empty field.
### And what about clearing the stars?
By default once you set a value it remains set and you can only change it by another, but you can add a clear link by just defining the `data-clearable` attribute:
<input class="rating" data-clearable="remove" id="some_id" name="your_awesome_parameter" type="number" />
The content of `data-clearable` will appear as label for the link. If no value is provided the plugin will display just the clear icon.
You can also add a `data-clearable-remain` attribute to `true` if you'd like the clear link to remain up even when there are no stars selected:
<input class="rating" data-clearable="remove" data-clearable-remain="true" id="some_id" name="your_awesome_parameter" type="number" />
By default the clear link will be hidden whenever no stars are selected.
### Can I use custom icon classes?
Now you can use custom icons thanks to the awesome contribution by [johncadigan](https://github.com/johncadigan). You can set different icon classes from gliphicons or even load icons from other libraries you're using. For instance here is how you generate a heart rating input with font awesome (You can see it working in the `demo.html` file):
<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"/>
If you want to use [FontAwesome](http://fontawesome.io/), remember to include the library in your header:
<header>
...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
...
</header>
### Inline render
If you need to render the rating input inline with your text, use the `data-inline` option:
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" data-inline />
This will wrap the input in a `span` element instead of the default `div`.
### Readonly mode
Thanks to the contribution by [iyedb](https://github.com/iyedb) this plugin now features a read-only mode. Just add the attribute `data-readonly` to do the trick:
<input type="number" name="your_awesome_parameter" id="some_id" class="rating" value="2" data-readonly />
### I don't want to be forced to add the `rating` class to the inputs
The `rating` class is used in combination with `input[type=number]` to let you autoload the rating plugin without coding anything, but you can apply this plugin to a input of any type by executing the method `rating` on a jQuery selection and pass the options in an object:
$('input.my_class').rating({
clearable: true
});
## Requirements
You know... [Twitter Bootstrap](http://getbootstrap.com) and [jQuery](http://jquery.com)!
## It looks nice, but I want to complain because it doesn't fit my favorite use case
I have implemented this for my project in my environment and sharing it for free. Leave me an issue with your suggestions and I'll eventually push a fix, but this is MIT licensed, so you're welcome to fork this project, do pull requests with fixes and improvements, reimplement better versions of it for your own or do whatever you want, I'll be happy if it becomes useful or inspires at least one more person.
## Ok, I want to contribute
Nice! You're awesome, fork the project, and do whatever changes you want into `src/bootstrap-rating-input.js`. If you're kind enough I'll appreciate that you maintain the minified version updated and to ease this step I've automated minification with grunt, so if you have npm installed you can issue following command to update the minified version:
$ npm install && grunt
Thanks!!
没有合适的资源?快使用搜索试试~ 我知道了~
基于 JSP的学生管理系统.zip
共2002个文件
sha1:497个
pom:332个
repositories:331个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 112 浏览量
2024-04-13
21:31:08
上传
评论
收藏 96.81MB ZIP 举报
温馨提示
管理员功能需求 管理员通过特定用户名和密码来输入信息,单选框来选择管理员身份信息,登录之后进入相应角色的操作界面。 选择指定查询条件,查询相应教师信息,并分页显示。可以添加一个新的教师信息,教师工号作为教师身份唯一标识。 还可以修改教师的信息,除教师编号外。同样拥有删除一个教师的所有信息的功能。查询学生、课程信息时同教师信息查询一样,也拥有删除功能。在添加时,通过下拉框来选择学院、专业等。 教师功能需求 教师登录后可以查询教师自己的所有信息,并修改登录密码。 教师通过指定条件查询课程表,并自由选择自己需要教学的课程。对该课程代理,记录详细信息:上课班级名、上课时间、上课教师、学分、学时、限选人数等。添加完成后可查询教师本人代理的课程,并修改教师本人所代课的时间地点等详细信息。在课程安排列表页,可对其进行删除。最后教师可查看自己课程的学生名单。 学生功能需求 学生登录后可查看个人信息并修改自己的密码。查询课程进行选择,在选择过程中可查看上课时间和地点的安排,并提示是否选课。查看相应课程目前所选的人数以及限选人数。学生可查看自己已选课程的信息,即课程
资源推荐
资源详情
资源评论
收起资源包目录
基于 JSP的学生管理系统.zip (2002个子文件)
AdminHandler.class 12KB
AdminHandler.class 12KB
StudentHandler.class 11KB
StudentHandler.class 11KB
TeacherHandler.class 9KB
TeacherHandler.class 9KB
StudentTestApp.class 7KB
CoursePlanHandler.class 7KB
CoursePlanHandler.class 7KB
CoursePlanTestApp.class 6KB
CourseHandler.class 6KB
CourseHandler.class 6KB
CourseTestApp.class 5KB
TeacherTestApp.class 5KB
SCTestApp.class 5KB
AjaxHandler.class 5KB
AjaxHandler.class 5KB
LoginHandler.class 4KB
LoginHandler.class 4KB
DynamicPlugin.class 4KB
DynamicPlugin.class 4KB
CoursecommentHandler.class 4KB
CoursecommentHandler.class 4KB
MyListTypeHandler.class 4KB
MyListTypeHandler.class 4KB
StudentServiceImpl.class 3KB
StudentServiceImpl.class 3KB
CoursePlanServiceImpl.class 3KB
CoursePlanServiceImpl.class 3KB
SelectCourseServiceImpl.class 3KB
SelectCourseServiceImpl.class 3KB
CourseServiceImpl.class 3KB
CourseServiceImpl.class 3KB
TeacherServiceImpl.class 3KB
TeacherServiceImpl.class 3KB
CoursePlan.class 2KB
CoursePlan.class 2KB
StuSelectResult.class 2KB
StuSelectResult.class 2KB
Student.class 2KB
Student.class 2KB
DynamicDataSource.class 2KB
DynamicDataSource.class 2KB
TeacherLoginInterceptor.class 2KB
TeacherLoginInterceptor.class 2KB
StudentLoginInterceptor.class 2KB
StudentLoginInterceptor.class 2KB
LoginInterceptor.class 2KB
LoginInterceptor.class 2KB
GradeServiceImpl.class 2KB
GradeServiceImpl.class 2KB
Coursecomment.class 2KB
Coursecomment.class 2KB
Grade.class 2KB
Grade.class 2KB
Course.class 2KB
Course.class 2KB
StuExitSelect.class 1KB
StuExitSelect.class 1KB
DynamicDataSourceTransactionManager.class 1KB
DynamicDataSourceTransactionManager.class 1KB
AdminTestApp.class 1KB
Teacher.class 1KB
Teacher.class 1KB
CoursecommentCust.class 1KB
CoursecommentCust.class 1KB
DynamicDataSourceGlobal.class 1KB
DynamicDataSourceGlobal.class 1KB
DynamicDataSourceHolder.class 1KB
DynamicDataSourceHolder.class 1KB
SelectCourseMapper.class 1KB
SelectCourseMapper.class 1KB
CoursePlanMapper.class 1KB
CoursePlanMapper.class 1KB
StudentMapper.class 1KB
StudentMapper.class 1KB
SC.class 1KB
SC.class 1KB
TeacherMapper.class 966B
StudentService.class 966B
TeacherMapper.class 966B
StudentService.class 966B
CoursePlanService.class 949B
CoursePlanService.class 949B
CourseGrade.class 929B
CourseGrade.class 929B
AdminServiceImpl.class 885B
AdminServiceImpl.class 885B
SelectCourseService.class 869B
SelectCourseService.class 869B
TeacherService.class 864B
TeacherService.class 864B
IDUtil.class 842B
IDUtil.class 842B
CourseService.class 802B
CourseService.class 802B
CourseMapper.class 744B
CourseMapper.class 744B
GradeMapper.class 693B
GradeMapper.class 693B
共 2002 条
- 1
- 2
- 3
- 4
- 5
- 6
- 21
资源评论
Roc-xb
- 粉丝: 12w+
- 资源: 8207
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功