Question

我一直在编写自己的对话系统进行锻炼，并能够根据需要自定义它。这就是我所做的。

$(function(){
    $.fn.window = function(attr){
    var $self = this;

    if(!attr)
        attr = {};

    $.extend({
        autoOpen:false
    }, attr);

    /**
     * Create the window by updating the current jQuery block
     * And adding the required classes
     */
    this.create= function(){
        // Already created
        if($self.hasClass('window-window'))
            return;

        $self.addClass('window-window');

        // Creating the header and appending the title
        var $windowHeader = $('<div class="window-header"></div>');
        var $title = $self.attr('title');

        $windowHeader.html($title);
        $windowHeader.append('<div class="loading-item loading-item-footer round-loading25" ' +
            'data-loading-item="window" style="display:none"></div>');

        // Wrapping content in a window-content class
        // So the window has the proper format
        $self.children().wrapAll('<div class="window-content"></div>');
        $self.prepend($windowHeader);
    };

    /**
     * Open the window in a blackish div
     * With the events to close it
     */
    this.open = function(){
        // Creating the background
        var $backgroundDiv = $('<div></div>');
        $backgroundDiv.addClass('window-background');

        // Making it take the size of the page
        $backgroundDiv.height($(window).height());
        $backgroundDiv.width($(window).width());

        $self.detach().appendTo($backgroundDiv);

        // The window is hidden by default, showing it
        $self.show();

        $('html').prepend($backgroundDiv);

        // Handling closing the window
        $backgroundDiv.click(function(e){
            var $target = $(e.target);
            if(!$target.hasClass('window-background'))
                return;

            $self.hide();
            $self.detach().appendTo('html');

            $backgroundDiv.remove();
        });
    };

    this.create();

    if(attr.autoOpen){
        this.open();
    }
};
});

现在我怀疑我在html文档的末尾将窗口从他的原生块中移出。我希望把它恢复到他的位置，但我不知道该怎么做。有什么想法吗？

Answer 1

首先，您创建了一个jQuery函数，但是您在document.ready $(...)上执行了此操作。您应该创建它，否则在文档加载之前，该函数将无法用于其他代码。

然后，您希望将窗口插入与原始元素相同的位置，因为您在jQuery中具有insertBefore和insertAfter。您使用prepend，但将其作为$ self的第一个元素插入。

我建议你看一下jQuery的方法链接，这可能会让你的代码更具可读性。而不是：

// Creating the background
var $backgroundDiv = $('<div></div>');
$backgroundDiv.addClass('window-background');

// Making it take the size of the page
$backgroundDiv.height($(window).height());
$backgroundDiv.width($(window).width());

使用

// Creating the background
var $backgroundDiv = $('<div></div>')
  .addClass('window-background')
  // Making it take the size of the page
  .css({
          height:$(window).height(),
          width:$(window).width()
  });

例如。

您还可以使用CSS类来存储信息，例如是否已点击某些内容。这可能没问题，但考虑到您可能想要更改CSS类，突然您的代码功能与设计紧密相关。即使您添加更多代码来设置元素的样式，也许使用.data（）会更好。

使用.wrap获取原始内容并将其放在窗口中。这可能是你一直想要的，但也看看https://api.jquery.com/clone/，它允许你获取元素而不将它们从原始源中删除。同样，只有它对你更好。

作为最后一条建议，请使用http://jsfiddle.net分享您的工作代码，以便其他人不仅可以对其进行评论，还可以看到它的实际效果。

我怎样才能改进我的个人jQuery Dialog插件

1 个答案: