单击时,移动导航菜单会将页面返回到顶部

时间:2015-09-24 13:32:31

标签: javascript jquery html css jquery-mobile

警告:严重缺乏对jquery的理解

我有一个移动菜单,从左侧拉出,打开时我的页面宽度的25%。我的问题是,如果我已经向下滚动页面然后决定打开我的移动菜单,页面将返回到顶部并打开菜单。如何防止页面返回到顶部并保持滚动位置。

我使用的是jquery 插件

由于

;(function ($, window) {
"use strict";

var namespace = "shifter",
    initialized = false,
    hasTouched = false,
    data = {},
    classes = {
        handle: "shifter-handle",
        page: "shifter-page",
        header: "shifter-header",
        navigation: "shifter-navigation",
        isEnabled: "shifter-enabled",
        isOpen: "shifter-open"
    },
    events = {
        click: "touchstart." + namespace + " click." + namespace
    };

/**
 * @options
 * @param maxWidth [string] <'980px'> "Width at which to auto-disable plugin"
 */
var options = {
    maxWidth: "980px"
};

var pub = {

    /**
     * @method
     * @name close
     * @description Closes navigation if open
     * @example $.shifter("close");
     */
    close: function() {
        if (initialized) {
            data.$html.removeClass(classes.isOpen);
            data.$body.removeClass(classes.isOpen);
            data.$shifts.off( classify(namespace) );
            // Close mobile keyboard if open
            data.$nav.find("input").trigger("blur");
        }
    },

    /**
     * @method
     * @name enable
     * @description Enables navigation system
     * @example $.shifter("enable");
     */
    enable: function() {
        if (initialized) {
            data.$body.addClass(classes.isEnabled);
        }
    },

    /**
     * @method
     * @name destroy
     * @description Removes instance of plugin
     * @example $.shifter("destroy");
     */
    destroy: function() {
        if (initialized) {
            data.$html.removeClass(classes.isOpen);
            data.$body.removeClass( [classes.isEnabled, classes.isOpen].join(" ") )
                      .off(events.click);

            // Navtive MQ Support
            if (window.matchMedia !== undefined) {
                data.mediaQuery.removeListener(onRespond);
            }

            data = {};
            initialized = false;
        }
    },

    /**
     * @method
     * @name disable
     * @description Disables navigation system
     * @example $.shifter("disable");
     */
    disable: function() {
        if (initialized) {
            pub.close();
            data.$body.removeClass(classes.isEnabled);
        }
    },

    /**
     * @method
     * @name open
     * @description Opens navigation if closed
     * @example $.shifter("open");
     */
    open: function() {
        if (initialized) {
            data.$html.addClass(classes.isOpen);
            data.$body.addClass(classes.isOpen);
            data.$shifts.one(events.click, onClick);
        }
    }
};

/**
 * @method private
 * @name init
 * @description Initializes plugin
 * @param opts [object] "Initialization options"
 */
function init(opts) {
    if (!initialized) {
        data = $.extend({}, options, opts || {});

        data.$html = $("html");
        data.$body = $("body");
        data.$shifts = $( [classify(classes.page), classify(classes.header)].join(", ") );
        data.$nav = $( classify(classes.navigation) );

        if (data.$shifts.length > 0 && data.$nav.length > 0) {
            initialized = true;

            data.$body.on(events.click, classify(classes.handle), onClick);

            // Navtive MQ Support
            if (window.matchMedia !== undefined) {
                data.mediaQuery = window.matchMedia("(max-width:" + (data.maxWidth === Infinity ? "100000px" : data.maxWidth) + ")");
                data.mediaQuery.addListener(onRespond);
                onRespond();
            }
        }
    }
}

/**
 * @method private
 * @name onRespond
 * @description Handles media query match change
 */
function onRespond() {
    if (data.mediaQuery.matches) {
        pub.enable();
    } else {
        pub.disable();
    }
}

/**
 * @method private
 * @name onClick
 * @description Determines proper click / touch action
 * @param e [object] "Event data"
 */
function onClick(e) {
    e.preventDefault();
    e.stopPropagation();
    e.isPropagationStopped();

    if (!hasTouched) {
        if (data.$body.hasClass(classes.isOpen)) {
            pub.close();
        } else {
            pub.open();
        }
    }

    if (e.type === "touchstart") {
        hasTouched = true;

        setTimeout(resetTouch, 500);
    }
}

/**
 * @method private
 * @name resetTouch
 * @description Resets touch state
 */
function resetTouch() {
    hasTouched = false;
}

/**
 * @method private
 * @name classify
 * @description Create class selector from text
 * @param text [string] "Text to convert"
 * @return [string] "New class name"
 */
function classify(text) {
    return "." + text;
}

$[namespace] = function(method) {
    if (pub[method]) {
        return pub[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method) {
        return init.apply(this, arguments);
    }
    return this;
};

})(jQuery,window);

0 个答案:

没有答案