php 投票评选插件,jQuery_投票系统显示结果--jQuery插件,投票系统是网站中十分常见的 - phpStudy...
投票系统显示结果--jQuery插件
投票系统是网站中十分常见的系统,显示结果也是十分常见的。最近因为项目需要开发了一个投票结果显示jQuery插件。首先还是来看一下运行效果如图1所示。
该插件使用步骤
一、引入css文件
首先页面引入css样式文件‘votecss.css’,他是投票结果正常显示必不可少的。具体代码如下所示:
二、引入jQuery的就是源文件
该插件是以jQuery为基础的所以引入jQuery插件是必须的具体代码如下:
三、引入投票插件
引入自己开发的投票插件“Studyplay_vote.js”,具体代码如下所示:
四、页面调用
首先在页面中添加一个ID为‘z’的div元素,编写JavaScript代码显示投票结果具体代码如下:
$(document).ready(function(){
$("#z").study_vote([{"options":"好评","data":"16","color":"#39c"}, {"name":"中评","data":"10","color":"#f00"},{"name":"差评","data":"30","color":"#000"}]);
});
该段代码运行的效果如图一所示。
说明:该插件存在两个参数
1、options 必填插件他是一个object数据具体形式如下所示。
[{},{}...{}]该数组的个数就是投票选项的个数,如果投票有十个选项这个数组必须为10个; 其中{}为json数据,共有三项。
"name"表示投票选项的名称;
"data"表示该选项投票数;
"color"表示该选项柱形颜色。
2、totle可选参数,可以省略不写。表示投票的总数量,主要用于多项选择投票计算百分比。
该插件具体代码
$.fn.study_vote= function(options,totle){
var settings=options;
if(totle!=null)
{
if(isNaN(totle))
{
alert('参数错误');
return;
}
}
if(typeof(settings)!='object')
{
alert('参数错误');
return;
}
var container = jQuery(this);
container.html('
');
var study_voteCount=0;
if(totle==null||totle=='')
{//单项投票
for(i=0;i
{
study_voteCount += parseInt(settings[i].data);
}
}
else
{//多项投票
study_voteCount = parseInt(totle);
}
var study_votestr="";
for(i=0;i
{
var studyplay_present=settings[i].data/study_voteCount*100;
if(parseInt(studyplay_present)!=studyplay_present)
{
studyplay_present=studyplay_present.toFixed(2);
}
study_votestr +='
';
}
container.find('#studyvote').html(study_votestr)
}
本文示例源代码或素材下载相关阅读:
AJAX教程(13):通过XMLHTTP把文本文件载入HTML元素
validator验证控件使用代码
CSS Hack 汇总速查手册浏览器兼容必会
POP3 命令简介
“添加/删除程序”窗口启动速度变得更快
C++永久对象存储 (Persistent Object Storage for C++)
JavaScript初级教程(第三课)
巧妙利用Win7中自带的功能为U盘加密
sqlsever为标识列指定显式值
asp.net对URL含有中文参数的转换
通过SQL语句直接把表导出为XML格式
如何用Response.Redirect方法传递汉字
javascript判断iphone/android手机横竖屏模式的函数
mysql中使用UDF自动同步memcached效率笔记
php 投票评选插件,jQuery_投票系统显示结果--jQuery插件,投票系统是网站中十分常见的 - phpStudy...相关推荐
- 图片放大显示的jQuery插件
从网上下载了一个jquery的图片放大显示插件,效果如下 前台代码调用: 先引入js <script type="text/javascript" src="../ ...
- xp系统显示无打印机服务器,Xp系统显示“Windows无法打开添加打印机”的处理方法...
打印机是我们在日常办公中,经常会使用到的一个工具.不过,最近有位xp系统用户反馈自己刚买了一台打印机,想在电脑中添加打印机时,发现打印机添加不上,提示"Windows无法打开添加打印机.操作 ...
- php怎么使用插件下载,怎么使用下载的jquery插件
使用下载的jquery插件方法:1.将下载的文件放在网页的同一目录下,就可以使用jQuery:2.通过CDN来引用,代码为[ 本教程操作环境:windows10系统.jquery1.10.2,本文适用 ...
- javascript中打印对象显示[object object]_扒一扒JavaScript中不常见的一些object
前言 今天仔细阅读了MDN的这篇guide:Using XMLHttpRequest,在里面发现了好多以前听都没听过的概念,尤其是那些不为人知的Object,所以在这里特地把它们拎出来讲一下,不求多深 ...
- ajax上传图片成功但不显示,jQuery插件之ajaxFileUpload(异步上传图片并实时显示,并解决onchange后ajaxFileUpload失效问题)...
参考学习: 第一篇:http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇:http://www.jb51.net/a ...
- 15款提高表格操作的jQuery插件
table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了.大多数前端er都把网页中的table标签替 换为div,主要就是因为div要比table更容易添加CSS样式 ...
- Web 开发最有用的 jQuery 插件集锦
一.Responsive SlideShow--图片滑块展示 1.Responsive Carousel responsive-carousel 是一个内容传送带插件,支持鼠标.触摸和键盘操作.默认包 ...
- 12款经典图片轮播jquery插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 100个优秀jQuery插件精选
100个优秀jQuery插件精选 在2012年里出现了很多很棒的jQuery插件,如结合CSS3的jQuery动画.强大的支持多设备浏览的响应性布局设计.使用视频作为网页设计背景.jQuery图像幻灯 ...
- 20款超炫的Jquery插件
jQuery是开发者的福音.2006年8月jQuery发布之前,Web开发者经历着痛苦的开发过程.从简单的菜单栏到复杂的内容滚动条,所有的功能都需要开发者亲自开发,且花费比现在更多的时间.经历过没有j ...
最新文章
- 部分样式在360和ie上不能显示_Adobe Photoshop添加图层样式全方面介绍
- python3 sys.stdout.write print 区别
- windows组件中没有IIS解决方法
- android离线宝,Android 离线安装宝典
- 疯子的算法总结(二) STL Ⅰ 算法 ( algorithm )
- sublime text 3 安装、添加命令行启动、汉化、注册码
- python自动批量发邮件脚本_Python实现自动发送邮件功能
- mysql union 用法 update_mysql---union的用法
- c#+mysql图片存数据库_C#图片存入数据库及其读出显示
- oracle光标位置无效,解决在Form表单中光标移动不了问题
- Python爬虫开发:反爬虫措施以及爬虫编写注意事项
- paip.银行卡号的发卡行归属地查询
- linux自定义服务
- Mysql中修改字段类型、长度以及添加删除列
- vue网易云二维码登录
- 衣带渐宽终不悔为伊消得人憔悴,土蜂蜜科技终成正果
- Open3d数据滤波和点云分割
- 微信公众号开发踩坑指南(3)——公众号返回超链接点击跳转并自动关闭
- Docker中修改Tomcat端口号
- PHP 类型提示 type hinting