Question

轻松全部

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

<script type="text/javascript">
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('<div id="overlay" />');
        // 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('<div id="modal-vid-close" title="Close window" />');
        // 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)
                // e.g. `$(this).click( function() {} )`
                // also have access to `options` i.e. `options.width`
            });
        }
    });
})(jQuery);

然后将其放入HTML：

<script type="text/javascript">
$(document).ready( function() {
    // use default options
    $('.selector').pluginname();
    // custom options
    $('.selector').pluginname({width:300, height:200});
});
</script>

Answer 2

我发现official jQuery plugin authoring guide非常好，还有this article at Learning jQuery可以帮助您了解情况有多好。

Answer 3

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

<script type="text/javascript">
(function($){
$.fn.extend({
    mynewmodal: function(options) {

   var defaults = {
                   container: "#modalcontainer"
          };
        var options = $.extend(defaults, options);
        return this.each(function() {
            var o =options;
            // Add our click OPEN event
            $(this).click(function (e) {
                e.preventDefault();
                // Add our overlay div
                $('body').append('<div id="overlay" />');
                // Fade in overlay
                $('#overlay').css({"display":"block","opacity":"0"}).animate({"opacity":"0.2"}, 300),
                // Animate our modal window into view
                $(o.container).css({"top":"43%", "opacity":"0"}).show().animate({"top": "50%", "opacity": "1"}, 550),
                // Add our close image
                $(o.container).append('<div id="modal-vid-close" title="Close window" />');
                // Add our click CLOSE event
                $('#overlay', '#modal-vid-close').click(function () {
                    //Animate our modal window out of view
                    $(o.container).animate({"top": "55%", "opacity": "0"}, 350).fadeOut(200),
                    // Fade out and remove our overlay 
                    $('#overlay').fadeOut(200, function () { $(this).remove(); $('#modal-vid-close').remove()} )
                });
            });
        });
    }
});
})(jQuery);
</script>

然后启动它：

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready( function() {
$j('.video_container a').mynewmodal({ container: "#video" });
});
</script>

帮助将jQuery脚本转换为插件

3 个答案: