[HTML/CSS]uploadify 사용자 정의 버튼 스타일

7231 단어 uploadify
개술
프로젝트에서 uploadify로 플러그인을 업로드하는 데 자주 사용되지만 FLASH 단추의 외관은 종종 우리 웹 페이지의 디자인 테마 색과 어울리지 않는다.이때 그 스타일을 수정해야 한다. 
스타일 파일은 uploadify입니다.css.
이 파일을 열면 CSS에서 설정한 버튼 스타일이 표시됩니다. 
 1 .uploadify-button {
 2     background-color: #505050;
 3     background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
 4     background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
 5     background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
 6     background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
 7     background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
 8     background-image: -webkit-gradient(
 9         linear,
10         left bottom,
11         left top,
12         color-stop(0, #505050),
13         color-stop(1, #707070)
14     );
15     background-position: center top;
16     background-repeat: no-repeat;
17     -webkit-border-radius: 30px;
18     -moz-border-radius: 30px;
19     border-radius: 30px;
20     border: 2px solid #808080;
21     color: #FFF;
22     font: bold 12px Arial, Helvetica, sans-serif;
23     text-align: center;
24     text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
25     width: 100%;
26 }
27 .uploadify:hover .uploadify-button {
28     background-color: #606060;
29     background-image: linear-gradient(top, #606060 0%, #808080 100%);
30     background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
31     background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
32     background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
33     background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
34     background-image: -webkit-gradient(
35         linear,
36         left bottom,
37         left top,
38         color-stop(0, #606060),
39         color-stop(1, #808080)
40     );
41     background-position: center bottom;
42 }

아래 코드를 수정하여 위의 코드를 대체하는 것이 가장 간단한 방법입니다.
1 .uploadify-button {
2 background:url(upload.PNG);
3 }
4 .uploadify:hover .uploadify-button {
5 background:url(upload.PNG);
6 }

다음은 버튼의 문자를 수정하는 것입니다. 기본적으로'SELECT FILES'는 영어입니다. 물론 업로드디프의 속성을 수정할 수 있습니다. 메인 페이지의 문자와 일치하기 위해서는 중국어로 수정해야 합니다.jquery를 엽니다.uploadify.js, 이 문자열을 검색하면 위치를 찾을 수 있습니다.
buttonText:"
SELECT FILES",
이것은 js 파일에서 수정된 것입니다. 속성에서 값을 다시 설정할 수도 있습니다.여기 있는 문자열을 원하는 것으로 바꾸면 됩니다.이 문자열이 단추에 표시되는 위치를 어떻게 조정해야 하는지 직접 비워 두었습니다.
총결산
문제에 부딪히면 문제를 해결하고 제3자의 플러그인을 자주 사용하지만 문제에 부딪히면 깊이 연구해서 일부 코드를 수정하면 문제를 해결할 수 있다.

좋은 웹페이지 즐겨찾기