修改Uploadify上傳插件的按鈕爲超連接

由於最近要用到上傳功能,以前一直是用jspsmartupload組件上傳,一直以來以爲jquery插件的界面好炫,並且在web的各類組件中都有不少不一樣但功能都很強大的插件,因而搜索了下,選擇了uploadify,通過嘗試,實現了上傳功能,但要求是點擊超連接實現上傳功能。第一反應我想就是經過css文件來控制的,因而找到uploadify的樣式文件uploadify.css,把控制按鈕樣式的相關css註釋掉 css

/*  .uploadify-button {
    background-color: #505050;
    background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #505050),
        color-stop(1, #707070)
    );
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border: 2px solid #808080;
    color: #FFF;
    font: bold 12px Arial, Helvetica, sans-serif;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    width: 100%;
}  */
/* .uploadify:hover .uploadify-button {
    background-color: #606060;
    background-image: linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #606060),
        color-stop(1, #808080)
    );
    background-position: center bottom;
}  */ jquery

加上本身的css控制: web

 .uploadify-button {
  
    text-decoration:underline;
    color:blue
}
 .uploadify:hover .uploadify-button {
  
    text-decoration:underline;
    color:green
} jquery插件

界面修改先後以下,固然修改後的不是真正的<a>標籤超連接 jsp

demo上傳按鈕: 插件

修改後: it

假如設置 'buttonText':'select a file to upload...',效果以下: io

鼠標移動文字上面效果 file

相關文章
相關標籤/搜索