六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 48|回复: 0

我的第一个jquery插件

[复制链接]

升级  52%

32

主题

32

主题

32

主题

秀才

Rank: 2

积分
128
 楼主| 发表于 2013-2-7 17:57:05 | 显示全部楼层 |阅读模式
接触jquery有段时间了,终于照着写了我的第一个jquery插件,用来生成fusinocharts的html代码,我注意到用fusincharts提供的函数生成chart空白边距太大,最明显的在标题和图形之间空得太多,但我不能控制它。于是我将flash生成在一个div内,且将它设置置于底层,固定好div高宽,让内层的flash放大,这样就得到我想要的大小又没有多于的空白边距了。

(function($) {   $.fn.FusionChart = function(options) {      var opts = $.extend({}, $.fn.FusionChart.defaults, options);  var width=opts.width;  var height=opts.height;  var zoom=opts.zoom;  var src=opts.src;  var data=opts.data;  var title=opts.title;  var bgcolor=opts.bgcolor;  var titH=Math.floor(height*0.3);  if(!title)titH=0;  return this.each(function() {     $this = $(this); var tit=$('<div></div>'); tit.text(title); var swf=$('<div></div>'); var swfWidth=Math.floor(width*zoom); var swfHeight=Math.floor(height*zoom); swf.html(swfHTML(swfWidth,swfHeight,src,data)); var marginTop=-1*Math.floor((height-titH)*(zoom-1)/2); var marginLeft=-1*Math.floor(width*(zoom-1)/2); var con=$('<div></div>'); con.append(swf).append(tit); con.css({width:width,height:height,'text-align':'center','margin-right':'auto','margin-left':'auto',overflow:'hidden'}); con.css({position:'relative'}); swf.css({width:swfWidth,height:swfHeight,'margin-top':marginTop,'margin-left':marginLeft}); swf.css({position:'absolute',top:0,left:0}); $this.empty().append(con);  tit.css({'text-align':'center','margin-right':'auto','margin-left':'auto',overflow:'hidden','font-size':'13px'}); tit.css({position:'absolute',top:5,left:0,width:'100%'});  });        function swfHTML(width,height,src,dataXML,bgcolor){         var swfNode='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="'+ width +'" height="'+ height +'">"'; swfNode += '<param name="movie" value="'+ src+'?chartWidth='+width+'&chartHeight='+height+'" />'; swfNode += '<param name="quality" value="high" />'; swfNode += '<param name="wmode" value="Opaque" />'; swfNode += '<param name="bgcolor" value="'+bgcolor+'" />'; swfNode += '<param name="FlashVars" value="&dataXML='+dataXML+'" />'; swfNode += '<embed src="'+src+'?chartWidth='+width+'&chartHeight='+height+'" '; swfNode += 'flashVars="&dataXML='+dataXML+'" '; swfNode += 'quality="high" width="'+width+'" height="'+height+'" wmode="Opaque" bgcolor="'+bgcolor+'"'; swfNode += 'type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'; swfNode += '</object>';         return swfNode;      }        }      $.fn.FusionChart.defaults = {      width:250,  height:200,  src:'',  data:'',  title:'',  zoom:1,  bgcolor:'#FFFFFF'   }})(jQuery);
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表