Latest web development tutorials

의 jQuery UI 예 - 파트 갤러리 (위젯 공장)

상태 jQuery 플러그인을 만들 모두 같은 추상화와 jQuery를 UI 위젯을 사용합니다.

위젯 라이브러리 (위젯 공장)에 대한 자세한 내용은 API 문서 확인 구성 요소 라이브러리 (위젯 공장) .

기본 기능

데모는 사용자 정의 위젯을 만들 구성 요소 라이브러리 (jquery.ui.widget.js)를 사용하는 간단한을 보여줍니다.

다른 방법으로 세 블록을 초기화합니다. 자신의 배경색을 변경하려면 클릭합니다. 보기 소스 코드와 의견이 어떻게 작동하는지 이해합니다. 

<! 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">
  <스타일>
  .custom-색상 화 {
    글꼴 크기 : 20 픽셀;
    위치 : 상대;
    폭 : 75px;
    높이 : 75px;
  }
  .custom-색상 화 체인저 {
    글꼴 크기 : 10px;
    위치 : 절대;
    오른쪽 : 0;
    바닥 : 0;
  }
  </ 스타일>
  <스크립트>
  $ (함수 () {
    // 회원의 정의에있어서, "사용자 정의"네임 스페이스 "색상 화"멤버 $의 된 .widget ( "custom.colorize"의 이름입니다 {
      // 기본 옵션 : {
        빨간색 : 255,
        녹색 : 0,
        블루 : 0,
 
        // 콜백 변화 : 널 (null),
        랜덤 : 널 (null)
      },
 
      // 생성자 _create : 함수 () {
        this.element
          // 클래스의 항목을 추가
          .addClass ( "사용자 정의 색상 화")
          // 방지) (텍스트 .disableSelection을 선택 더블 클릭;
 
        this.changer = $ ( "<버튼>", {
          텍스트 : "변화"
          "클래스": "사용자 정의 색상 화 체인저"
        })
        .appendTo (this.element)
        .button ();
 
        임의의 방법 this._on (this.changer, {에 클릭 이벤트 체인저 버튼 바인딩 //
          위젯을 사용하지 // 경우, _on 무작위로 호출되지
          클릭 : "랜덤"
        });
        this._refresh ();
      },
 
      () 함수 {// 변경 한 다음 만들 때 _refresh 전화 옵션을
        this.element.css ( "배경 색", "RGB ("+
          this.options.red + ","+
          this.options.green + ","+
          this.options.blue + ")"
        );
 
        콜백 / 이벤트 this._trigger ( "변경")을 트리거 //;
      },
 
      임의의 값으로 색상을 변경 // // 공개 방법 ( "임의의") 임의 .colorize를 통해 직접 호출 할 수 있습니다 : 함수 (이벤트) {
        var에 색상 = {
          빨간색 : Math.floor (인 Math.random () * 256),
          녹색 : Math.floor (인 Math.random () * 256),
          블루 : Math.floor (인 Math.random () * 256)
        };
 
        이벤트를 트리거 // 취소 여부를 확인하는 경우 (this._trigger ( "임의의"이벤트, 색상)! == 거짓) {
          this.option (색);
        }
      },
 
      // 여기에 _on에 구속 자동 제거 이벤트는 다른 수정의 _destroy를 재설정 // : 함수 () {
        //) (this.changer.remove 생성 요소를 제거;
 
        this.element
          .removeClass ( "사용자 정의 색상 화")
          .enableSelection ()
          .CSS ( "배경 색", "투명");
      },
 
      함수 () {: 해시에 의해 // _setOptions 모든 변경 옵션은 항상 _setOptions를 새로 고칠 때 // 호출 옵션 변경
        // _super 그리고 _superApply
        this._superApply (인수);
        this._refresh ();
      },
 
      // _setOption _setOption 옵션 전화를 변경하려면 각 개인의 경우 : 기능 (키, 값) {
        // 색상 값이 유효하지 않도록 경우 (/red|green|blue/.test(key) && (값 <0 || 값> 255)) {
          반환;
        }
        this._super (키, 값);
      }
    });
 
    // 기본 옵션 $를 초기화 ( "# 내-WIDGET1") .colorize ();
 
    // 두 개의 사용자 정의 옵션으로는 $ ( "# 내-WIDGET2") .colorize을 ({초기화
      빨간색 : 60,
      블루 : 60
    });
 
    // 자기 정의 된 값으로 그린 ​​만 충분한 녹색 색상 임의 콜백 $ ( "# 내-WIDGET3") .colorize을 ({초기화 할 수 있습니다
      녹색 : 128,
      랜덤 : 함수 (이벤트, UI) {
        ui.green> (128)를 반환;
      }
    });
 
    // 클릭 스위치 활성화 / 비활성화
    () {$ ( "#disable") .click (기능
      "사용자 정의 색상 화") .colorize (있는 경우 ($ (각 위젯 // 사용자 정의 선택기는 모든 인스턴스 // 함께 전환의 모든 인스턴스를 찾을 수 있습니다, 그래서 우리는 확인하기 위해 제 1 상태에서 시작할 수 있습니다 "옵션", "장애인")) {
        $ ( ": 맞춤 색상 화") .colorize ( "활성화");
      } 그밖에 {
        $ ( ": 맞춤 색상 화") .colorize ( "사용 안 함");
      }
    });
 
    // 초기화 한 후, {) .click (기능 (설정 옵션 $ ( "#black")을 클릭
      $ ( ": 맞춤 색상 화") .colorize ( "옵션", {
        빨간색 : 0,
        녹색 : 0,
        블루 : 0
      });
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<DIV>
  <사업부 아이디 = "내-WIDGET1"> 색상 변경 </ DIV>
  <사업부 아이디 = "내-WIDGET2"> 색상 변경 </ DIV>
  <사업부 아이디 = "내-WIDGET3"> 색상 변경 </ DIV>
  <버튼 ID = "비활성화"> 전환 비활성화 옵션 </ 버튼>
  블랙에 <버튼 ID = "블랙"> </ 버튼>
</ DIV>
 
 
</ BODY>
</ HTML>