Question

祝您周末愉快！

我正在尝试jsPanel并已安装它。现在，当我按下一个按钮时，将出现一个新的面板。到目前为止还算不错，但是当尝试在角落调整大小时，布局会出现问题。面板的阴影消失了，标题变得巨大了！

此外，他们的文档说我可以在jsPanel选项中使用引导主题。它正在使用“主要”，但我用“黑暗”代替了它，但是它不起作用？

有什么想法吗？为什么？

我的HTML

<html>
<head>
    <title>#</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <!-- jsPanel CSS -->
    <link href="https://cdn.jsdelivr.net/npm/jspanel4@4.3.0/dist/jspanel.css" rel="stylesheet">
    <!-- jsPanel JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/jspanel4@4.3.0/dist/jspanel.js"></script>
</head>
<body>
34324
<div class="row fixed-bottom m-3 d-flex">
    <div class="col-lg-2">3</div>
    <div class="col-lg-2">1</div>
    <div class="col-lg-2">2</div>
    <div class="col-lg-2"></div>
    <div class="col-lg-4 d-flex">
        <div class="card text-center">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link" href="#">User</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link  active" href="#">Channel</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Recent</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                <button id="new_panel" class="btn btn-primary">Go somewhere</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="js/panels.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

我的panels.js

$(function(){
    $( "#new_panel" ).on( "click", function() {
        jsPanel.create({
            theme:       'dark',
            headerTitle: 'my panel #1',
            position:    'center-top 0 58',
            contentSize: '450 250',
            content:     '<p>Example panel ...</p>',
            callback: function () {
                this.content.style.padding = '20px';
            },
        });
   });
});

Answer 1

立即显示一件事：您加载 jspanel.js 两次。首先通过jsdelivr在<head>中，然后在<body>元素的末尾再次。我建议在<head>中加载CSS，并在<body>末尾加载js。但请只一次！

引导程序主题和jspanel：：如jsPanel docs中所述，您必须在引导程序主题前面加上bootstrap-。因此，为了使用引导程序深色主题，您必须使用值为"bootstrap-dark"的选项主题。

jsPanel.create({ theme: 'bootstrap-dark' });

首先解决这两个问题，然后看看会发生什么...

jsPanel，调整大小时布局glicthes

1 个答案: