jquery插件编写(以折叠面板为例)



创建一个 jQuery 插件所推荐的方法是,,先创建一个允许使用美元符号 ($) 的包装器函数。在默认情况下,美元符号可能与其他 JavaScript 框架发生冲突,如果将插件包装在一个函数中,就不会出现冲突。所以推荐使用下面代码创建jQuery插件:

(function($) {$.fn.accordion = function() {// 添加插件代码};})(jQuery);

上面代码,jQuery 关键字被应用到包装器函数中,这允许您在插件中使用美元符号,就像使用 fn 属性时那样。包装器函数就绪后,就可以在整个插件的任何地方使用美元符号代替 jQuery 关键字,不会干扰其他第三方插件。

插件代码

(function($) { $.fn.accordion = function(options) {return this.each(function() {var dts = $(this).children('dt');dts.click(onClick);dts.each(reset);});function onClick() {$(this).siblings('dt').each(hide);if($(this).next().is(":hidden")){$(this).next().slideDown('fast');return false;}if($(this).next().is(":visible")){$(this).next().slideUp('fast');return false;}}function hide() {$(this).next().slideUp('fast');}function reset() {$(this).next().hide();} }})(jQuery);

页面代码

<!DOCTYPE HTML><html><head><title>自定义你的插件</title><script src=""></script><script src="aa.js"></script>//插件js<script>$(function(){//调用你的自定义插件 $('dl#my-accordion').accordion();//调用插件});</script></head><body><dl class="accordion" id="my-accordion"> <dt>Section 1</dt><dd>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</dd> <dt>Section 2</dt><dd>Vestibulum a velit eu ante scelerisque vulputate.</dd> <dt>Section 3</dt><dd>Nam mi. Proin viverra leo ut odio. Curabitur malesuada.</dd> <dt>Section 4</dt><dd>Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</dd></dl></body></html>

效果如下

这就是我们想要的效果

版权声明:本文为博主原创文章,未经博主允许不得转载。

可是我知道结果是惨淡的,但还是心存希望!

jquery插件编写(以折叠面板为例)

相关文章:

你感兴趣的文章:

标签云: