这里function 后面的$参数,形参,在函数体内部的使用呢,$就是当前您当前整在调用该函数的对象了,这样就能干很多事了….你懂的。
用一个tabs面板切换插件来详细演示一下jQuery对象级别插件的具体开发,直接上代码。
首先上HTML:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”jquery-1.6.2.min.js” type=”text/javascript”></script>
<script src=”jquery.tabs.js” type=”text/javascript”></script>
<link href=”tabs.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript”>
$(function () {
$(“#mytabs”).tabs();
});
</script>
</head>
<body>
<!–tabs示例–>
<div id=”mytabs”>
<!–选项卡区域–>
<ul>
<li><a href=”#tabs1″>选项1</a></li>
<li><a href=”#tabs2″>选项2</a></li>
<li><a href=”#tabs3″>选项3</a></li>
</ul>
<!–面板区域–>
<div id=”tabs1″>11111</div>
<div id=”tabs2″>22222</div>
<div id=”tabs3″>33333</div>
</div>
</body>
</html>
再上插件源码:
/*
tabs面板插件,版本1.0(2011.08.24)
用法:$(“#myDiv”).tabs({switchingMode:”click”});
参数解释:switchingMode是面板切换的模式,如switchingMode:”mouseover”则鼠标移动至选项卡切换面板,默认为click。
整体tabs骨架不变,依然是常用的结构如下:
<div id=”tabs”>
选项卡区域ul
<ul>
<li><a href=”#div1″>选项1</a></li>
<li><a href=”#div2″>选项2</a></li>
</ul>
面板区域div
<div id=”div1″>面板1</div>
<div id=”div2″>面板2</div>
</div>
样式:此样式为默认无任何效果样式,可根据需要修改插件样式。
*/
; (function ($) {
$.fn.tabs = function (options) {
var defualts = { switchingMode: “click” };
var opts = $.extend({}, defualts, options);
var obj = $(this);
var clickIndex = 0;
obj.addClass(“tabsDiv”);
$(“ul li:first”, obj).addClass(“tabsSeletedLi”);
$(“ul li”, obj).not(“:first”).addClass(“tabsUnSeletedLi”);










