如何实现星星评价(jquery.raty.js插件)
1、引入jquery.js文件
2、引入jquery.raty.js
3、页面中放在这个:<span class="readOnly" data-path="images" ><i>4.5</i></span>
4、js:
function star(obj,num){ $(obj).raty({ path: function() { return this.getAttribute('data-path');//路径 }, readOnly: true, score: num //(starr)这个4.5就是星星右边的数值 }); }; var ac = $('.starr').find('i').text(); star('.readOnly',ac);
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
JS实现评价的星星功能
刚开始接触写星星评价时,哇!估计脑子刚被驴踢了,竟然想到了最笨的办法-手工画五角星.妈呀! css样式都写了好大一串,还沾沾自喜终于画出来了,然后瞅一瞅旁边的妹子写得怎么样了,哇!人家机智的!直接用符号★就解决了!!!唉,智商捉急呀! 先上图看看吧: 虽然简单,还是有几个注意的地方: 1. 未点击时的hover效果,星星会随鼠标移动亮起来喔. 2. 点击后关闭hover效果. 3. 点击同一颗星星,星星可以随时换色. 具体代码展示: <!doctype html> <html> &
-
JavaScript实现星星等级评价功能
本文实例为大家分享了js星星等级评价的具体代码,供大家参考,具体内容如下 效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container{ float:left; } .score{ float: left; position:
-
如何实现星星评价(jquery.raty.js插件)
1.引入jquery.js文件 2.引入jquery.raty.js 3.页面中放在这个:<span class="readOnly" data-path="images" ><i>4.5</i></span> 4.js: function star(obj,num){ $(obj).raty({ path: function() { return this.getAttribute('data-path');//路径
-
jQuery结合jQuery.cookie.js插件实现换肤功能示例
本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu
-
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
本文实例讲述了jQuery animate()实现背景色渐变效果的处理方法.分享给大家供大家参考,具体如下: jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 核心代码: $(function(){ $("#cdiv").animate( { backgroundColor:'#FF0000' },1000 ) }) 完整代码如下: <!DOCTYPE html> <html> <head> <meta
-
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传. 最近在使用jquery.form.js提交包含文件的表单时,碰到了一个问题:当碰上网速较慢时,而我们又设置了timeout时,例如: var options = { timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求 } 我们的页面会死在这里,贴上F12开发者工具返回的结果: 此时,我们并没有处理错误的回调函数,而百度出来的例子中也只有这两个回调函数: beforeSubmit: s
-
jQuery.datatables.js插件用法及api实例详解
1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属性配置 "bPaginate": true, //翻页功能 "bLengthChange": true, //改变每页显示数据数量 "
-
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交成功? 我简单使用了一下,jQuery Form插件有一下优点: 1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置. 5.支持提交多种类型数据.如:
-
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
可以实现基于jQuery实现汉字转换成拼音代码.这是一款基于jQuery.Hz2Py.js插件实现的汉字转拼音特效.插件自行下载.使用方法如下(注意修改jq的引入路径). <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>基于jQuery实现汉字转换成拼音代码</title> <
-
jquery.validate.js插件使用经验记录
最近做项目,需要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [例子如下] 1.前台页面 <form id="form1" method="post"> 用户名:<input type="text" id="UserName" name="UserName" /><!--<span id="name_error&q
-
jQuery pager.js 插件动态分页功能实例分析
本文实例讲述了jQuery pager.js 插件动态分页功能.分享给大家供大家参考,具体如下: pager.js 代码 function Page(opt){ var set = $.extend({num:null,startnum:1,elem:null,callback:null},opt||{}); if(set.startnum>set.num||set.startnum<1){ set.startnum = 1; } var n = 0,htm = ''; var clickpa
-
内容滑动切换效果jquery.hwSlide.js插件封装
经过前两部分的讲解,我们大概知道内容滑动切换的基本开发思路和技巧,现在我们在第三部分将前面两部分的代码进行优化,封装成一个jQuery插件:jquery.hwSlide.js.开发者可以轻松创建各种图片轮播效果.焦点图效果.图文混排滑动效果. 下载源码 hwSlider具有以下特性: 多个参数定制,满足不同项目需求. 支持移动端触控滑动. 支持图文混排,支持各种html元素. 响应式自适应屏幕尺寸. 同一页面支持多个滑动切换. 轻量级的,压缩版不到4KB. 支持所有现代浏览器,支持
随机推荐
- Amazing ASP.NET Core 2.0
- 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
- Python单例模式实例分析
- 巧用ASP.NET预编译Web应用程序规避调用延迟的方法
- jquery+ajax+C#实现无刷新操作数据库数据的简单实例
- 不能忽略c#中的using和as操作符的用处
- 在Windows系统下使用PHP生成Word文档的教程
- jQuery.ajax 跨域请求webapi设置headers的解决方案
- jQuery使用$.ajax进行异步刷新的方法(附demo下载)
- Powershell使用WINDOWS事件日志记录程序日志
- Linux shell脚本全面学习入门
- jquery遍历input取得input的name
- 详谈$.data()的用法和作用
- Android采用双缓冲技术实现画板
- C#中的Timer和DispatcherTimer使用实例
- php中将汉字转换成拼音的函数代码
- 实例解析Java设计模式编程中的适配器模式使用
- Java的Socket通讯基础编程完全指南
- 模仿OSO的论坛(三)
- vue的无缝滚动组件vue-seamless-scroll实例