我的第一个jquery插件

接触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);
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值