jQuery下载按钮滑动显示文件大小

按钮 2014-11-18

控件介绍
这是一款很实用的jQuery下载按钮插件。该jQuery下载按钮当用户点击按钮时,会从按钮下发滑出一个面板显示下载文件的大小和类型。
浏览器兼容

支持IE9+

演示下载 1957
使用方法

HTML

1
2
3
4
5
6
7
<div class="buttonWrap">
    <div class="toggleButton">Download Now!</div>
     <a href="#" class="toggleSection">
            <span>Exe</span>
            7.27 MB
    </a>
</div>

CSS

插件中按钮的渐变是使用Colorzilla制作的,使用Colorzilla制作的渐变代码将能够兼容所有的浏览器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.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;
    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(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;
    width:60px;
    float:right;
    padding:5px 5px 5px 40px;
    margin:0 10px 0 0;
    font-family:arial, sans-serif;
    font-size:12px;
    text-decoration:none;
}
a.toggleSection span{font-weight:bold; display:block;}

调用插件

首先要引入jQuery

1
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.4.2/jquery.min.js"></script>

调用代码

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    $('.buttonWrap').click(function() {
        if ($('.toggleSection').is(":hidden")) {
            $('.toggleSection').slideDown("slow");
        } else {
            $('.toggleSection').slideUp("slow");
        }
        return false;
    });
});

更多信息请参看:http://andrewchamp.com/articles/sliding-download-button-using-jquery

本文转载请注明出处:http://www.zhuiye.com/detail_32.html