Latest web development tutorials

jQuery를 UI CSS 프레임 워크 API

jQuery를 UI CSS 프레임 워크

jQuery를 UI는 사용자의 jQuery 위젯 및 디자인을 생성하기 위해 강력한 CSS 프레임 워크를 포함한다. 프레임에 필요한 공통 사용자 인터페이스 클래스를 포함하고 jQuery를 UI ThemeRoller 유지 보수를 사용할 수 있습니다. jQuery를 UI CSS 프레임 워크를 사용하여 자신의 UI 구성 요소를 만들어. 당신은 코드의 사회 통합을 연결하기 위해, Sharemark 협약을 사용해야합니다.

프레임 워크 클래스

구조화에 따라 해결 된 다음 CSS 클래스 스타일이 있습니까, 아니면 themable (색상, 글꼴, 배경 등) 여부에 정의되어 ui.core.cssui.theme.css 두 개의 파일. 이러한 클래스는 컴포넌트의 테마 jQuery를 UI ThemeRoller하여 애플리케이션 전체 비주얼 일관성을 달성하기 위해 사용자 인터페이스 엘리먼트를 위해 설계된다.

레이아웃 도우미

  • .ui-helper-hidden : 응용 프로그램의 요소 display: none .
  • .ui-helper-hidden-accessible : 숨겨진 (페이지로 절대 위치)에 액세스 할 수있는 응용 프로그램의 요소를.
  • .ui-helper-reset : 기본 스타일의 UI 요소를 재설정합니다. : 같은 요소 다시 padding , margin , text-decoration 등, 목록 스타일 등을.
  • .ui-helper-clearfix : 부모 요소 플로트 포장 속성의 응용 프로그램입니다.
  • .ui-helper-zfix : 대한 <iframe> 요소는 CSS를 "수정"은 iframe을 적용합니다.

위젯 컨테이너

  • .ui-widget : 용기의 외부에 클래스 위젯을 모두 적용합니다. 글꼴 및 글꼴 크기뿐만 아니라 신청서 요소와 1em 글꼴 크기와 같은 글꼴 위젯 응용 프로그램은 윈도우 탐색기의 승계에 대처한다.
  • .ui-widget-header : 제목 컨테이너 응용 프로그램 클래스. 요소와 그 아이들의 텍스트, 링크, 아이콘 스타일의 컨테이너를 향하고 적용됩니다.
  • .ui-widget-content : 컨테이너 응용 프로그램의 수업 내용. 요소와 그 아이들의 텍스트, 링크, 아이콘 응용 프로그램 콘텐츠 컨테이너 스타일. (부모 요소의 제목이나 형제 자매에 적용 할 수 있습니다)

대화 형 상태

  • .ui-state-default : 버튼 요소를 클릭하면이 클래스를 적용 할 수 있습니다. 요소와 그 아이들의 텍스트, 링크, 아이콘 응용 프로그램 "클릭 기본"스타일의 용기.
  • .ui-state-hover : 마우스 때 클래스에 클릭 버튼 요소에 적용 할 때 중단했다. 요소와 그 아이들의 텍스트, 링크, 아이콘 응용 프로그램 "클릭 가져가"컨테이너 스타일.
  • .ui-state-focus : 응용 프로그램 클래스 때 클릭 버튼 요소에 키보드 포커스. 요소와 그 아이들의 텍스트, 링크, 아이콘 응용 프로그램 "클릭 가져가"컨테이너 스타일.
  • .ui-state-active : 마우스 클릭 버튼 요소를 클릭 할 수 있습니다 응용 프로그램 클래스. 요소와 그 아이들의 텍스트, 링크, 아이콘 응용 프로그램 "클릭 활성화"컨테이너 스타일.

