在 jQuery Layout Plugin 上调整大小时，放置在调整大小上的按钮会消失

Posted 2023-05-09

【中文标题】在 jQuery Layout Plugin 上调整大小时，放置在调整大小上的按钮会消失

【英文标题】：Buttons placed on resizer disappears when resizing on jQuery Layout Plugin

【发布时间】：2018-06-21 20:56:46

【问题描述】：

我在我的 Web 应用程序中使用 jQuery UI 布局插件 (layout.jquery-dev.net/index.cfm)。

仅使用 3 个面板（中心、西部和北部），我已将调整大小设置为可调整大小，同时在西部面板上使用鼠标拖动。 这个函数在我的 AngularJS 指令中：

$(element[0]).layout(
    north__resizable: false,
    closable: false,
    slidable: false,
    north: 
        spacing_open: 0,
        resizable: false,
        togglerLength_open: 0,
        togglerLength_closed: 0,
        minSize: 30,
        maxSize: 30
    ,
    west: 
        spacing_open: 8,
        size: 250,
        minSize: 160,
        maxSize: 600,
        resizable: true,
        resizeWhileDragging: true
    ,
    center: 
        spacing_open: 30,
        resizable: false,
        closable: false,
        slidable: false,
        resizeWhileDragging: true
    
);

出于设计目的，我在垂直大小调整器的中间放置了一个图标。 这个函数在我的控制器的 init() 上：

    _self.setResizableLayout = function() 
        $timeout(function () 
            $('.ui-layout-resizer-west').attr('ng-attr-title', "'drag' | translate");
            $('.ui-layout-resizer-west').append(
                '<span class="icon-dots-three-horizontal3" style="-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); font-size: 5px; display: block; position: absolute; top: 50%; margin-left: -4px; opacity: 0.6; visibility: visible!important;"></span>');
        , 200)
    

此外，每当悬停并单击调整大小时，都会出现:hover 和:active 样式：

.ui-layout-resizer-west 
    border-left: 1px solid #dadee3;
    background: #f0f3f8;
    border-right: none;
    width: 8px !important;

    &:hover, &:active 
        border-right: 1px solid #dadee3;
        background: #E1EAF2;
        cursor: move !important;
        cursor: -moz-grab !important;
        cursor: -webkit-grab !important;
        border-right: 1px solid #dadee3;
    

问题

---

每当我单击开始拖动垂直调整大小时，稍微移动一下后，图标就会消失。只有在松开鼠标按钮时才会再次出现。 每当我拖动调整器时，当光标未悬停在元素上时，:hover 效果就会丢失（例如，当将调整器拖到其限制并进一步移动光标时，同时仍按下鼠标按钮）。似乎它忽略了:active 选择器。

问题：是否有任何解决方法，以便我可以在拖动调整大小时保持图标始终显示并保持:hover 样式？

答案

---

display: none 成功了。 更好地查看文档，并在拖动调整器时使用我想要的样式实现了 css 类 .ui-layout-resizer-dragging。

【参考方案1】：

对于悬停方面，我在我的样式上实现了 .ui-layout-resizer-dragging 类，其样式与我的 :hover 和 :active 选择器相同（也许最后一个现在没用了）：

        &:hover, &:active 
            background: #E1EAF2;
            cursor: move !important;
            cursor: -moz-grab !important;
            cursor: -webkit-grab !important;
            border-right: 1px solid #dadee3;
        
    
    .ui-layout-resizer-dragging  /* resizer beging 'dragging' */
        background: #E1EAF2;
        cursor: move !important;
        cursor: -moz-grab !important;
        cursor: -webkit-grab !important;
        border-right: 1px solid #dadee3;
        display: none;
    

我在上面看到的.ui-layout-resizer-dragging 类上使用了display: none，所以当我拖动调整大小时会显示图标。