您的位置:网站首页 > 行业资讯 > 行业动态 > 正文

开奖结果【唯一授权官网】】】】】

  2016-01-19 02:58  中国润滑油信息网
开奖结果【唯一授权官网】】】】】 比方页面上让用户评分的功能,你完全能够放5个RdioButton让用户遴选分数,也能够用DropDownList来完成,但那样不如用五个星星来得炫来得直不雅

如今做页面现已不光限于完成功能了,更多的是要完成功能的一路寻求愈加漂亮的完成

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

像这么的星星评分插件用得十分普及,的确要变成你顺手捻来的小菜,任何一个不具备运用这么插件的前端法度榜样员都是毫无战争力的

这儿给咱们先容一个完成这么的评分感化的小插件jQuery Raty它提供的API适当丰盛真的是让人爱不释手详细文档及下载插件请移步这儿

根本运用

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

需求做的事情十分大略,在页面上放一个DIV,id取名为‘star’或许什么的随你以是爱,用来显现咱们的评分插件

当然,记得把下载下来的jquery.raty.js或许jquery.raty.min.js放在项目文件夹当中一路,由以是根据jQuery的,以是包括jQuery的脚本文件那是必需的这三个脚本文件都能够鄙人载后的压缩包内的js文件夹内找到直接仿制到你的项目响应目录中即可

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

然后,在页面中用标签将方才的脚本引入页面当中

如今,只需一句代码就能够完成评分了在页面增添如下句子:

运转咱们的网站法度榜样来看一下感化

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

开奖结果【唯一授权官网】】】】】

没出现星星不说,排版还一团乱但看到这个天气,咱们该当知道是短少响应的图像或许CSS格式表将压缩包内的img文件夹仿制到项目中,就该当能处置惩罚图像缺掉的疑问了

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

需求把稳的等于图像道路疑问,默许它会在根目录打img文件夹中的图像,要是你需求将图像放到其余当地,需求在代码中指定,这在后边先容

改写页面看感化:

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

图像是出来了,排版仍是乱的,而且有HTML符号 没有被准确解析这个符号代表空格,对应着 ,这儿该当是脚本里边的疑问以是这儿提出一个运用这个插件需求把稳确当地:jQuery哀求1.5及以上版别要是你一开始用的不是1.4的版别,祝贺你你不会出现这儿的疑问

如今将jQuery换掉落:

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" stymg开户送38元le="margin:0px auto;padding:0px;border:0px;" />

一路修正页面当中的引证

如今改写页面反省感化,统统正常了

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

指定图标

上面先容的是根本的运用,这个插件最让人爱好确当地在于他提供了十分多的API供咱们自界说,完成一些咱们想要的功能和感化

颠末界说path特征能够指定咱们要运用的图标的方位如今咱们将项目中的img文件夹移到其余当地,比方这儿我把它移到Styles文件夹下:

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

然后改写页面,相同会出现找不图像的同伴,这时刻,在脚本里边设置一下path特征:

650) this.width=650;" src="/html/uploads/allimg/160119/025R55010-9.gif" alt="仿制代码" style="margin:0px;padding:0px;border:none;background-color:rgb(206,224,227);" />

开奖结果【唯一授权官网】】】】】

650) this.width=650;" src="/html/uploads/allimg/160119/025R55010-9.gif" alt="仿制代码" style="margin:0px;padding:0px;border:none;background-color:rgb(206,224,227);" />

再去改写页面感化又出来了,而且咱们能够颠末反省页面的源码发明,图像的调用确凿是咱们指定确当地:

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

咱们能够运用自界说的图标,也能够运用其余自带的图标,压缩包内能够找到更大年夜的星星图标,以及勋章笑貌图标等

如今将doc文件夹img文件夹内的以是有图标仿制到咱们项目中的img文件夹中来变动图标颠末插件的starOff和starOn特征

下面将图标换成大年夜的:

只需写上响应图标的文件名即可,要是要运用勋章则该当是medal-on.png和medal-off.png,如今改写页面看感化,有点不空想:

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px;padding:0px;border:0px;" />

