3

我正在使用 enquire.js 插件来解析存储为数据属性的媒体查询，这些数据属性根据浏览器宽度移动 DOM 中的元素位置。

所以我写了以下内容，当您手动指定不匹配时效果很好，问题来自auto。我希望它记住原始位置并在元素超出媒体查询时自动将其移回。

但是我遇到了最初引用的上一个/下一个元素也已移动的问题。还有另一种方法可以将元素移回其原始位置吗？还是我最好只是隐藏元素而不是移动它？

/*
 * Organise elements using meta data
 * 
 * @example:
 * data-respond='{
 *      "query":"screen and (max-width:481px)", 
 *      "match": { 
 *          "target": "#page", 
 *          "method": "appendTo"
 *      }, 
 *      "unmatch":{
 *          "target": "#footer", 
 *          "method": "appendTo"
 *      }
 * }'
 */
var $this,
data,
options,
allowedMethods = ['appendTo', 'prependTo', 'insertAfter', 'insertBefore'];

$("[data-respond]").each(function () {
    $this = $(this),
    data = $this.data("respond");
    options = {};

    // check we have object
    /*if(typeof data !== 'object'){
        data = eval(data);
    }*/

    if (data.match) {
        if ($.inArray(data.match.method, allowedMethods) > -1) {
            options.match = function () {
                if (data.match.method == 'insertAfter') {
                    if ($this[0] == $(data.match.target).next()[0]) {
                        return;
                    }
                }
                if ($(data.match.target).length) {
                    $this[data.match.method](data.match.target);
                }
            }
        }
    } //match

    if (data.unmatch) {
        if (data.unmatch == 'auto') {
            data.unmatch = {};

            // a) insert after                      
            if ($this.prev().length) {
                data.unmatch.target = $this.prev();
                data.unmatch.method = 'insertAfter';
            } else if ($this.next().length) {
                // c) insert before 
                data.unmatch.target = $this.next();
                data.unmatch.method = 'insertBefore';
            } else {
                // d) append to parent
                data.unmatch.target = $this.parent();
                data.unmatch.method = 'appendTo';
            }

            if ($.inArray(data.unmatch.method, allowedMethods) > -1) {
                options.unmatch = function () {
                    $this[data.unmatch.method](data.unmatch.target);
                }
            }
        } else {
            // Manually set unmatch
            if ($.inArray(data.unmatch.method, allowedMethods) > -1) {
                options.unmatch = function () {
                    if ($(data.unmatch.target).length) {
                        $this[data.unmatch.method](data.unmatch.target);
                    }
                }
            }
        }

    } //unmatch

    enquire.register(data.query, options);
});

Jsbin - http://jsbin.com/akAV/1/edit

4

2 回答 2

4

我希望它记住原始位置并在元素超出媒体查询时自动将其移回。

但是我遇到了最初引用的上一个/下一个元素也已移动的问题。

一般性评论：当“原始上下文”不再存在时，您必须明确定义“原始位置”是什么。

我认为您的问题之一是您使用移动元素作为参考。

也许你可以在移动之前留下一个空的（固定的）html标签：

// create an empty tag, which will be left at the "original position"
var $beacon = $('<span class="beacon"></span>');
$(this).after($beacon);
// keep a reference to this node
$(this).data('unmatch-beacon', $beacon[0]);

// the unmatch function would be something like :
data.unmatch = function(){
    var beacon = $(this).data('unmatch-beacon');
    $(beacon).after(this);
    $(beacon).remove();
    $(this).data('unmatch-beacon', null);
};
于 2013-08-30T07:40:04.720 回答
1

My first idea is actually a quite simple one. Why not wrap them where you want them?

<div class="parentContainer">
    <div class="firstWrapper">
        <!-- Content that you want to move goes here -->
    </div>
    <div class="secondWrapper">
        <!-- Second content  that you want to move  goes here -->
    </div>
</div>

And your JS should be something like:

// a) insert after                      
if($this.prev().length){
    data.unmatch.target = $('.firstWrapper');
    data.unmatch.method = 'appendTo';
} else if($this.next().length){
// c) insert before 
    data.unmatch.target = $('.secondWrapper');
    data.unmatch.method = 'appendTo';
} else {
// d) append to parent
    data.unmatch.target = $('.parentContainer');
    data.unmatch.method = 'appendTo';
}

This will make it quite easy to find where you want to append something. Keep It Simple! :)

/J.

于 2013-08-27T08:40:37.510 回答