jsPanel, расположение макетов при изменении размера - PullRequest
Новая
       9

jsPanel, расположение макетов при изменении размера

0 голосов
/ 02 декабря 2018

Надеюсь, у вас замечательные выходные!

Я экспериментирую с jsPanel и только что установил его.Теперь, когда я нажимаю кнопку, появляется новая панель.Пока все хорошо, но при попытках изменить его размер в углу, макет блестит.Тень панели исчезает, а заголовок становится огромным!

Кроме того, в их документе говорится, что я могу использовать темы начальной загрузки в опциях jsPanel.Он работал с «первичным», и я заменил его на «темный», но он не работает?

Есть идеи, что происходит и почему?

Shows the apeparing panel Shows the glitch

МОЙ 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>

Мои панели.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';
            },
        });
   });
});

1 Ответ

0 голосов
/ 06 декабря 2018

Появляется одна вещь: вы загружаете jspanel.js два раза.Сначала в <head> через jsdelivr и еще раз в конце элемента <body>.Я предлагаю загрузить CSS в <head> и JS в конце <body>.Но только один раз, пожалуйста!

Темы начальной загрузки и jspanel: Как отмечается в jsPanel docs , необходимо добавить в качестве темы начальной загрузки bootstrap-.Таким образом, чтобы использовать темную загрузочную тему, вы должны использовать опцию theme со значением "bootstrap-dark".

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

Сначала исправьте эти две проблемы и посмотрите, что произойдет ...

...