jQuery UI CSS 프레임워크 API

jQuery UI CSS 프레임워크

jQuery UI에는 사용자 정의 jQuery 위젯을 생성하도록 설계된 강력한 CSS 프레임워크가 포함되어 있습니다. 프레임워크에는 공통 사용자 인터페이스에 필요한 클래스가 포함되어 있으며 jQuery UI ThemeRoller를 사용하여 유지 관리할 수 있습니다. jQuery UI CSS 프레임워크를 사용하여 고유한 UI 구성 요소를 만듭니다. 플러그인 커뮤니티 내에서 코드 통합을 용이하게 하려면 공유 마크업 규칙을 채택해야 합니다.

프레임워크 클래스

스타일이 고정되어 구조화되어 있는지, 테마(색상, 글꼴, 배경 등)가 가능한지 여부에 따라 다음 CSS 클래스가 ui.core.css 및 ui.theme.css를 두 개의 파일로 묶습니다. 이러한 클래스는 애플리케이션 전체에서 시각적 일관성을 달성하기 위해 사용자 인터페이스 요소와 함께 사용되도록 설계되었으며 구성 요소는 jQuery UI ThemeRoller를 통해 테마를 지정할 수 있습니다. ui.core.css 和 ui.theme.css 两个文件中。这些类被设计来用于用户界面元素，以便获得整个应用程序的视觉一致性，可通过 jQuery UI ThemeRoller 对组件进行主题化。

布局助手

• .ui-helper-hidden：对元素应用 display: none。

• .ui-helper-hidden-accessible：对元素应用访问隐藏（通过页面绝对定位）。

• .ui-helper-reset：UI 元素的基本样式重置。重置的元素比如：padding、margin、text-decoration、list-style，等等。

• .ui-helper-clearfix：对父元素应用浮动包装属性。

• .ui-helper-zfix：对 <iframe> 元素应用 iframe "fix" CSS。

小部件容器

• .ui-widget：对所有小部件的外部容器应用的 Class。对小部件应用字体和字体尺寸，同时也对自表单元素应用相同的字体和 1em 的字体尺寸，以应对 Windows 浏览器中的继承问题。

• .ui-widget-header：对标题容器应用的 Class。对元素及其子元素的文本、链接、图标应用标题容器样式。

• .ui-widget-content：对内容容器应用的 Class。对元素及其子元素的文本、链接、图标应用内容容器样式。（可应用到标题的父元素或者同级元素）

交互状态

• .ui-state-default：对可点击按钮元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable default" 容器样式。

• .ui-state-hover：当鼠标悬浮在可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable hover" 容器样式。

• .ui-state-focus

  Layout Helper🎜
  • 🎜.ui-helper-hidden: 요소에 display: none을 적용합니다. 🎜
  • 🎜.ui-helper-hidden-accessible: 요소에 액세스 숨기기(페이지 절대 위치 지정을 통해)를 적용합니다. 🎜
  • 🎜.ui-helper-reset: UI 요소의 기본 스타일 재설정. 패딩, 여백, 텍스트 장식, 목록 스타일 등과 같은 요소를 재설정합니다. 🎜
  • 🎜.ui-helper-clearfix: 상위 요소에 부동 래퍼 속성을 적용합니다. 🎜
  • 🎜.ui-helper-zfix: iframe "fix" CSS를 <iframe> 요소에 적용합니다. 🎜
  🎜Widget Container🎜
  • 🎜.ui-widget: 모든 위젯 클래스의 외부 컨테이너에 적용됩니다. . 위젯에 글꼴 및 글꼴 크기를 적용할 뿐만 아니라 Windows 브라우저의 상속 문제를 설명하기 위해 자체 양식 요소에도 동일한 글꼴 및 1em 글꼴 크기를 적용합니다. 🎜
  • 🎜.ui-widget-header: 헤더 컨테이너에 적용되는 클래스입니다. 요소와 해당 하위 요소의 텍스트, 링크, 아이콘에 제목 컨테이너 스타일을 적용합니다. 🎜
  • 🎜.ui-widget-content: 콘텐츠 컨테이너에 적용되는 클래스입니다. 요소와 해당 하위 요소의 텍스트, 링크, 아이콘에 콘텐츠 컨테이너 스타일을 적용합니다. (제목의 상위 요소 또는 형제 요소에 적용 가능) 🎜
  🎜Interaction state🎜
  • 🎜.ui- state- default: 클릭 가능한 버튼 요소에 적용되는 클래스입니다. 요소와 해당 하위 요소의 텍스트, 링크, 아이콘에 "클릭 가능한 기본" 컨테이너 스타일을 적용합니다. 🎜
  • 🎜.ui-state-hover: 클릭 가능한 버튼 요소 위로 마우스를 가져갈 때 적용되는 클래스입니다. 요소와 하위 요소의 텍스트, 링크, 아이콘에 "클릭 가능한 마우스 오버" 컨테이너 스타일을 적용합니다. 🎜
  • 🎜.ui-state-focus: 키보드 포커스가 클릭 가능한 버튼 요소에 있을 때 적용되는 클래스입니다. 요소와 하위 요소의 텍스트, 링크, 아이콘에 "클릭 가능한 마우스 오버" 컨테이너 스타일을 적용합니다. 🎜

  • .ui-state-active: 클릭 가능한 버튼 요소를 마우스로 클릭할 때 적용되는 클래스입니다. 요소와 하위 요소의 텍스트, 링크, 아이콘에 "클릭 가능한 활성" 컨테이너 스타일을 적용합니다. .ui-state-active：当鼠标点击可点击按钮元素上时应用的 Class。对元素及其子元素的文本、链接、图标应用 "clickable active" 容器样式。

  交互提示 Cues

  • .ui-state-highlight：对高亮或者选中元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "highlight" 容器样式。

  • .ui-state-error：对错误消息容器元素应用的 Class。对元素及其子元素的文本、链接、图标应用 "error" 容器样式。

  • .ui-state-error-text：对只有无背景的错误文本颜色应用的 Class。可用于表单标签，也可以对子图标应用错误图标颜色。

  • .ui-state-disabled：对禁用的 UI 元素应用一个暗淡的不透明度。意味着对一个已经定义样式的元素添加额外的样式。

  • .ui-priority-primary：对第一优先权的按钮应用的 Class。应用粗体文本。

  • .ui-priority-secondary：对第二优先权的按钮应用的 Class。应用正常粗细的文本，对元素应用轻微的透明度。

  图标

  状态和图像

  • .ui-icon：对图标元素应用的基本 Class。设置尺寸为 16px 方块，隐藏内部文本，对 "content" 状态的精灵图像设置背景图像。注意： .ui-icon class 将根据它的父容器得到一个不同的精灵背景图像。例如，ui-state-default 容器内的 ui-icon 元素将根据 ui-state-default 的图标颜色进行着色。

  图标类型

  在声明 .ui-icon class 之后，接着您可以声明一个秒速图标类型的 class。通常情况下，图标 class 遵循语法 .ui-icon-{icon type}-{icon sub description}-{direction}。

  例如，一个指向右侧的三角形图标，如下所示：.ui-icon-triangle-1-e

  jQuery UI 的 ThemeRoller 在它的预览一栏中提供了全套的 CSS 框架图标。将鼠标悬浮在图标上可查看 class 名称。

  其他视觉效果

  圆角半径助手

  • .ui-corner-tl：对元素的左上角应用圆角半径。

  • .ui-corner-tr：对元素的右上角应用圆角半径。

  • .ui-corner-bl：对元素的左下角应用圆角半径。

  • .ui-corner-br：对元素的右下角应用圆角半径。

  • .ui-corner-top

  대화형 신호

  🎜🎜.ui-state-highlight: 애플리케이션 클래스 요소를 강조 표시하거나 선택합니다. 요소와 하위 요소의 텍스트, 링크, 아이콘에 "강조 표시" 컨테이너 스타일을 적용합니다. 🎜🎜🎜🎜.ui-state-error: 오류 메시지 컨테이너 요소에 적용되는 클래스입니다. 요소와 해당 하위 요소의 텍스트, 링크, 아이콘에 "오류" 컨테이너 스타일을 적용합니다. 🎜🎜🎜🎜.ui-state-error-text: 배경 없이 오류 텍스트 색상에 적용되는 클래스입니다. 양식 라벨에 사용할 수 있으며, 하위 아이콘에 오류 아이콘 색상을 적용할 수도 있습니다. 🎜🎜🎜🎜.ui-state-disabled: 비활성화된 UI 요소에 희미한 불투명도를 적용합니다. 이미 정의된 스타일 요소에 추가 스타일을 추가하는 것을 의미합니다. 🎜🎜🎜🎜.ui-priority-primary: 첫 번째 우선순위 버튼에 적용되는 클래스입니다. 굵은 텍스트를 적용합니다. 🎜🎜🎜🎜.ui-priority-secondary: 두 번째 우선순위 버튼에 적용되는 클래스입니다. 요소에 보통 두께의 텍스트와 약간의 투명도를 적용합니다. 🎜🎜

  아이콘

  상태 및 이미지

  🎜🎜.ui-icon: 아이콘 요소에 적용되는 기본 클래스입니다. 크기를 16px 정사각형으로 설정하고, 내부 텍스트를 숨기고, "content" 상태에서 스프라이트 이미지의 배경 이미지를 설정합니다. 참고: .ui-icon 클래스는 상위 컨테이너에 따라 다른 스프라이트 배경 이미지를 가져옵니다. 예를 들어 ui-state-default 컨테이너 내의 ui-icon 요소는 ui-state-default 아이콘 색상에 따라 색상이 지정됩니다. . 🎜🎜

  아이콘 유형

  🎜 .ui-icon 클래스를 선언한 후 두 번째 속도 아이콘 유형의 클래스를 선언할 수 있습니다. 일반적으로 아이콘 클래스는 .ui-icon-{아이콘 유형}-{아이콘 하위 설명}-{방향} 구문을 따릅니다. 🎜🎜예를 들어 오른쪽을 가리키는 삼각형 아이콘은 다음과 같습니다. .ui-icon-triangle-1-e🎜🎜ThemeRoller는 미리보기 열에 CSS 프레임 아이콘 전체 세트를 제공합니다. 아이콘 위에 마우스를 올리시면 수업명을 보실 수 있습니다. 🎜

  기타 시각 효과

  코너 반경 도우미

  🎜🎜.ui-corner-tl: 적용 요소의 왼쪽 위 모서리에 대한 모서리 반경입니다. 🎜🎜🎜🎜.ui-corner-tr: 요소의 오른쪽 상단 모서리에 모서리 반경을 적용합니다. 🎜🎜🎜🎜.ui-corner-bl: 요소의 왼쪽 하단 모서리에 모서리 반경을 적용합니다. 🎜🎜🎜🎜.ui-corner-br: 요소의 오른쪽 하단 모서리에 모서리 반경을 적용합니다. 🎜🎜🎜🎜.ui-corner-top: 요소의 왼쪽 및 오른쪽 모서리에 모서리 반경을 적용합니다. 🎜

  • .ui-corner-bottom: 요소의 왼쪽 및 오른쪽 모서리에 모서리 반경을 적용합니다. .ui-corner-bottom：对元素下边的左右角应用圆角半径。

  • .ui-corner-right：对元素右边的上下角应用圆角半径。

  • .ui-corner-left：对元素左边的上下角应用圆角半径。

  • .ui-corner-all：对元素的所有四个角应用圆角半径。

  覆盖 & 阴影

  • .ui-widget-overlay：对覆盖屏幕应用 100% 宽度和高度，同时设置背景颜色/纹理和屏幕不透明度。

  • .ui-widget-shadow

  .ui-corner-right: 요소 오른쪽의 위쪽 및 아래쪽 모서리에 모서리 반경을 적용합니다.