-
input file 에 스타일 적용 시켜주는 플러그인 designFile.js - 워크식스워크식스소식/플러그인소식 2019. 1. 15. 21:14input file을 css로 디자인 할 수 있게 해주는 플러그인
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="/js/designFile_1.0.js"></script> <style> /* designFile */ .designFile{ position:relative; display:inline-block; cursor:pointer; border:1px solid #e2e2e4; border-radius: 0px; margin:1px 0px; width:100%; height: 48px; line-height: 48px; text-indent: 9px; background: #fff; color:#797979; } </style> <script> $(function(){ if ($('[type="file"]')[0]) { $('[type="file"]').each(function(){ $(this).designFile(); }); } }); </script> <input type="file" name="user_file">설치방법
1. Line1 : 제이쿼리를 설치 및 연결 합니다.
2. Line2 : 다운로드 받은 플러그인을 설치 및 연결 합니다.
3. Line4 ~ 20 : 스타일을 복사 그리고 붙여넣기 합니다. 자신의 홈페이지에 맞게 부분적으로 수정 합니다.
4. Line25 ~ Line29 : 스크립트를 복사 그리고 붙여넣기 합니다.
Install1. Line1: Install and Connect the jQuery.2. Line2: Install and connect the downloaded plug-in.3. Line4 ~ 20 : Copy and paste the style. Partially modify it to fit your Web site.4. Line25 ~ Line29 : Copy and paste the script.플러그인은 워크식스 홈페이지에서 만나보실 수 있습니다.2018/06/20 - [jQuery] - [워크식스] 토글버튼을 만들기 자바스크립트 플러그인 - designToggle_1.0.js
2018/06/18 - [jQuery] - [워크식스] select 에 css 적용하기 - designSelect_1.4.js
2018/04/05 - [jQuery] - [워크식스] 스크롤 위치에따라 이미지 차례로 불러오기 -highImageLoader_1.0.js
'워크식스소식 > 플러그인소식' 카테고리의 다른 글
[워크식스] hamburgerMenu.js 플러그인 개발 (0) 2019.03.27 [워크식스] 포트폴리오 20190227.js 플러그인 개발 (0) 2019.03.25 input file 에 스타일 적용 시켜주는 플러그인 designFile.js - 워크식스 (0) 2019.01.15 [워크식스] 토글버튼을 만들기 자바스크립트 플러그인 - designToggle_1.0.js (0) 2018.06.20 [워크식스] select 에 css 적용하기 - designSelect_1.4.js (0) 2018.06.18 [워크식스] 스크롤 위치에따라 이미지 차례로 불러오기 -highImageLoader_1.0.js (0) 2018.04.05 TAG