입력 상자에 일부 내용을 입력 한 후 이러한 내용을 지우려면 입력 상자 오른쪽에있는 작은 원형 포크 버튼을 직접 클릭 할 수 있습니다.
텍스트
비밀번호
이메일
URL
찾다
텔
숫자
DateTime
사용 방법
재설정 입력 입력 입력 상자 컨텐츠 플러그인을 사용하여 jQuery 및 부트 스트랩 파일과 jQuery.bootstrap-pureclearbutton.js 파일을 가져 오십시오.
<link rel = "Stylesheet"href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel = "Stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <script type = "text/javascript"src = "http://code.jquery.com/jquery-2.1.1.3.3.min.js"> src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> <script type = "text/javaScript"src = "js/jquery.bootstrap-purecbutton.js"> </script>
HTML 구조
이 JQuery 버튼 플러그인의 HTML 구조는 다음 두 형식 중 하나에서 사용할 수 있습니다.
<입력 유형 = "텍스트"Data-Pure-Clear-Button> <입력 유형 = "텍스트"Data-Pure-Clear-Button = "True">
플러그인을 초기화하십시오
페이지가로드되면 다음 방법을 사용하여 플러그인을 초기화 할 수 있습니다.
$ .pureclearButton.SetDefault ({icon : 'glyphicon-plus'});방법
jQuery 플러그인에는 4 가지 방법이 있습니다.
.pureclearButtn ( 'create') : 지정된 입력 상자에서 지우기/재설정 버튼을 만듭니다.
.pureclearButtn ( 'Destroy') : 지정된 입력 상자에서 지우기/재설정 버튼을 파괴하십시오.
.pureclearButtn ( 'show') : 지정된 입력 상자에 지우기/재설정 버튼을 표시합니다.
.pureclearButtn ( 'Hide') : 지정된 입력 상자에서 지우기/재설정 버튼을 숨 깁니다.
다음은 컨텐츠를 확장하는 것입니다 : 부트 스트랩 입력 상자
1. 추가 요소를 추가하십시오
아웃소싱 요소 input-Group> 입력 그룹-아돈+양식 제어
<div> <span> 추가 요소 </span> <입력 유형 = "text"/> </div>
2. 박스 그룹 크기를 입력하십시오
Control Class.input-Group-*: .input-Group-Lg/.input-Group-Sm
<div> <span id = "sizing-addon1"> 추가 요소 </span> <input type = "text"> </div>
3. 추가 요소에 대한 여러 선택 또는 여러 선택 추가
추가 요소로 단일 또는 다중 선택 버튼 요소 중첩
<div> <span> <입력 유형 = "Radio" /> < /span> <입력 유형 = "text" /> < /div>
4. 추가 요소는 버튼입니다
추가 버튼 클래스 INPUT-GROUP-BTN
<div> <span> <button> 추가 요소 버튼 </button> </span> <입력 유형 = "text"class = "form-control"/> </div>
5. 추가 요소는 드롭 다운 버튼 메뉴입니다
.input-Group-BTN에는 드롭 다운 버튼 메뉴 요소가 포함되어 있습니다 (트리거 및 드롭 다운 메뉴 포함)
<div> <div> <버튼 데이터-토글 = "드롭 다운"> 버튼 <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a>
6. 추가 요소는 분할 버튼 드롭 다운 메뉴입니다
추가 요소에는 분할 버튼 드롭 다운 메뉴 (버튼, 트리거 및 드롭 다운 메뉴)가 포함됩니다.
<div> <div> </button> </button> <버튼 데이터-토글 = "드롭 다운"> <span> </span> </button> <ul> <li> <a href = ""> item1 </a> </li> <li> <a href = ""> item2 </a> </li> </ul> <input type = "text"/>
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.