jquery插件使用【jquery.js插件】 收藏 0

穿着木屐跳舞——jQuery图表插件jqchart的使用

先上图：

前段时间，论坛上有不少版友问在Access里怎么做图表。——众所周知，尽管Access也有不少图表类型，但并不是做图表的最佳选择。Excel可以有更多选择，做得更漂亮。但是，在Access2010以后，似乎不支持Spreadsheet控件了……所以退而求其次，不妨考虑下jQuery吧。

jQuery的魅力在于它的UI和众多插件，然而在Access里却不是那么好用，主要表现在数据的交换上。你可能需要将Access里的数据转换为JSON文件，甚至Javascript脚本输出，然后再执行。——HTML不能直接读取Access数据，请原谅它的无能吧。（如果是PHP和MySQL则方便多了，当然，PHP需要安装运行环境）。

不过，也不是完全不能实现。例如，我们可以考虑把Access里的数据输出成js文件，然后再利用html来执行；又或者构造javascript语句，用DOM来执行。——本例正是这个方法。

但无论怎么说，都有一种穿着木屐跳舞的感觉，——实在不好施展。如果你留意过之前老汉写过的jQuery示例，就会发现，没几个是在Access里执行的。我想，原因也在于此吧。

顺便说一下，Access2010+IE11下的Webbrowser不支持 jQuery 1.5.1，建议使用里面的1.11版本（Access 2010 Or Access2003+IE11均支持）。

示例下载地址：http://www.office-cn.net/thread-119343-1-19.html

jQuery 插件开发指南

jQuery凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，经常有人询问一些技巧，因此干脆写这么一篇文章给各位jQuery爱好者，算是抛砖引玉吧。

jQuery插件

那么首先我们来简单的看一下正统的 jQuery 插件定义方式：

(function ($) {

$.fn.插件名 = function (settings) {

//默认参数

var defaultSettings = {

} /* 合并默认参数和用户自定义参数 */

settings = $.extend(defaultSettings, settings);

return this.each(function () { //代码 }); //插件在元素内多次出现

} })(jQuery);

先来看模板中的第一行代码(当然我们要把这一行代码的后半部分给揪出来一起看，不然第一行就完全无意义了)：

(function ($) {

})(jQuery);

这行代码其实是用于创建一个匿名函数。如果你对匿名函数和闭包不了解，将会对这种代码非常疑惑，那么强烈建议您阅读【详谈JavaScript 匿名函数及闭包】这篇文章。

jQuery 的继承方法 $.extend —— $.extend 在jQuery 插件开发中有个很重要的作用，就是用于合并参数。

$.fn.tip = function (settings) {

var defaultSettings = {

//颜色

color: \’yellow\’,

//延迟

timeout: 200 }

/* 合并默认参数和用户自定义参数 */

settings = $.extend(defaultSettings, settings);

alert(settings.input);

}

jQuery 插件定义第二种方式：

(function ($) {

//插件定义–更换名字

$.fn.tabpanel = function (method) {

var methods = $.fn.tabpanel.methods;

if (methods[method]) {

return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));

} else if (typeof method === \’object\’ || !method) {

return methods.init.apply(this, arguments);

} else {

}

}

//支持的方法

$.fn.tabpanel.methods =

{

//初始化

init: function (p_options) {

tabpanelBind(p_options, this);

},

add: function (p_options) {

addTab(p_options, this);

tabpanelBind(p_options, this);

// debugger

} }

function add(p_options) {

var _defaults = {

id: \”\”

}

//内部实现略………

return _index;

}

})(jQuery);

调用 $(\”#team\”).tabpanel(\’add\’,\”\”);

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com