Question

我正在使用ASP.NET MVC 4应用程序。我正在使用GetUikit css库，它还提供了一些基本的javascript / jQuery驱动程序。我正在使用实际正在运行的Off canvas组件。

Getuikit：https://github.com/uikit/uikit http://getuikit.com/index.html

Offcanvas组件：http://getuikit.com/docs/offcanvas.html

我可以通过锚标记调用offcanvas。这完全没问题。我希望能够隐藏和显示来自javascript的offcanvas区域。我已经跟踪了UIKit提供的.js文件中的特定Javascript部分。本节如下所示：

(function($, UI) {

"use strict";

var $win      = $(window),
    $doc      = $(document),
    Offcanvas = {

    show: function(element) {

        element = $(element);

        if (!element.length) return;            

        var doc       = $("html"),
            bar       = element.find(".uk-offcanvas-bar:first"),
            rtl       = ($.UIkit.langdirection == "right"),
            dir       = (bar.hasClass("uk-offcanvas-bar-flip") ? -1 : 1) * (rtl ? -1 : 1),
            scrollbar = dir == -1 && $win.width() < window.innerWidth ? (window.innerWidth - $win.width()) : 0;

        scrollpos = {x: window.scrollX, y: window.scrollY};

        element.addClass("uk-active");

        doc.css({"width": window.innerWidth, "height": window.innerHeight}).addClass("uk-offcanvas-page");
        doc.css((rtl ? "margin-right" : "margin-left"), (rtl ? -1 : 1) * ((bar.outerWidth() - scrollbar) * dir)).width(); // .width() - force redraw

        bar.addClass("uk-offcanvas-bar-show").width();

        setTimeout(function() {
            /*SELF ADDED FOR ARROW*/
            var elementArrow = document.getElementById('notification-arrow');
            $(elementArrow).css("display", "inline-block");
            /*--------------------*/
        }, 250);


        element.off(".ukoffcanvas").on("click.ukoffcanvas swipeRight.ukoffcanvas swipeLeft.ukoffcanvas", function(e) {                


            var target = $(e.target);

            if (!e.type.match(/swipe/)) {

                if (!target.hasClass("uk-offcanvas-close")) {


                    if (target.hasClass("uk-offcanvas-bar")) return;
                    if (target.parents(".uk-offcanvas-bar:first").length) return;
                }
            }



            e.stopImmediatePropagation();
            Offcanvas.hide();
        });



        $doc.on('keydown.ukoffcanvas', function(e) {
            if (e.keyCode === 27) { // ESC
                Offcanvas.hide();
            }
        });


    },

    hide: function(force) {

        var doc   = $("html"),
            panel = $(".uk-offcanvas.uk-active"),
            rtl   = ($.UIkit.langdirection == "right"),
            bar   = panel.find(".uk-offcanvas-bar:first");

        if (!panel.length) return;

        /*SELF ADDED FOR ARROW*/
        $('#notification-arrow').css("display", "none");
        /*--------------------*/

        if ($.UIkit.support.transition && !force) {

            doc.one($.UIkit.support.transition.end, function() {
                doc.removeClass("uk-offcanvas-page").attr("style", "");
                panel.removeClass("uk-active");
                window.scrollTo(scrollpos.x, scrollpos.y);
            }).css((rtl ? "margin-right" : "margin-left"), "");

            setTimeout(function(){
                bar.removeClass("uk-offcanvas-bar-show");
            }, 50);

        } else {
            doc.removeClass("uk-offcanvas-page").attr("style", "");
            panel.removeClass("uk-active");
            bar.removeClass("uk-offcanvas-bar-show");
            window.scrollTo(scrollpos.x, scrollpos.y);
        }

        panel.off(".ukoffcanvas");
        $doc.off(".ukoffcanvas");
    }

}, scrollpos;


var OffcanvasTrigger = function(element, options) {

    var $this    = this,
        $element = $(element);

    if($element.data("offcanvas")) return;

    this.options = $.extend({
        "target": $element.is("a") ? $element.attr("href") : false
    }, options);

    this.element = $element;

    $element.on("click", function(e) {
        e.preventDefault();
        Offcanvas.show($this.options.target);
    });

    this.element.data("offcanvas", this);
};

OffcanvasTrigger.offcanvas = Offcanvas;

UI["offcanvas"] = OffcanvasTrigger;


// init code
$doc.on("click.offcanvas.uikit", "[data-uk-offcanvas]", function(e) {

    e.preventDefault();

    var ele = $(this);

    if (!ele.data("offcanvas")) {
        var obj = new OffcanvasTrigger(ele, UI.Utils.options(ele.attr("data-uk-offcanvas")));
        ele.trigger("click");
    }
});

})(jQuery, jQuery.UIkit);

我在Stackoverflow上发现了一个类似的线程（How can I access the inner functions of this script?），这表明我需要使用以下方法：

jQuery.UIkit.offcanvas.offcanvas.show('#alerts-canvas');

#alerts-canvas是我的offcanvas区域的id。当我尝试从javascript调用此方法时，我收到以下Javascript错误：Uncaught TypeError: Cannot read property 'offcanvas' of undefined。

我不知道我做错了什么，但我真的希望这会有效，因为我真的需要这个。

我确保脚本已关联（这适用于常规_Layout页面中的所有页面。

你们有什么想法我可能做错了吗？

Answer 1

尝试

$.UIkit.offcanvas.show('#alerts-canvas');

从.js文件调用内部Javascript函数

1 个答案: