您的位置: 首页  >  技术问答  >  如何更改我的CSS，使我的小部件在试图“最小化”它们时不会互相重叠？

如何更改我的CSS，使我的小部件在试图“最小化”它们时不会互相重叠？

分类: 技术问答 • 2022-05-28 12:16:11
问题描述：

我问了一段时间的问题，关于如何正确地做我的CSS/HTML，所以我可以根据我有一个图像做一个圆角的部件。该问题的答案为here，该解决方案效果很好。如何更改我的CSS，使我的小部件在试图“最小化”它们时不会互相重叠？

窗口小部件看起来就像我希望他们： http://imgur.com/rMQ0C.png

它们的基本结构是：

<div id="widget3" class="widget"> 
     <div class="widget-top"> 
      <div class="widget-header"> 
       <div class="widget-nw"></div> 
       <div class="widget-n"> 
        <div class="widget-header-title">Demo Widget 3</div> 
        <div class="widget-header-link"><a href="#">Edit</a></div> 
        <div class="widget-header-controls"> 
         <span class="widget-header-control"><img src="images/icon-refresh.png" class="widget-refresh" alt="refresh" /></span> 
         <span class="widget-header-control"><img src="images/icon-minimize.png" class="widget-minimize" alt="minimize" /></span> 
         <span class="widget-header-control"><img src="images/icon-close.png" class="widget-close" alt="close" /></span> 
        </div> 
       </div> 
       <div class="widget-ne"></div> 
      </div> 
     </div> 
     <div class="widget-bottom"> 
      <div class="widget-body"> 
       <div class="widget-w"></div> 
       <div class="widget-e"></div> 
       <div class="widget-content"> 
        Demo Widget 3<br /> 
        Demo Widget 3<br /> 
        Demo Widget 3<br /> 
        Demo Widget 3<br /> 
        Demo Widget 3 
       </div> 
      </div> 
      <div class="widget-footer"> 
       <div class="widget-sw"></div> 
       <div class="widget-s"> 
        <div class="widget-footer-controls"> 
         <span class="widget-footer-control"> 
         </span> 
        </div> 
       </div> 
       <div class="widget-se"></div> 
      </div> 
     </div> 
    </div>

的CSS：

.widget-nw 
{ 
    background-image: url('images/widget-top-left.png'); 
    background-repeat: no-repeat; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 28px; 
    width: 6px; 
    z-index: 2; 
} 

.widget-ne 
{ 
    background-image: url('images/widget-top-right.png'); 
    background-repeat: no-repeat; 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 28px; 
    width: 6px; 
    z-index: 2; 
} 
.widget-sw 
{ 
    background-image: url('images/widget-bottom-left.png'); 
    background-repeat: no-repeat; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 28px; 
    width: 6px; 
    z-index: 2; 
} 

.widget-se 
{ 
    background-image: url('images/widget-bottom-right.png'); 
    background-repeat: no-repeat; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    height: 28px; 
    width: 6px; 
    z-index: 2; 
} 

.widget-w 
{ 
    background-image: url('images/widget-middle-left.png'); 
    background-repeat: repeat-y; 
    position: absolute; 
    left: 0; 
    height: 100%; 
    width: 6px; 
    z-index: 1; 
} 

.widget-e 
{ 
    background-image: url('images/widget-middle-right.png'); 
    background-repeat: repeat-y; 
    position: absolute; 
    right: 0; 
    height: 100%; 
    width: 6px; 
    z-index: 1; 
} 
.widget-n 
{ 
    background-image: url('images/widget-top-middle.png'); 
    background-repeat: repeat-x; 
    position: absolute; 
    top: 0; 
    height: 28px; 
    width: 100%; 
    z-index: 1; 
} 

.widget-s 
{ 
    background-image: url('images/widget-bottom-middle.png'); 
    background-repeat: repeat-x; 
    position: absolute; 
    bottom: 0; 
    height: 28px; 
    width: 100%; 
    z-index: 1; 
} 

.widget 
{ 
    position: relative; 
} 

.widget-header-title 
{ 
    float: left; 
    font-size: 8pt; 
    font-weight: bold; 
    font-family: Verdana, Tahoma, Helvetica; 
    margin: 8px 0px 0px 10px; 
    color: #4c3166; 
    cursor: move; 
} 

.widget-content 
{ 
    padding: 28px 6px; 
} 

.widget-header-controls 
{ 
    float: right; 
    margin: 6px 10px 0px 0px; 
} 

.widget-header-control 
{ 
cursor: pointer; 
    padding-right: 1px; 
} 

.widget-header-link 
{ 
margin: 6px 0px 0px 10px; 
float: left; 
}

但是现在，我想使小部件右上角的“向上箭头”图标切换使用jQuery最小化/最大化（所以只会显示顶部栏或相反的整个事情）。我试图使用animate（）或slideUp（）/ slideDown（）来为其设置动画效果。

$(document).ready(function() { 
    $('.widget-minimize').click(function() { 
     toggleMinimize($(this).parents('.widget').attr('id')); 
    }); 

}); 


function toggleMinimize(widgetId) { 
     if ($('#' + widgetId + ' .widget-bottom').is(':visible')) { 
      $('#' + widgetId + ' .widget-bottom').slideUp(); 
      $('#' + widgetId).find('.widget-minimize').attr('src', 'images/icon-maximize.png').attr('alt', 'maximize'); 
     } 
     else { 
      $('#' + widgetId + ' .widget-bottom').slideDown(); 
      $('#' + widgetId).find('.widget-minimize').attr('src', 'images/icon-minimize.png').attr('alt', 'minimize'); 
     } 
    }

当我尝试最小化/最大化它时，这不工作正常。我有一种感觉，它与jQuery不正确地计算我的小部件的高度有关，但我不知道真正改变小部件的简单方法。我也尝试过使用animate（）方法并改变高度，但遇到了不知道什么高度将它展开回到什么时候才能“最大化”窗口小部件的问题。而且，他们仍然互相滑动。

我该怎么做才能做到这一点，我可以正确地将我的小部件最小化/最大化，而不需要他们在彼此之间滑动（仍然是动画）？

试试吧（现场演示）：Here

答

我做了两个变化[View Here。

（我不得不暂时改变图像位置为它在JS拨弄工作，只是忽略新的URL）

首先：我做了动画人体的高度（看看JS我不仅改变了最小化/最大化功能）

二：我改变了CSS的一个行添加overflow: hidden;到.widget-content这样，当我做了它的高度为0就不会有任何四溢文本。

我这样做的唯一问题是，当你最小化盒子时，它会记住它的高度，因此它可以返回到它。因此，如果您在关闭内容时做了某些更改内容高度的操作，它将无法正确打开（某些内容会被切断或高度过高）。你可以对此做些事情，但首先告诉我这些变化是否对你有帮助。

相关推荐