Блог

Главная - Вопросы по программированию - Прокручиваемый и div с возможностью изменения размера с западной стороны

Прокручиваемый и div с возможностью изменения размера с западной стороны

#javascript #jquery-ui #bootstrap-4

#javascript #jquery-пользовательский интерфейс #bootstrap-4

Вопрос:

Мне нужно сделать панель навигации слева, а содержимое справа. То, что у меня есть, работает хорошо. Но, когда на панели навигации появляется полоса прокрутки, значок изменения размера остается примерно на 7 пикселей внутри. Если я смогу изменить размер панели содержимого и добавить значок изменения размера на западной стороне, jquery добавит скрытый раздел изменения размера на стороне содержимого, что приведет к появлению значка изменения размера прямо на границе изменения размера.

В настоящее время без полосы прокрутки выглядит идеально.

Изображение без полос прокрутки

Теперь с полосами прокрутки:

Изображение с полосами прокрутки

Вот код, который у меня есть до сих пор:

 <!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <style>
        body {
            margin: 0;
            background-color: #222;
        }

        #nav {
            float: left;
            border-width: 0 5px 0 0;
            border-style: solid;
            background-color: yellow;
            width: 10%;
            height: 100vh;
            max-height: 100%;
            overflow-x: auto;
        }

        #content {
            background-color: brown;
            width: auto;
            height: 100vh;
        }
    </style>
    <script>
        $(document).ready(function() {
            $('#nav').resizable({
                handles: 'e'
            });
        });
    </script>
</head>

<body>
    <div id="nav">This area should be scrollable and resizable with scrollbars on all the time.
    </div>
    <div id="content">content</div>
</body>
</html>

Если я смогу изменить размер правой части (содержимого) так, чтобы значок изменения размера всегда находился на панели изменения размера, на левой стороне будут свои полосы прокрутки, и обе стороны должны изменить размер, как сейчас.

Ответ №1:

Я смог решить проблему, прикрепив jquery с возможностью изменения размера к «содержимому». Также использовалось решение, предоставленное в bugsdb, которое решает изменение размера панели навигации в обратном порядке.

    <style>
        body {
            margin: 0;
            background-color: #222;
        }

        #main {
            display: grid;
            grid-template-columns: 150px auto;
            height:100vh;
        }

        #nav {
            border-width: 0 0 0 0;
            border-style: solid;
            background-color: yellow;
            min-height: 100vh;
            overflow: scroll;
        }
        #insidenav {
            min-width: 400px;
            background-color: blue;
        }
        #content {
            background-color: brown;
            height: 100%;
        }
    </style>
    <script>
        $(document).ready(function() {

            //https://bugsdb.com/_en/debug/205a22489fadf5c1949aa1ac0400d691

            $.ui.plugin.add("resizable", "alsoResizeReverse", {

                start: function() {
                    var that = $(this).resizable( "instance" ),
                        o = that.options;

                    $(o.alsoResizeReverse).each(function() {
                        var el = $(this);
                        el.data("ui-resizable-alsoresizeReverse", {
                            width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
                            left: parseInt(el.css("left"), 10), top: parseInt(el.css("top"), 10)
                        });
                    });
                },

                resize: function(event, ui) {
                    var that = $(this).resizable( "instance" ),
                        o = that.options,
                        os = that.originalSize,
                        op = that.originalPosition,
                        delta = {
                            height: (that.size.height - os.height) || 0,
                            width: (that.size.width - os.width) || 0,
                            top: (that.position.top - op.top) || 0,
                            left: (that.position.left - op.left) || 0
                        };

                    $(o.alsoResizeReverse).each(function() {
                        var el = $(this), start = $(this).data("ui-resizable-alsoresize-reverse"), style = {},
                            css = el.parents(ui.originalElement[0]).length ?
                                [ "width", "height" ] :
                                [ "width", "height", "top", "left" ];

                        $.each(css, function(i, prop) {
                            var sum = (start[prop] || 0) - (delta[prop] || 0);
                            if (sum amp;amp; sum >= 0) {
                                style[prop] = sum || null;
                            }
                        });

                        el.css(style);
                    });
                },

                stop: function() {
                    $(this).removeData("resizable-alsoresize-reverse");
                }
            });


            $('#content').resizable({
                handles: 'w',
                resize: function(event, ui) {
                }
            });

            $( "#content" ).resizable( "option", "alsoResizeReverse", "#nav" );

        });
    </script>
</head>

<body>
    <div id="main">
        <section id="nav">
            <div id="insidenav">
            This area should be scrollable and resizable with scrollbars on all the time.
        </div>
        </section>
        <section id="content">content
            <input type="button" id="winWidth" value="Width"/>
        </section>
    </div>
</body>