`
suxing
  • 浏览: 204033 次
  • 性别: Icon_minigender_1
  • 来自: 遵义
社区版块
存档分类
最新评论

我的第一个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);
 
分享到:
评论

相关推荐

    jquery插件使用方法大全

    第一个参数是异步请求的url,第二个为参数,第三个回调方法。 (4)的方法会在指定的Dom对象上绑定响应ajax执行的事件。 (5)同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 var ...

    eclipse插件 - jQuery

    我们在编写js的时候,如果采用了jquery框架,当然很希望Eclipse能帮我们完成代码自动完成的功能了,但Eclipse默认只是支持js的代码自动完成,利用这个插件,可以让Eclipse支持jquery的代码自动完成功能(前提:...

    Jquery插件最新开发电子书

    目前唯一一本专门讲解Jquery开发的图书,也介绍了很多已经存在的插件的使用方法,该书是刚刚发行,第一手英文资料,BS开放者不可或缺的一本分床头资料。

    jQuery 表单验证插件

    第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式) 支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。 支持4种状态的信息...

    jQuery Validation表单验证插件实例打包.rar

    jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...

    50多个强大的jQuery插件应用实例.doc

    jquery是近段时间里比较流行的一个javascript框架,不断有使用者开发出新的 jQuery插件。下面收集了50个开发者最喜欢使用的jQuery插件。这仅仅是第一个系列,你先品尝,第二道大餐即将到来。

    Msbox(基于Jquery的弹窗提示插件)

    /** ... * 这是我的第一个jquery插件,如果对本插件有更好的改进意见请发邮件lonely_net@163.com ,感谢使用。 * * @by the way: 由于时间关系,没有提供插件的min版本,各位如果需要请自己压缩。 */

    我的第一个jQuery插件 -- 圆角DIV

    NULL 博文链接:https://leon1509.iteye.com/blog/614396

    第二个jQuery文件 下载安装插件之一

    NULL 博文链接:https://wdhagl-126-com.iteye.com/blog/582309

    第一个使用jQueryCycle插件作为全屏背景幻灯片的jQuery插件_JavaScript_CSS_下载.zip

    第一个使用jQueryCycle插件作为全屏背景幻灯片的jQuery插件_JavaScript_CSS_下载.zip

    jquery插件开发

    jquery插件开发,教你如何开发第一个jquery插件

    我的第一个jQuery插件-伪3D图片播放

    NULL 博文链接:https://liu-da101.iteye.com/blog/1182797

    jquery-Modal-Plug(jQuery模态框插件)

    集成于jquery的一个模态框插件,在本插件中体现出了点击显示模态框,在一个模态框里面还有一个关闭按钮,如果有需求您可以使用第一个模态框,里面有多种加载方式仅供使用!

    一套基于jquery或javascript的插件库

    一套基于jquery或javascript的插件库 - 包含:轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件

    jquery 仿模态对话框插件

    jquery selector: 以 content 指定的 jquery selector 筛选出第一个 jquery 对象的 HTML 文本. c. url: 以 iframe 加载 content 页面内容. 调用例子: $.modalbox.show({ modal: true, // 模态 contentType: ...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款...

    jquery插件:ajax和iframe加载提示效果

    这是本人发布的第一个jquery插件,有什么意见可以提,我csdn博客里有使用说明.

    jquery.connectingLine:这个 jQuery 插件有助于用一条线连接两个元素

    第 - 1 步:所需文件 - required/script/jquery-1.11.0.min.js required/script/jquery.svg.min.js required/script/jquery.connectingLine.js [removed][removed] &lt;script type="text/javascript

    sh-menu:创建我的第一个 jQuery 插件脚本的迷你项目

    sh-菜单创建我的第一个 jQuery 插件脚本的迷你项目这是一个旧的迷你项目,创建于 2009 年左右。 创建一个 jQuery 插件是一个小练习。

    第三方的jQuery Tag插件

    发布问题时需要将问题对应到多个标签, 为了帮助用户快速而方便地完成操作, 可以借助于一个第三方的jQuery Tag插件, 该插件允许输入多个Tag, 并且拥有自动提示功能

Global site tag (gtag.js) - Google Analytics