概述
在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配。这时就需要对其样式进行修改。
样式文件是uploadify.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;
}
用修改下面的代码替换上面的代码,用图片代替是最简单一种方式:
.uploadify-button {
background:url(upload.PNG);
}
.uploadify:hover .uploadify-button {
background:url(upload.PNG);
}
下面就是修改一下按钮上的文字了,默认的是"SELECT FILES",这是英文的,当然你可以通过uploadify的属性进行修改,为了跟主页面的文字保持一致,还是要修改成中文的。打开jquery.uploadify.js,搜索这个字符串你就会找到它的位置:
buttonText:"SELECT FILES",
这是在js文件中修改的,也可以在属性中对其重新设置值。把这里的字符串替换成你想要的就可以了。我是直接设置为空了,因为这个字符串在按钮上的显示位置还得去找怎么调整。
总结
遇到问题,解决问题,虽然经常用到第三方的插件,但是遇到问题了,不妨深入的研究一下,修改部分代码即可解决问题。