接触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);
分享到:
相关推荐
第一个参数是异步请求的url,第二个为参数,第三个回调方法。 (4)的方法会在指定的Dom对象上绑定响应ajax执行的事件。 (5)同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。 var ...
我们在编写js的时候,如果采用了jquery框架,当然很希望Eclipse能帮我们完成代码自动完成的功能了,但Eclipse默认只是支持js的代码自动完成,利用这个插件,可以让Eclipse支持jquery的代码自动完成功能(前提:...
目前唯一一本专门讲解Jquery开发的图书,也介绍了很多已经存在的插件的使用方法,该书是刚刚发行,第一手英文资料,BS开放者不可或缺的一本分床头资料。
第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式) 支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。 支持4种状态的信息...
jQuery Validation表单验证插件实例合集,是锋利的JQuery第七章中的一个典型实例,一步步向大家讲解如何使用基于jQuery的表单验证插件jquery.validate.js和jquery.validate.messages_cn.js的使用方法,一共包含了7个...
jquery是近段时间里比较流行的一个javascript框架,不断有使用者开发出新的 jQuery插件。下面收集了50个开发者最喜欢使用的jQuery插件。这仅仅是第一个系列,你先品尝,第二道大餐即将到来。
/** ... * 这是我的第一个jquery插件,如果对本插件有更好的改进意见请发邮件lonely_net@163.com ,感谢使用。 * * @by the way: 由于时间关系,没有提供插件的min版本,各位如果需要请自己压缩。 */
NULL 博文链接:https://leon1509.iteye.com/blog/614396
NULL 博文链接:https://wdhagl-126-com.iteye.com/blog/582309
第一个使用jQueryCycle插件作为全屏背景幻灯片的jQuery插件_JavaScript_CSS_下载.zip
jquery插件开发,教你如何开发第一个jquery插件
NULL 博文链接:https://liu-da101.iteye.com/blog/1182797
集成于jquery的一个模态框插件,在本插件中体现出了点击显示模态框,在一个模态框里面还有一个关闭按钮,如果有需求您可以使用第一个模态框,里面有多种加载方式仅供使用!
一套基于jquery或javascript的插件库 - 包含:轮播、标签页、滚动条、下拉框、对话框、搜索提示、城市选择(城市三级联动)、日历等组件
jquery selector: 以 content 指定的 jquery selector 筛选出第一个 jquery 对象的 HTML 文本. c. url: 以 iframe 加载 content 页面内容. 调用例子: $.modalbox.show({ modal: true, // 模态 contentType: ...
73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款...
这是本人发布的第一个jquery插件,有什么意见可以提,我csdn博客里有使用说明.
第 - 1 步:所需文件 - required/script/jquery-1.11.0.min.js required/script/jquery.svg.min.js required/script/jquery.connectingLine.js [removed][removed] <script type="text/javascript
sh-菜单创建我的第一个 jQuery 插件脚本的迷你项目这是一个旧的迷你项目,创建于 2009 年左右。 创建一个 jQuery 插件是一个小练习。
发布问题时需要将问题对应到多个标签, 为了帮助用户快速而方便地完成操作, 可以借助于一个第三方的jQuery Tag插件, 该插件允许输入多个Tag, 并且拥有自动提示功能