fly63前端网

www.fly63.com

首页文章资源工具教程 栏目
  • 关于我们
  • 网站投稿
  • 赞助一下
搜索

在线工具_工作生活好帮手

打造各种简单、易用、便捷的在线工具,网友无需注册和下载安装即可使用

点击查看

关闭

提交网站

Raty
分享
复制链接
新浪微博
QQ 好友

扫一扫分享

网站地址:https://wbotelhos.com/raty
GitHub:https://github.com/wbotelhos/raty
网站描述:一个非常棒的jQuery 评分插件

使用jquery Raty,可以很方便的在页面上嵌入一个评分组件  


引用以下文件

<script type="text/javascript" src="demo/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/jquery.raty.min.js"></script>


html结构

<div style="width:500px; margin:100px auto;">
  <div class="demo">
    <div id="function-demo" class="target-demo"></div>
    <div id="function-hint" class="hint"></div>
  </div>
  <div class="demo">
    <div id="function-demo1" class="target-demo"></div>
    <div id="function-hint1" class="hint"></div>
  </div>
</div>


js调用方法

$(function() {
    $.fn.raty.defaults.path = 'lib/img';
    $('#function-demo').raty({
        number: 5, //多少个星星设置
        targetType: 'hint', //类型选择,number是数字值,hint,是设置的数组值
        path: 'demo/img',
        hints: ['差', '一般', '好', '非常好', '全五星'],
        cancelOff: 'cancel-off-big.png',
        cancelOn: 'cancel-on-big.png',
        size: 24,
        starHalf: 'star-half-big.png',
        starOff: 'star-off-big.png',
        starOn: 'star-on-big.png',
        target: '#function-hint',
        cancel: false,
        targetKeep: true,
        targetText: '请选择评分',
        click: function(score, evt) {
            alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
        }
    });
    $('#function-demo1').raty({
        number: 10, //多少个星星设置
        score: 2, //初始值是设置
        targetType: 'number', //类型选择,number是数字值,hint,是设置的数组值
        path: 'demo/img',
        cancelOff: 'cancel-off-big.png',
        cancelOn: 'cancel-on-big.png',
        size: 24,
        starHalf: 'star-half-big.png',
        starOff: 'star-off-big.png',
        starOn: 'star-on-big.png',
        target: '#function-hint1',
        cancel: false,
        targetKeep: true,
        precision: false, //是否包含小数
        click: function(score, evt) {
            alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
        }
    });
});


链接: https://fly63.com/nav/264

more>>
相关栏目
jQuery之家
致力于搜集和整理各种jQuery插件,jQuery特效...
官网
fullPage.js
jQuery全屏滚动插件
官网GitHub
Waterfall.js
瀑布流无限加载插件
官网GitHub
Bootstrap-waterfall
一款基于Bootstrap仿Pinterest网站的网格瀑布流插件
官网GitHub
Jcrop
一个功能强大的 jQuery 图像裁剪插件
官网GitHub
jcarousel
jQuery轮播图插件
官网GitHub
Parallax.js
一款jQuery滚动视觉差插件
官网GitHub
vegas
一个jQuery / Zepto幻灯片插件
官网GitHub
paroller.js
一款轻量级的页面滚动视觉差特效jquery插件
官网GitHub
lazyload.js
jquery图片懒加载插件
官网GitHub
alertify.js
jQuery酷炫的各种消息提示插件
官网GitHub
pickadate.js
一个轻量级的 jQuery 日期选择插件
官网GitHub
chosen.js
基于jquery的下拉选择框美化插件
官网GitHub
threesixty.js
360度产品图片预览jQuery插件
官网GitHub
textillate.js
实现动感的 CSS3 文本动画的简单插件
官网GitHub
jquery.sticky-sidebar.js
一款高性能的js固定侧边栏插件
官网GitHub

手机预览