星星没有排成一排了,挤了两个下去是不是很古怪反省一下页面代码,发明包括咱们raty插件的那个DIV被加了个width:100px格式

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px;padding:0px;border:0px;" />

可咱们并没有给DIV设置任何格式啊,这只能是插件的脚本自个设置的因为在细姨星时,100的宽度刚好,如今换在大年夜www.517888.net星星了一排的方位不敷了以是被挤了两个下去这儿需求颠末size特征来设置一下宽度从而将五个大年夜星星从头显现到一排来:

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

设置显现文本

指针放到星星上默许显现‘bad’‘poor’‘reuglar’…能够自界说要显现的文本,颠末hint特征

如今换成1,2,3…

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

获取用户遴选的值

最为主要的环节等于获取用户所遴选的值插件提供了不止一种的措施能够让你获得用户的遴选值,这儿先容两种措施

颠末click工作来获取Click里界限说一个函数来处置惩罚获取的值,这个遴选值颠末’score’参数通报

这儿颠末弹窗显现出用户遴选的值:

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

第二种措施能够设置一个荫蔽的HTML元从来保留用户的遴选值,然后能够在脚本里边颠末jQuery选中这个元从来处置惩罚该值

如今在咱们的star DIV下面再放一个DIV,用来保留用户的遴选:

然后在脚本代码里将这个DIV设置为target,需求把稳的是,还要将targetKeep 特征设置为true,用户的遴选值才会被维持在方针DIV中,不然仅仅鼠标悬停时有值,而鼠标离开后这个值就会不见

如今,用户的遴选会鄙人面的DIV中被显现出来

650) this.width=650;" src="http://pic002.cnblogs.com/images/2012//.jpg" alt="" style="margin:0px auto;padding:0px;border:0px;" />

但原先咱们仅仅想拿它来暂时寄存这个值,并没想让它显现出来,以是能够让这个DIV一贯躲藏,咱们颠末这个DIV来获取值并进行咱们需求的各类处置惩罚,比方送回办事器保留到数据库等这儿相同运用弹窗显现这个值来做比如跟上面仅有不一样等于获取该值的措施不一样

转发自 :

http://www.cnblogs.com/Wayou/archive/2012/10/05/jQueryRaty.html

  本文系中国润滑油信息网(www.sinolub.com)原创作品,若需转载务必以超链接的形式注明出处,转载时严禁任何有悖原文的文字修改;本网有权对所有侵权行为进行责任追究。

分享到: QQ空间 新浪微博 人人网 开心网 腾讯微博 更多

相关新闻

友情提醒

本信息真实性未经中国润滑油信息网证实,仅供您参考。未经许可,请勿转载。已经本网授权使用的,应在授权范围内使用,并注明“来源:中国润滑油信息网”。

本网部分文章转载自其它媒体,转载目的在于传递更多行业信息,并不代表本网赞同其观点和对其真实性负责。在本网论坛上发表言论者,文责自负,本网有权在网站内转载或引用,论坛的言论不代表本网观点。本网所提供的信息,如需使用,请与原作者联系,版权归原作者所有。如果涉及版权需要同本网联系的,请在15日内进行。

官方微博

热点招商

奥吉星润滑油全国招商

奥吉星润滑油(天泰集团化工控股有限公司 股票代码:GTS)是由天泰控股的专业润滑油生产企业。 全国招商热线:400-0635-789

Gulf海湾石油面向全国招商

海湾石油(中国)有限公司是Gulf Oil International 在国内的唯一子公司。 现诚招经销商。 招商热线:0535-2161171

埃尼润滑油面向全国招商

埃尼是一家综合性能源企业,业务遍及83个国家,拥有84,000名员工,从事石油和天然气勘探、生产、运输、转化和营销活动,业务涉及化工、油田服务、建筑和工程领域。

关于我们|本网动态|广告服务|联系方式|免责声明|版权信息|法律顾问
CopyRight©2015-2016 Sinolub.Com All Rights Reserved 九鼎公司 版权所有
《中华人民共和国增值电信业务经营许可证》编号:粤B2-20050302
服务热线:0754-88650988 在线服务QQ:619128006 润滑油商机信息群:③:50693127 ④:65958932