html评分图标,Bootstrap图标实现移动端的星星评分功能

利用Bootstrap图标实现星星评分功能：

评星

.pf .glyphicon {

color: orange;

user-select: none;

padding: 0px 10px;

}

.pf li {

padding: 10px 0px;

font-size:16px;

}

总体
菜品
服务

提交

var tip=['','1分','2分','3分','4分','5分'];

$('.pf').on('mousedown','.glyphicon',function(){

if($(this).hasClass('glyphicon-star')){

var score = 0;

$(this).parent().attr('data-rh-score' ,score);

$(this).addClass('glyphicon-star-empty').removeClass('glyphicon-star').siblings('.glyphicon').addClass('glyphicon-star-empty').removeClass('glyphicon-star');

$(this).nextAll('.tip').text(tip[0]);

}else{

var score = $(this).index();

$(this).parent().attr('data-rh-score' ,score);

$(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll('.glyphicon').addClass('glyphicon-star').removeClass('glyphicon-star-empty');

$(this).nextAll('.tip').text(tip[score]);

}

});

// var fs1 = $('#star1').nextAll('.rater-star-result').text();

效果：

源码下载路径：

html评分图标,Bootstrap图标实现移动端的星星评分功能相关推荐

Bootstrap图标实现移动端的星星评分功能
利用Bootstrap图标实现星星评分功能: <html lang="zh-cn"> <head><meta http-equiv="Con ...
【Flutter从入门到实战】⑪、豆瓣案例-1、星星评分Widget、虚线Widget、TabbarWidget、BottomNavigationBarItem的封装、初始化配置抽取
Flutter从入门到实战一共分为23个系列 ①(Flutter.Dart环境搭建篇) 共3个内容已更新 ②(Dart语法1 篇) 共4个内容已更新 ③(Dart语法2 篇) 共2个内容已更新 ...
Bootstrap 字体图标 Bootstrap Glyphicon Components
基本用法: <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span&g ...
（转）基于Metronic的Bootstrap开发框架经验总结（4）--Bootstrap图标的提取和利用...
http://www.cnblogs.com/wuhuacong/p/4762924.html 在前面的一篇随笔<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模 ...
web元件库、axure元件库、通用元件库、常用web组件、常用表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.常用web组件.常用表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴 ...
html上下箭头动态效果,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果...
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
css 让图标上下跳,使用CSS和Bootstrap图标制作上下跳动的指示箭头动画效果
有时侯页面很长,需要指示箭头告诉用户下面还有东西.可以用纯CSS的方法实现. HTML:添加一个链接,可修改锚点点击时滑动到指定位置,这里使用了Bootstrap 3.x版本的一个向下箭头作为图标. ...
web元件库、axure元件库、元件库、web组件、控件、表单、框架、数据表单、导航栏、边框、图标、列表、日期时间选择器、评分组件、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、时间轴
web元件库.axure元件库.通用元件库.web组件.控件.表单.框架.数据表单.导航栏.边框.图标.列表.日期时间选择器.评分组件.穿梭框.输入框.步骤条.图表组件.数据可视化.后台模板.时间轴. ...
bootstrap 图标glyphicons图标符号不正常显示解决办法
bootstrap 图标icon符号图标glyphicons不正常显示解决办法: 分享供各位参考: 1.在ff/http:的地址栏中输入"about:config",即进入配置界面 ...
Bootstrap图标库下载到本地后的引用
Bootstrap图标库的引用 Bootstarp图标库的下载地址下载解压后的文件目录 Ⅰ.该目录一直往下滑动有以下的一个 .css文件,将其复制下来.(可复制到你的项目文件的静态文件中) 我放的位 ...

html评分图标,Bootstrap图标实现移动端的星星评分功能

html评分图标,Bootstrap图标实现移动端的星星评分功能相关推荐

最新文章

热门文章