自定义jQuery UI调整大小-自定义调整大小句柄宽度

所以我想用jQuery调整左边面板的大小。我已经在SO社区的帮助下实现了这一点，但还有一件事我想做，使这个功能对页面访问者来说是最佳的。
在我当前的代码中，调整大小交互区域非常薄。因此，有时候，如果访问者想调整面板的大小，那么找到最佳位置可能会很烦人。我想让它更大，并做了一些挖掘，发现我可以使用自定义调整大小的处理。但要么是我的语法错得离谱，要么是其他关于这是jQuery中的一个bug的帖子仍然有效。
下面是我当前的代码（我将把带有自定义大小调整句柄的代码放在下面）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Resize Handle</title>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://rawgit.com/tannernetwork/resizable/master/resizable.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://rawgit.com/tannernetwork/resizable/master/resizable.min.css">


    <script>
        $(function(){
            $("#left-bar").resizable({ 
                direction: 'right',
                /* resizeWidthFrom: 'left', */
            
                start: function() {
                  $('#left-bar, #topic-window').addClass('ignore-pointer-events');
                },
                stop: function() {
                  $('#left-bar, #topic-window').removeClass('ignore-pointer-events');
                },               
            });
        });
    </script>

    <style>
        
        #center-main{
            background-color: red;
            width: 100%;
            height: 88.25vh;
            margin-top: 3px;
            position:relative;
            outline: thin solid black;
            display: flex;
        }

        #left-bar{
            background-color: yellow;
            min-width: 250px;
            max-width: 90%;
            height: 100%;
            position: relative;
            margin-right: 1px;
            z-index: 10000;
            overflow: hidden;
            flex: 0 0 auto;
        }
            #resize-handle{
                position:absolute;
                top:0;
                right:0;
                bottom:0;
                width:15px;
                background-color: #b3b4b5;
                outline: thin solid darkgray;
            }

        
            #topic-window{
              background-color:#e9e9ed;
              width: 100%;
              outline: thin solid black;
              flex: 1 1 0;
              overflow: hidden;
            }

                #docWindow{
                  width: 100%;
                  height: 100%;        
                  position:relative;
                  background-color: aqua;        
                }

        .ignore-pointer-events > * {
          pointer-events: none;
        }
        
    </style>
</head>
<body>
    
    <div id="center-main">

        <div id="left-bar">
            <div id="resize-handle" ></div>
        </div>
        
        <div id="topic-window">
            <iframe id="docWindow" frameborder="0"></iframe>
        </div>

    </div>



</body>
</html>

字符串
以下是我后来尝试的自定义调整大小手柄：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Resize Handle</title>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://rawgit.com/tannernetwork/resizable/master/resizable.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://rawgit.com/tannernetwork/resizable/master/resizable.min.css">


    <script>
        $(function(){
            $("#left-bar").resizable({
                handles:{ 'e' : '#resize-handle' } ,
            
                start: function() {
                    $('#left-bar, #topic-window').addClass('ignore-pointer-events');
                },
                stop: function() {
                    $('#left-bar, #topic-window').removeClass('ignore-pointer-events');
                }
            });
        });
    </script>

    <style>
        
        #center-main{
            background-color: red;
            width: 100%;
            height: 88.25vh;
            margin-top: 3px;
            position:relative;
            outline: thin solid black;
            display: flex;
        }

        #left-bar{
            background-color: yellow;
            min-width: 250px;
            max-width: 90%;
            height: 100%;
            position: relative;
            margin-right: 1px;
            z-index: 10000;
            overflow: hidden;
            flex: 0 0 auto;
        }
            #resize-handle{
                position:absolute;
                top:0;
                right:0;
                bottom:0;
                width:15px;
                background-color: #b3b4b5;
                outline: thin solid darkgray;
            }

        
            #topic-window{
              background-color:#e9e9ed;
              width: 100%;
              outline: thin solid black;
              flex: 1 1 0;
              overflow: hidden;
            }

                #docWindow{
                  width: 100%;
                  height: 100%;        
                  position:relative;
                  background-color: aqua;        
                }

        .ignore-pointer-events > * {
          pointer-events: none;
        }
        
    </style>
</head>
<body>
    
    <div id="center-main">

        <div id="left-bar">
            <div id="resize-handle" class="ui-resizable-handle ui-resizable-e"></div>
        </div>
        
        <div id="topic-window">
            <iframe id="docWindow" frameborder="0"></iframe>
        </div>

    </div>



</body>
</html>

型
我还尝试了一种方法，我只是设置了handles: null;，所以我猜jQuery代码是overridden。
希望你能帮忙。

基本上，只需添加以下css：

.resizable .resizable-r {
    width: 30px !important;
}

字符串
这将放大可调整大小的元素的右控点列。

$(function() {
  $("#left-bar").resizable({
    handles: {
      'e': '#resize-handle'
    },

    start: function() {
      $('#left-bar, #topic-window').addClass('ignore-pointer-events');
    },
    stop: function() {
      $('#left-bar, #topic-window').removeClass('ignore-pointer-events');
    }
  });
});

#center-main {
  background-color: red;
  width: 100%;
  height: 88.25vh;
  margin-top: 3px;
  position: relative;
  outline: thin solid black;
  display: flex;
}

#left-bar {
  background-color: yellow;
  min-width: 250px;
  max-width: 90%;
  height: 100%;
  position: relative;
  margin-right: 1px;
  z-index: 10000;
  overflow: hidden;
  flex: 0 0 auto;
}

#resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 30px;
  background-color: #b3b4b5;
  outline: thin solid darkgray;
}

#topic-window {
  background-color: #e9e9ed;
  width: 100%;
  outline: thin solid black;
  flex: 1 1 0;
  overflow: hidden;
}

#docWindow {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: aqua;
}

.ignore-pointer-events>* {
  pointer-events: none;
}

.resizable .resizable-r {
    width: 30px !important;
}

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://rawgit.com/tannernetwork/resizable/master/resizable.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/tannernetwork/resizable/master/resizable.min.css">


<div id="center-main">

  <div id="left-bar">
    <div id="resize-handle" class="ui-resizable-handle ui-resizable-e"></div>
  </div>

  <div id="topic-window">
    <iframe id="docWindow" frameborder="0"></iframe>
  </div>

</div>

的字符串

自定义jQuery UI调整大小-自定义调整大小句柄宽度

1条答案

相关问题

热门标签

最新问答