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

Call inner Javascript functions from .js file

本文关键字:Javascript 函数 内部 调用 js 文件      更新时间:2023-09-26

我正在做一个ASP。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

我可以通过锚标记调用off画布。这完全没问题。我希望能够从javascript隐藏和显示画布外区域。我已经在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上发现了一个类似的线程(我如何访问这个脚本的内部函数?),这表明我需要使用以下方法:

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

其中#alerts-canvas为我的画布外区域的id。当我尝试从javascript调用它时,我得到以下javascript错误:Uncaught TypeError: Cannot read property 'offcanvas' of undefined .

我不知道我做错了什么,但我真的希望这将工作,因为我真的需要这个工作。

我确保脚本是链接的(这发生在一般_Layout页面的所有页面。

你们知道我可能做错了什么吗?

try

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