대화 형 메시지 큐

  • .ui-state-highlight : 강조 표시 또는 클래스 요소 응용 프로그램을 선택합니다. 요소와 그 아이들의 텍스트, 링크, 아이콘 응용 프로그램 "하이라이트"컨테이너 스타일.
  • .ui-state-error : 오류 메시지 컨테이너 요소 응용 프로그램 클래스. 요소와 그 아이들의 텍스트, 링크, 아이콘 응용 프로그램 "오류"컨테이너 스타일.
  • .ui-state-error-text :뿐만 아니라 응용 프로그램 오류 텍스트 클래스의 배경색에 대해. 서브 - 컬러 어플리케이션 아이콘 에러 아이콘 될 라벨을 형성하는데 사용될 수있다.
  • .ui-state-disabled : UI 요소가 희미 불투명도를 적용하지 않도록합니다. 그것은 이미 정의 스타일의 요소가 추가 스타일을 추가하는 것을 의미한다.
  • .ui-priority-primary : 우선 버튼 응용 프로그램의 클래스입니다. 굵은 텍스트의 응용 프로그램입니다.
  • .ui-priority-secondary : 두 번째 우선 순위 버튼 응용 프로그램의 클래스입니다. 정상 체중 텍스트 요소의 적용은 약간의 투명도를 적용 할 수 있습니다.

아이콘

상태 및 이미지

  • .ui-icon : 응용 프로그램의 아이콘을 요소의 기본 클래스. 배경 이미지를 설정 한 "콘텐츠"상태 스프라이트의 텍스트 안에 숨겨져 16px 사각형의 크기를 설정합니다. 참고 : .ui-icon , 클래스는 부모 컨테이너에 따라 다른 배경 이미지 스프라이트를 얻을 것이다. 예를 들어, ui-state-default 컨테이너 ui-icon 요소에 따라 ui-state-default 색상 아이콘의 색상을.

아이콘 유형

성명에서 .ui-icon 수업 후, 당신은 클래스의 아이콘 형의 제 2 속도를 선언 할 수 있습니다. 정상적인 상황에서는 아이콘 클래스는 구문 다음 .ui-icon-{icon type}-{icon sub description}-{direction} .

예를 들어, 다음과 같이 삼각형 아이콘 오른쪽을 가리키는 : .ui-icon-triangle-1-e

jQuery를 UI의 ThemeRoller 의 미리보기 열에는 CSS 프레임 워크 아이콘의 전체 범위를 제공합니다. 클래스 이름을 볼 수있는 아이콘 위로 마우스를.

기타 영상

반경 도우미

  • .ui-corner-tl : 응용 프로그램 요소 반경의 왼쪽 상단 모서리.
  • .ui-corner-tr : 응용 프로그램 요소 반경의 오른쪽 상단.
  • .ui-corner-bl : 응용 프로그램 요소 반경의 왼쪽 아래 모서리.
  • .ui-corner-br : 응용 프로그램 요소 반경의 오른쪽 하단.
  • .ui-corner-top : 응용 프로그램 요소 반경의 왼쪽 상단 모서리.
  • .ui-corner-bottom : 응용 프로그램 반경의 왼쪽 하단 모서리의 요소.
  • .ui-corner-right : 응용 반경의 상부 및 하부 오른쪽 대각선 요소.
  • .ui-corner-left : 응용 반경의 상부 및 하부 좌측 대각선 요소.
  • .ui-corner-all : 요소의 적용 반경의 네 모서리.

커버 및 그림자

  • .ui-widget-overlay : 애플리케이션의 화면 폭과 높이의 100 %를 포함하고, 화면의 배경색 / 질감과 투명도를 설정한다.
  • .ui-widget-shadow : 응용 프로그램 범위의 클래스, 불투명도는가 / 왼쪽 오프셋 및 그림자 오프셋 설정 "두께를." 두께는 (패딩)이 적용된 그림자 세트 마진 모든 측면입니다. 적용된 마진 (여백)과 왼쪽 여백 (여백)을 설정하여 오프셋 (긍정적이 될 수는 음수가 될 수 있습니다.)