效果:
思路:前台JS实现动态数据效果,后台可以拼接字符串或者用JSON加载数据
代码:
<%@ Page Language="C#"AutoEventWireup="true"CodeBehind="tiao.aspx.cs"Inherits="qiantaoFlash.tiao"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>青苹果条形统计</title><linkhref="CSS/jQuery.spider.poll.css"rel="stylesheet"type="text/css"/><scripttype="text/javascript"src="js/jquery-1.4.3.min.js"></script><scripttype="text/Javascript"src="js/jQuery.spider.poll-min.js"></script><scripttype="text/javascript">vardata="{root:[{id:'10000',name:'先结婚',value:'50'},{id:'10002',name:'先事业',value:'50'}]}";vardata1="{root:[{id:'10000',name:'人类联盟',value:'60'},{id:'10001',name:'兽人部落',value:'25'},{id:'10003',name:'不死亡灵',value:'15'},{id:'10004',name:'暗夜精灵',value:'10'}]}";vardata2="{root:[{id:'10000',name:'学历',value:'0'},{id:'10001',name:'能力',value:'100'}]}";
$(document).ready(function(){
$("#poll_a").poll("poll1",{
title:'先结婚还是先事业',
width:'600px',
data:data
});
$("#poll_b").poll("poll2",{
title:'青苹果魔兽争霸各个种族实力?',
titleColor:'red',
width:'600px',
data:data1,
showPoll:true,
multiple:true});
$("#poll_c").poll("poll3",{
title:'学历重要还是能力重要',
titleColor:'blue',
width:'600px',
data:data2,
multiple:false});
$("#getPollData1").click(function(){
$("#poll_b").getChecked().each(function(i,n){
alert($(n).val());
});
});
$("#getPollData2").click(function(){
$("#poll_c").getChecked().each(function(i,n){
alert($(n).val());
});
});
});</script></head><body><divid="poll_a"></div><divid="poll_b"></div><divstyle="text-align:center;"><inputtype="button"id="getPollData1"value="获得第一个投票的值"/></div><divid="poll_c"></div><divstyle="text-align:center;"><inputtype="button"id="getPollData2"value="获得第二个投票的值"/></div></body></html>
Demo下载:
http://files.cnblogs.com/files/xinchun/tongjitu.zip