Раздвижная кнопка "Download" с размером
И так дорогие пользователи в этом уроке мы сделаем Раздвижная кнопка "Download" с размером нашего файла!!
1 что мы делаем это задаем ей стиль!!!
Code
/* BUTTON SLIDER */
.buttonWrap{width:170px; height:80px; display:block;}
.toggleButton{
display:block;
width:170px;
height:30px;
padding:10px 0 0 0;
text-size:24px;
font-family:arial, sans-serif;
font-weight:bold;
text-align:center;
color:#FFF;
text-decoration:none;
border-radius:7px; -moz-border-radius:7px;
cursor:pointer;
border:1px solid #05ABE0;
text-shadow:-1px -1px 0px #05ABE0;
background: #87E0FD;
background: -moz-linear-gradient(top, #87E0FD 0%, #53CBF1 40%, #05ABE0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87E0FD), color-stop(40%,#53CBF1), color-stop(100%,#05ABE0));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87E0FD', endColorstr='#05ABE0',GradientType=0 );
}
.toggleButton:active{
background: #87e0fd;
background: -moz-linear-gradient(top, #05ABE0 0%, #53CBF1 40%, #87E0FD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05ABE0), color-stop(40%,#53CBF1), color-stop(100%,#87E0FD));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05ABE0', endColorstr='#87E0FD',GradientType=0 );
}
a.toggleSection{
display:none;
color:#333;
background:#EEE url('http://get-element.3dn.ru/demo/img/icon-dl.png') no-repeat 5px center;
border-left:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD;
border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px;
width:60px;
float:right;
padding:5px 5px 5px 40px;
margin:0 10px 0 0;
font-family:arial, verdana, sans-serif;
font-size:12px;
text-decoration:none;
}
a.toggleSection span{font-weight:bold; display:block;}
.buttonWrap{width:170px; height:80px; display:block;}
.toggleButton{
display:block;
width:170px;
height:30px;
padding:10px 0 0 0;
text-size:24px;
font-family:arial, sans-serif;
font-weight:bold;
text-align:center;
color:#FFF;
text-decoration:none;
border-radius:7px; -moz-border-radius:7px;
cursor:pointer;
border:1px solid #05ABE0;
text-shadow:-1px -1px 0px #05ABE0;
background: #87E0FD;
background: -moz-linear-gradient(top, #87E0FD 0%, #53CBF1 40%, #05ABE0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87E0FD), color-stop(40%,#53CBF1), color-stop(100%,#05ABE0));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87E0FD', endColorstr='#05ABE0',GradientType=0 );
}
.toggleButton:active{
background: #87e0fd;
background: -moz-linear-gradient(top, #05ABE0 0%, #53CBF1 40%, #87E0FD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05ABE0), color-stop(40%,#53CBF1), color-stop(100%,#87E0FD));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05ABE0', endColorstr='#87E0FD',GradientType=0 );
}
a.toggleSection{
display:none;
color:#333;
background:#EEE url('http://get-element.3dn.ru/demo/img/icon-dl.png') no-repeat 5px center;
border-left:1px solid #DDD; border-right:1px solid #DDD; border-bottom:1px solid #DDD;
border-radius:0 0 5px 5px; -moz-border-radius:0 0 5px 5px;
width:60px;
float:right;
padding:5px 5px 5px 40px;
margin:0 10px 0 0;
font-family:arial, verdana, sans-serif;
font-size:12px;
text-decoration:none;
}
a.toggleSection span{font-weight:bold; display:block;}
Теперь мы подключим маленький скрипт, который будет выдвигать панель панель с размером!!
Code
<script language="javascript">
$(document).ready(function() {
$('.buttonWrap').click(function() {
if ($('.toggleSection').is(":hidden")) {
$('.toggleSection').slideDown("slow");
} else {
$('.toggleSection').slideUp("slow");
}
return false;
});
});
</script>
$(document).ready(function() {
$('.buttonWrap').click(function() {
if ($('.toggleSection').is(":hidden")) {
$('.toggleSection').slideDown("slow");
} else {
$('.toggleSection').slideUp("slow");
}
return false;
});
});
</script>
И последнее что осталось так это код самой кнопки!!!
Вставляем ее туда где хотите видеть нашу кнопку!!!
Code
<div id="container">
<div class="buttonWrap">
<div class="toggleButton">Download Now!</div>
<a href="#" class="toggleSection">
<span>Exe</span>
7.27 MB
</a>
</div>
</div>
<div class="buttonWrap">
<div class="toggleButton">Download Now!</div>
<a href="#" class="toggleSection">
<span>Exe</span>
7.27 MB
</a>
</div>
</div>
Ну вот и все!!! Кнопка готова..
P.S. если у вас не подключен jQuery то это вставьте между тегами
Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
FalleN -
1426 -
1 -
0
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...