Question

我正在使用zino UI创建一个拆分窗格。我已经下载了拆分窗格的示例代码，并尝试使用ASP.NET MVC从我的机器运行，当我尝试从ASP.NET MVC项目运行时收到错误。但是从普通的HTML页面来看它运行正常。

错误＆＃34; SCRIPT438：SCRIPT438：对象不支持属性或方法＆＃39; zinoSplitter＆＃39;＆＃34;

演示示例： https://zinoui.com/demos/splitter#default-1

<head>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" href="https://static.zinoui.com/1.5/themes/silver/zino.core.css">
    <link rel="stylesheet" href="https://static.zinoui.com/1.5/themes/silver/zino.splitter.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js" integrity="sha256-rsPUGdUPBXgalvIj4YKJrrUlmLXbOb6Cp7cdxn1qeUc=" crossorigin="anonymous"></script>
    <script src="https://static.zinoui.com/1.5/compiled/zino.position.min.js"></script>
    <script src="https://static.zinoui.com/1.5/compiled/zino.draggable.min.js"></script>
    <script src="https://static.zinoui.com/1.5/compiled/zino.splitter.min.js"></script>
    <script src="https://static.zinoui.com/js/front.min.js"></script>
</head>
<div id="vertical">
    <div class="splitter-north"><div class="splitter-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique, est in mollis egestas, odio ipsum rutrum erat, ut tincidunt dui elit non tellus. Phasellus tristique est vel tortor aliquet, sed ullamcorper erat porta. Nam tristique sem felis, eu ornare metus tincidunt non. Nullam eros eros, molestie nec odio eget, bibendum tincidunt leo.</div></div>
    <div id="horizontal">
        <div class="splitter-west"><div class="splitter-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique, est in mollis egestas, odio ipsum rutrum erat, ut tincidunt dui elit non tellus. Phasellus tristique est vel tortor aliquet, sed ullamcorper erat porta. Nam tristique sem felis, eu ornare metus tincidunt non. Nullam eros eros, molestie nec odio eget, bibendum tincidunt leo. Fusce eget velit vitae diam rutrum sodales id at magna. Etiam vitae odio nec mi tempor tristique. Donec volutpat neque non tortor blandit, at luctus augue malesuada.</div></div>
        <div class="splitter-center" id="center">
            <div class="splitter-center-north"><div class="splitter-content">Phasellus tristique est vel tortor aliquet, sed ullamcorper erat porta. Nam tristique sem felis, eu ornare metus tincidunt non.</div></div>
            <div class="splitter-center-south"><div class="splitter-content">Nullam eros eros, molestie nec odio eget, bibendum tincidunt leo. Fusce eget velit vitae diam rutrum sodales id at magna.</div></div>
        </div>
        <div class="splitter-east"><div class="splitter-content">Nulla tristique, est in mollis egestas, odio ipsum rutrum erat, ut tincidunt dui elit non tellus. Phasellus tristique est vel tortor aliquet, sed ullamcorper erat porta. Nam tristique sem felis, eu ornare metus tincidunt non. Nullam eros eros, molestie nec odio eget, bibendum tincidunt leo.</div></div>
    </div>
    <div class="splitter-south"><div class="splitter-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique, est in mollis egestas, odio ipsum rutrum erat, ut tincidunt dui elit non tellus. Phasellus tristique est vel tortor aliquet, sed ullamcorper erat porta. Nam tristique sem felis, eu ornare metus tincidunt non.</div></div>
</div>

<script type="text/javascript">
    $(function () {
        $("#horizontal").zinoSplitter({
            panes: [
                { size: 150, collapsible: true, region: "west" },
                { size: 226, collapsible: false, region: "center" },
                { size: 150, collapsible: true, region: "east" }
            ]
        });
        $("#vertical").zinoSplitter({
            orientation: "vertical",
            panes: [
                { size: 80, collapsible: true, resizable: false, region: "north" },
                { size: 196, collapsible: true, region: "center" },
                { size: 50, collapsible: true, region: "south" }
            ]
        });
        $("#center").zinoSplitter({
            orientation: "vertical",
            panes: [
                { size: 96, region: "north", collapsible: true },
                { size: 96, region: "south", collapsible: true }
            ]
        });
    });
</script>

<style type="text/css">
    #vertical {
        height: 334px;
        width: 534px;
        background-color: #E6E6E6;
    }

    #horizontal,
    #center {
        background-color: #E6E6E6;
    }

    .splitter-north {
        background-color: #D9D9D9;
        box-sizing: border-box;
        border: solid 1px #aaa;
    }

    .splitter-south,
    .splitter-west,
    .splitter-east,
    .splitter-center-north,
    .splitter-center-south {
        background-color: #E6E6E6;
        box-sizing: border-box;
        border: solid 1px #aaa;
    }

    .splitter-center {
        background-color: #E6E6E6;
    }

    .splitter-content {
        padding: 10px;
    }
</style>

Answer 1

我在Bundleconfig.cs中注册了js文件并且它有效。

MVC应用程序上的ZINO UI问题 - 拆分器窗格无法正常工作

1 个答案: