`
suxing
  • 浏览: 209103 次
  • 性别: 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插件

    **jQuery Validation Engine 插件详解** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,...在实际开发中,结合使用其他jQuery插件和前端框架,能更好地构建出高效、友好的Web应用。

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

    标题 "我的第一个jQuery插件 -- 圆角DIV" 指涉的是一个关于创建自定义jQuery插件的教程,该插件主要用于实现HTML元素(尤其是DIV)的圆角效果。在早期的Web开发中,CSS2无法直接创建圆角,所以开发者会利用...

    jquery插件资源包

    - **相邻兄弟选择器**: `$("prev + next")`选取紧跟在`prev`元素后的第一个`next`元素。 - **通用选择器**: `*$("*")`选取页面上的所有元素。 ## jQuery 插件的使用 jQuery插件是扩展jQuery功能的代码片段,它们...

    jquery插件大全(内含Demo)

    "jQuery插件大全(内含Demo)"是一个宝贵的资源库,涵盖了网页开发所需的多种功能。通过学习和应用这些插件,开发者不仅可以快速构建功能丰富的网页,还能提升自身技能,更好地应对日益复杂和多变的前端开发需求。在...

    jQuery插件开发的五种形态小结

    在第一种形态下,我们可以通过`$.fn.extend`方法将一个对象作为函数附加到jQuery的原型上,使得通过`$(selector).pluginName()`的形式调用这个插件。 ### 二、参数支持 - 提高灵活性 第二种形态是在基础形态上添加...

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

    【标题】"我的第一个jQuery插件-伪3D图片播放" 涉及的主要知识点是JavaScript库jQuery的扩展,以及创建具有伪3D效果的图片滚动插件。在这个项目中,开发者通过编写自定义的jQuery插件实现了动态的、具有立体感的...

    eclipse插件 - jQuery

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

    jquery插件打包下载

    例如,"Bootstrap"是一个流行的设计框架,其中包含了许多jQuery插件,如Modal对话框、Dropdown下拉菜单和Carousel轮播图等。 要下载jQuery插件,通常有以下几种途径: 1. 官方网站:访问jQuery官方网站...

    jQuery插件集之(分页插件)初学者必备+Demo

    一个jQuery插件通常是一个函数,通过$.fn.extend()方法扩展了jQuery对象的原型链。在这个分页插件中,我们可能会看到类似以下的代码结构: ```javascript (function($) { $.fn.extend({ pagination: function...

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

    标题中的“第二个jQuery文件 下载安装插件之一”暗示了我们正在讨论的是关于jQuery的某个特定版本或插件,可能是用户在寻找或者推荐的用于开发的资源。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、...

    鼠标双击或触摸双击事件检测jQuery插件

    本文将深入探讨一个针对鼠标双击和触摸屏双击事件检测的jQuery插件——jQuery-doubleTap。 **一、插件简介** jQuery-doubleTap是一款专门用于检测鼠标双击和移动设备触摸屏双击事件的插件。它通过优化"click"和...

    jquery-easyui jquery插件

    jQuery EasyUI 是一个强大的前端开发框架,它基于广泛使用的JavaScript库jQuery,专为构建用户界面而设计。这个框架的目标是让web开发者能够快速、轻松地创建功能完备且具有吸引力的用户交互界面,无需深入研究复杂...

    我的jQuery插件

    【标题】"我的jQuery插件"揭示了这是一个与jQuery相关的个人开发项目,可能是一个自定义的、用于扩展jQuery功能的插件。jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...

    jquery基础学习插件实例大全

    教程分为三个部分,即“jQ学习第一季”、“jQ学习第二季”和“jQ学习第三季”,涵盖了jQuery的基础到高级应用。 在jQuery的学习过程中,首先需要理解jQuery的核心概念,包括选择器(Selector)、DOM操作、事件处理...

    jQuery插件开发精品教程让你的jQuery提升一个台阶

    ### jQuery插件开发精品教程 #### 一、引言 jQuery是一个广泛使用的JavaScript库,其核心功能之一是通过插件扩展其功能。在这一部分,我们将了解到插件对jQuery的重要性,以及如何使用插件来提升jQuery的能力。 ##...

    240多个jQuery插件.doc

    下面将详细介绍一些常用的jQuery插件类别及其代表性插件。 ### 三、jQuery插件分类详解 #### 1. 文件上传插件 - **AjaxFileUpload**: 实现基于AJAX的文件上传功能。 - **jQUploader**: 强大的文件上传插件,支持多...

    用户注册验证JQuery插件及实例

    在这个“用户注册验证JQuery插件及实例”中,我们将探讨如何使用JQuery这一强大的JavaScript库来实现高效、友好的前端验证。 JQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计...

    tabs选项卡Jquery插件

    active: 0, // 初始选中第一个选项卡 animation: {duration: 500} // 动画持续500毫秒 }); ``` ### 四、常见JQuery选项卡插件 1. **jQuery UI Tabs**:这是官方提供的一个强大且高度可定制的选项卡组件,提供了...

Global site tag (gtag.js) - Google Analytics