Я недавно задал вопрос о том, как правильно сделать мой CSS / HTML, чтобы я мог создать округленный виджет на основе изображения, которое я имел. На вопрос был дан ответ здесь , и решение отлично работает.
Виджеты выглядят так, как я хочу:
Их основная структура:
<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 () и изменять высоту, но столкнулся с проблемами, не зная, на какую высоту его расширить, до того, когда пришло время «максимизировать» виджет. Кроме того, они все еще скользили друг на друга.
Что я могу сделать, чтобы сделать так, чтобы я мог должным образом свернуть / развернуть свой виджет без того, чтобы они скользили поверх друг друга (и при этом оставались анимированными)?
Попробуйте (Live Demo): Здесь