帮助将jQuery脚本转换为插件

轻松一切

因为我最近一直在学习jQuery，所以当点击video缩略图时，我决定编写自己的模态窗口来播放video。 这一切都很好，但我只是想知道如何将它变成一个插件，所以我可以在不同的页面上使用它与不同的参数等。我阅读文档，和一些教程，但我似乎无法让它工作。 我的基本代码如下：

 var $j = jQuery.noConflict(); $j(document).ready(function(){ // Add our click OPEN event $j("a.video_link").click(function (e) { e.preventDefault(); // Add our overlay div $j('body').append('
'); // Fade in overlay $j('#overlay').css({"display":"block","opacity":"0"}).animate({"opacity":"0.2"}, 300), // Animate our modal window into view $j('#video').css({"top":"43%"}).css({"opacity":"0"}).show().animate({"top": "50%", "opacity": "1"}, 550), // Add our close image $j('#video').append('
'); // Add our click CLOSE event $j('#overlay, #modal-vid-close').click(function () { //Animate our modal window out of view $j('#video').animate({"top": "55%", "opacity": "0"}, 350).fadeOut(200), // Fade out and remove our overlay $j('#overlay').fadeOut(200, function () { $j(this).remove(); $j('#modal-vid-close').remove()} ) }); }); }); 

我想把它变成一个插件，所以我可以在不同的页面上使用它，只需指定’trigger’链接，并在窗口中显示div id（它已经被加载到页面上，但是已隐藏） 。 像这样的东西，添加到每个页面上的doc加载：

 var trigger = $j('.video_container a'); var modalcontent = $j('#video'); 

任何帮助，或指向好教程的指针，非常感谢！

Answer 1

这是一个很好的模板，我在教程网站上找到了， Queness ：

 (function($){ $.fn.extend({ // change 'pluginname' to your plugin name (duh) pluginname: function(options) { // options for the plugin var defaults = { width: 500, height: 300 } var options = $.extend(defaults, options); return this.each(function() { // main code goes here, will apply to each element of $(this) // eg `$(this).click( function() {} )` // also have access to `options` ie `options.width` }); } }); })(jQuery); 

然后把它放在你的HTML中：

Answer 2

我发现官方的jQuery插件创作指南非常好，还有一篇关于学习jQuery的文章，它可以帮助你理解更好的内容。

Answer 3

好的，多亏了Queness教程，我99％在那里！ 干杯因链接而心怀不满。 一切都很好，除了现在我的模态窗口不会关闭。 这应该是一个单独的“关闭”function还是什么？ 这是新代码：

然后启动它：