一个非常棒的星星评分插件

现在做网页已经不仅限于实现功能了,更多的是要实现功能的同时追求更加美观的实现。比如页面上让用户评分的功能,你完全可以放5个RdioButton让用户选择分数,也可以用DropDownList来实现,但那样不如用五个星星来得炫来得直观。

  像这样的星星评分插件用得非常普遍,几乎要成为你随手捻来的小菜,任何一个不具备使用这样插件的前端程序员都是毫无战斗力的。

  这里给大家介绍一个实现这样的评分效果的小插件jQuery Raty。它提供的API相当丰富真的是让人爱不释手。详细文档及下载插件请移步这里

基本使用

  下面我们来实际操作,运用一下这个有爱的小插件。

  需要做的事情非常简单,在页面上放一个DIV,id取名为‘star’或者什么的随你所以爱,用来显示我们的评分插件。

<div id="star"></div>

当然,记得把下载下来的jquery.raty.js或者jquery.raty.min.js放在项目文件夹当中。同时,由于是基于jQuery的,所以包含jQuery的脚本文件那是必需的。这三个脚本文件都可以在下载后的压缩包内的js文件夹内找到。直接复制到你的项目相应目录中即可。

  然后,在页面中用<Script>标签将刚才的脚本引进页面当中。

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.raty.js" type="text/javascript"></script>

现在,只需一句代码就可以实现评分了。在页面添加如下语句:

<script type="text/javascript">

        $(‘#star‘).raty();

      </script>

运行我们的网站程序来看一下效果。

  没出现星星不说,排版还一团乱。但看到这个情形,我们应该知道是缺少相应的图片或者CSS样式表。将压缩包内的img文件夹复制到项目中,就应该能解决图片缺失的问题了。

  需要注意的就是图片路径问题,默认它会在根目录打img文件夹中的图片,如果你需要将图片放到其他地方,需要在代码中指定,这在后面介绍。

  刷新页面看效果:

  图片是出来了,排版还是乱的,而且有HTML符号&#160没有被正确解析。这个符号代表空格,对应着&nbsp,这里应该是脚本里面的问题。所以这里提出一个使用这个插件需要注意的地方:jQuery要求1.5及以上版本。如果你一开始用的不是1.4的版本,恭喜你你不会出现这里的问题。

  现在将jQuery换掉:

  同时修改页面当中的引用。

<script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>

现在刷新页面查看效果,一切正常了。

指定图标

  上面介绍的是基本的使用,这个插件最让人喜爱的地方在于他提供了非常多的API供我们自定义,实现一些我们想要的功能和效果。

  通过定义path属性可以指定我们要使用的图标的位置。现在我们将项目中的img文件夹移到其他地方,比如这里我把它移到Styles文件夹下:

  然后刷新页面,同样会出现找不图片的错误,这时候,在脚本里面设置一下path属性:

<script type="text/javascript">

       $(‘#star‘).raty({

           path:"Styles/img"

       });

   </script>

再去刷新页面效果又出来了,并且我们可以通过查看页面的源码发现,图片的调用确实是我们指定的地方:

  我们可以使用自定义的图标,也可以使用其他自带的图标,压缩包内可以找到更大的星星图标,以及勋章笑脸图标等。

  现在将doc文件夹img文件夹内的所以有图标复制到我们项目中的img文件夹中来。更改图标通过插件的starOff和starOn属性。

  下面将图标换成大的:

<script type="text/javascript">

       $(‘#star‘).raty({

           path:"Styles/img",

           starOff: ‘star-off-big.png‘,

           starOn: ‘star-on-big.png‘

       });

   </script>

只需写上相应图标的文件名即可,如果要使用勋章则应该是medal-on.png和medal-off.png,现在刷新页面看效果,有点不理想:

  星星没有排成一排了,挤了两个下去。是不是很奇怪。查看一下页面代码,发现包含我们raty插件的那个DIV被加了个width:100px样式。

  可我们并没有给DIV设置任何样式啊,这只能是插件的脚本自己设置的。因为在小星星时,100的宽度刚好,现在换在大星星了一排的位置不够了所以被挤了两个下去。这里需要通过size属性来设置一下宽度从而将五个大星星重新显示到一排来:

<script type="text/javascript">

       $(‘#star‘).raty({

           path:"Styles/img",

           starOff: ‘star-off-big.png‘,

           starOn: ‘star-on-big.png‘,

           size:24

       });

   </script>
时间: 2024-10-07 05:23:49

一个非常棒的星星评分插件的相关文章

jquery 星星评分插件

展示: 实现方法: 1.html引用star-grade.js <script type="text/javascript" src="Scripts/star-grade.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".sstar").BindStars();//使用属性da

HTML5商城开发三 jquery 星星评分插件

展示: 实现方法: 1.html引用star-grade.js <script type="text/javascript" src="Scripts/star-grade.js"></script> <script type="text/javascript"> $(document).ready(function () { $(".sstar").BindStars();//使用属性da

活动列表+星星评分功能(源码下载)

这是一个Demo,内容主要是模仿一些网站的数据列表,实现评分功能.放缩功能. 下面是小Demo: 工具 一个星星评分插件+ jQuery1.8.2 思路 思路很简单,通过整张表格是由后台生成(StringBuilder)然后发送给前台页面填充出来的. 当点击点评按钮后,会调用jQuery的slideToggle()方法,执行动画. 关于Ajax部分 本Demo一共两处使用Ajax,第一处是加载页面的时候,生成页面table,第二处是点击提交的时候,将数据提交给服务器. 代码特别简单,就不贴出来了

jQuery 评分插件(转)

评分效果的小插件jQuery Raty.它提供的API相当丰富真的是让人爱不释手.详细文档及下载插件请移步这里. 基本使用 下面我们来实际操作,运用一下这个有爱的小插件. 需要做的事情非常简单,在页面上放一个DIV,id取名为‘star’或者什么的随你所以爱,用来显示我们的评分插件. 1 <div id="star"></div> 当然,记得把下载下来的jquery.raty.js或者jquery.raty.min.js放在项目文件夹当中.同时,由于是基于jQu

星星评分

一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no

为Web程序员准备的10个最棒的jQuery视频插件

众多的插件使得 jQuery 成为一个非常流行的框架.现在网站中视频和音频的使用比之前要频繁的多了.而使用jQuery插件可以让这个步骤变得简单很多.因此这里收集了10个非常棒的jQuery视频插件供你选择. 1. Bigvideo.js 这个插件可以很方便的为你的网站添加视频背景.它可以无声的播放背景视频(或一系列视频).你也可以用它制作视频播放列表. BigVideo.js还可以显示大背景图片,这对于不支持自动播放视频的设备来说是非常适合的. 2. jPlayer jPlayer 是一个用J

为开发者们准备的 10 款超棒的 jQuery 视频插件

jQuery 是一种快速.简洁的 JavaScript 库,可以简化 HTML 文档遍历.事件处理.动画和 Ajax 交互,能快速进行 web 开发.一个 jQuery 插件基本上是一种新方法,用来扩展 jQuery 原型对象.当扩展原型对象时,所有的 jQuery 对象就会启用并且能够添加和继承其他的任何方法. 1. Bigvideo.js BigVideo.js 是一个 jQuery 视频插件,能让用户很方便将视频作为网站的背景并且能够生成自适应的视频背景.它可以播放一个无声视频(或一系列视

Android自定义星星评分控件,高效

下面为控件的实现历程: 此控件高效,直接使用ondraw绘制,先亮照: 由于Android自身的星星评分控件样式可以改,但是他的大小不好调整的缺点,只能用small normal这样的style调整,自定义不强,因此击发了我自定义星星控件的欲望. 星星评分控件的设计,大体规划为: 需要两张图片,一颗亮星星,一颗空星星:(当然图片不一定是星星,其他图片也可以,现在实验就用星星就好了)星星数量,间距可以自定义,星星的最小步进为0.1,在用户使用的时候与Android自带的方法一样. 星星控件大体分为

20 个最棒的 jQuery Tab 插件

jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 jQuery 插件,可以创建基于 Tab 的内容滑块,并提供一个可定制的滑块控制. 2. jQuery Contact Tabs 这是一个 jQuery 的表单生成器,用来创建使用 Ajax 技术的联系表单.提供 12 种不同的表单元素和客户端验证,提供不同的主题风格,可添加多个 Tab. 3.