Latest web development tutorials

단추 (버튼) - 예를 jQuery를 UI

적절한 사용 호버 (마우스 오버) 및 활성화로 (활성) 스타일 기능 (예 : 버튼, 입력 상자, 앵커 등) 표준 양식 요소를 강화하기 위해 버튼을 테마로 할 수 있습니다.

버튼 구성 요소에 대한 자세한 내용은 API 문서를 참조하십시오 버튼 부재 (버튼 위젯을) .

기본 기능

버튼 요소, 입력 요소의 유형 및 앵커 제출 : 마커의 예는 버튼에 사용될 수있다. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목>의 jQuery UI 단추 (버튼) - 기본 기능 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스크립트>
  $ (함수 () {
    $ ( "입력 [입력 = 제출, A, 버튼")
      .button ()
      .click (함수 (이벤트) {
        에서는 event.preventDefault ();
      });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<버튼> 버튼 요소 </ 버튼>
 
<입력 유형 = 값 = "버튼을 제출", "제출">
 
<a는 앵커 </a>를보기 </a>
 
 
</ BODY>
</ HTML>

확인란

버튼 체크 박스를 이용하여 토글 버튼 스타일입니다. 표지 요소는 버튼 텍스트와 연관된 상자.

공용 컨테이너에의 호출에 의해,이 경우 .buttonset() 세 개의 디스플레이 버튼 스타일 상자에서 입증 된 바와 같이,. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 단추 (버튼) - 체크 박스 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스크립트>
  $ (함수 () {
    $ ( "#check") .button ();
    $ ( "#format") .buttonset ();
  });
  </ 스크립트>
  <스타일>
  #format {마진 - 맨 : 2EM;}
  </ 스타일>
</ 헤드>
<바디>
 
<입력 유형 = "체크 박스"ID = "확인"> <= "확인"레이블> 스위치 </ 라벨>
 
<사업부 아이디 = "형식">
  <입력 유형 = "체크 박스"ID = "CHECK1"> <= "CHECK1"레이블> B </ 라벨>
  <입력 유형 = "체크 박스"ID = "CHECK2"> <= "CHECK2"레이블> 나 </ 라벨>
  <입력 유형 = "체크 박스"ID = "check3"> <= "check3"레이블> U </ 라벨>
</ DIV>
 
 
</ BODY>
</ HTML>

아이콘

텍스트와 아이콘 버튼의 다양한 조합과 일부 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목>의 jQuery UI 단추 (버튼) - 아이콘 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스크립트>
  $ (함수 () {
    $ ( "버튼 : 첫 번째") .button ({
      아이콘 : {
        주 : "UI-아이콘 고정"
      },
      텍스트 : 거짓
    }). 다음 (). 버튼 ({
      아이콘 : {
        주 : "UI-아이콘 고정"
      }
    }). 다음 (). 버튼 ({
      아이콘 : {
        주 : "UI-아이콘 기어"
        차 : "UI-아이콘 삼각형-1의"
      }
    }). 다음 (). 버튼 ({
      아이콘 : {
        주 : "UI-아이콘 기어"
        차 : "UI-아이콘 삼각형-1의"
      },
      텍스트 : 거짓
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
만 </ 버튼>와 <버튼> 아이콘 버튼
<버튼> 왼쪽에있는 아이콘 버튼 </ 버튼>
<버튼>이 아이콘 버튼 </ 버튼>
<버튼> </ 버튼>이없는 텍스트 아이콘이 버튼을
 
 
</ BODY>
</ HTML>

라디오

버튼에 세 개의 라디오 버튼. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목>의 jQuery UI 단추 (버튼) - 라디오 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스크립트>
  $ (함수 () {
    $ ( "#radio")를 .buttonset ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<양식>
  <사업부 아이디 = "라디오">
    <입력 유형 = "라디오"ID = "radio1"이름 = "라디오"> < "radio1"= 레이블은> 1 </ 라벨>을 선택
    < "radio2"= 레이블> 2 </ 라벨>을 선택 <입력 유형 = "라디오"ID = "radio2"이름 = "라디오"체크 = "확인">
    <입력 유형 = "라디오"ID = "radio3"이름 = "라디오"> < "radio3"= 레이블이> 3 </ 라벨>을 선택
  </ DIV>
</ FORM>
 
 
</ BODY>
</ HTML>

분할 버튼 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목>의 jQuery UI 단추 (버튼) - 분할 버튼 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
    .ui 메뉴 {위치 : 절대; 폭 : 100 픽셀;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "#rerun")
      .button ()
      .click (함수 () {
        경고 ( "마지막 작업 실행");
      })
      다음 내용 ()
        .button ({
          텍스트 : 거짓,
          아이콘 : {
            주 : "UI-아이콘 삼각형-1의"
          }
        })
        .click (함수 () {
          VAR 메뉴 = $ (이) .parent (). 다음 (). 쇼 (). 위치 ({
            내 "상단 왼쪽",
            에서 "바닥을 왼쪽",
            의이
          });
          $ (문서) 사실 말이다 ({) ( "클릭"기능
            menu.hide ();
          });
          false를 반환;
        })
        .parent ()
          .buttonset ()
          다음 내용 ()
            .hide ()
            .menu ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<DIV>
  <DIV>
    <버튼 ID = "다시 실행"> 실행 마지막 작업 </ 버튼>
    <버튼 ID = "선택"> 작업을 선택 </ 버튼>
  </ DIV>
  <UL>
    <리> <a보기 </a> 오픈 ... </A> </ 리>
    <리> <a보기 </a> 저장 </A> </ 리>
    <리> <a보기 </a> 삭제 </A> </ 리>
  </ UL>
</ DIV>
 
 
</ BODY>
</ HTML>

도구 모음

멀티미디어 플레이어 도구 모음. 마커를 봐 기반 : 일부 버튼 요소는, 임의 재생 버튼 입력의 유형에 대한 확인란이며, 반복 옵션은 무선 입력의 세 가지 유형이 있습니다. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목>의 jQuery UI 단추 (버튼) - 도구 모음 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  #toolbar {
    패딩 : 4 픽셀;
    디스플레이 : 인라인 블록;
  }
  / * 지원 : IE7 * /
  * + html로의 #toolbar {
    디스플레이 : 인라인;
  }
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "#beginning") .button ({
      텍스트 : 거짓,
      아이콘 : {
        주 : "UI-아이콘-추구 스타트"
      }
    });
    $ ( "#rewind") .button ({
      텍스트 : 거짓,
      아이콘 : {
        주 : "UI-아이콘-추구-이전을"
      }
    });
    $ ( "#play") .button ({
      텍스트 : 거짓,
      아이콘 : {
        주 : "UI-아이콘 플레이"
      }
    })
    .click (함수 () {
      VAR 옵션;
      경우 ($ (이)는 .text () === "재생") {
        옵션 = {
          레이블 : "일시 중지"
          아이콘 : {
            주 : "UI-아이콘 - 일시 중지"
          }
        };
      } 그밖에 {
        옵션 = {
          레이블 : "재생",
          아이콘 : {
            주 : "UI-아이콘 플레이"
          }
        };
      }
      $ (이) .button ( "옵션"옵션);
    });
    $ ( "#STOP") .button ({
      텍스트 : 거짓,
      아이콘 : {
        주 : "UI-아이콘 스톱"
      }
    })
    .click (함수 () {
      $ ( "#play") .button ( "옵션", {
        레이블 : "재생",
        아이콘 : {
          주 : "UI-아이콘 플레이"
        }
      });
    });
    $ ( "#forward") .button ({
      텍스트 : 거짓,
      아이콘 : {
        주 : "UI-아이콘 - 탐색 - 다음"
      }
    });
    $ ( "#end에") .button ({
      텍스트 : 거짓,
      아이콘 : {
        주 : "UI-아이콘-추구 엔드"
      }
    });
    $ ( "#shuffle") .button ();
    $ ( "#repeat") .buttonset ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 아이디 = "도구 모음"클래스 = "UI 위젯 헤더 UI 코너 - 모든">
  <버튼 ID = "시작"> 시작 </ 버튼>
  <버튼 ID = "되감기"> 되감기 </ 버튼>
  <버튼 ID = "재생"> 재생 </ 버튼>
  중지 </ 버튼> <버튼 ID는 = "중지">
  <버튼 ID = "앞으로"> 빨리 감기 </ 버튼>
  <버튼 ID = "끝"> 끝 </ 버튼>
 
  <입력 유형 = "체크 박스"ID = "셔플"> < "셔플"= 레이블> 셔플 </ 라벨>
 
  <스팬 ID = "반복">
    <입력 유형 = "라디오"ID = "repeat0은"이름 = 확인 = "확인" "반복"> <= "repeat0"에 대한 라벨> 없음 반복 </ 라벨> 없음
    <입력 유형 = "라디오"ID = "REPEAT1"이름 = "반복"> <= "REPEAT1"레이블> 일단 </ 라벨>
    <입력 유형 = "라디오"ID = "repeatall"이름 = "반복"> <= "repeatall"레이블> 모든 </ 라벨>
  </ SPAN>
</ DIV>
 
 
</ BODY>
</ HTML>