jQuery UI 테마

모든 jQuery UI 플러그인을 사용하면 개발자는 UI 위젯을 웹 사이트나 애플리케이션의 모양과 느낌에 원활하게 통합할 수 있습니다. 각 플러그인은 CSS를 통해 스타일을 정의하며 표준 jQuery UI CSS 프레임워크 스타일과 특정 플러그인 스타일이라는 두 가지 스타일 정보 계층을 포함합니다.

jQuery UI CSS 프레임워크는 제목, 콘텐츠 또는 클릭 가능한 영역과 같은 위젯 내 요소의 역할을 나타내는 의미 체계 표현 클래스를 제공합니다. 이는 모든 위젯에서 일관되며 클릭 가능한 탭, 아코디언 또는 버튼에는 동일한 ui-state-default 클래스가 있으며 클릭 가능함을 나타내는 데 사용됩니다. 사용자가 이러한 요소 위로 마우스를 가져가면 이 클래스는 ui-state-hover가 되고, 이러한 요소를 선택하면 ui-state-active가 됩니다. 이러한 클래스의 일관성으로 인해 비슷한 역할이나 상호 작용 상태를 가진 요소가 모든 위젯에서 일관되게 나타납니다. ui-state-default class，用来表明它们是可点击的。当用户鼠标悬浮在这些元素上面时，这个 class 就变成 ui-state-hover，当选中这些元素时则变成 ui-state-active。这些 class 的一致性使得所有部件中具有相似角色或交互状态的元素在外观表现上一致。

CSS 框架样式封装在一个单独的文件中，名为 ui.theme.css。这个文件时通过 ThemeRoller 应用程序来修改的。框架样式只包含影响外观和感观的属性，只要是颜色、背景图像、图标等。所以这些是 "安全的" 样式，不会影响到插件的功能。这种分隔意味着开发人员可以通过在 theme.css 文件中修改颜色和图像来创建一个自定义的外观和感观。由于未来的插件或者 bug 修复将是可用的，这些不通过修改即可与主题一起使用。

由于框架样式只覆盖了外观和感观，所以还需要包含具体的插件样式表，这些样式表包括了所有额外的让小部件具有功能性的结构样式规则，比如尺寸、内边距、外边距、定位、浮动。每个插件的样式表位于 themes/base 文件夹内，且配合插件进行命名，比如 "jquery.ui.accordion.css"。这些样式必须认真编辑，因为它们与脚本一起提供了框架样式的覆盖。

我们鼓励所有的开发人员创建 jQuery 插件，jQuery UI CSS 框架使得最终用户更容易定制主题和使用插件。

主题化

下面列出了三种主题化 jQuery UI 插件的一般方法：

• 下载 ThemeRoller 主题：最早的创建主题的方式是使用 ThemeRoller 来生成和下载一个主题。这个应用程序将创建一个新的 ui.theme.css 文件和一个包含了所有必需的背景图像及图标精灵的 images

  CSS 프레임워크 스타일은 ui.theme.css라는 별도의 파일에 캡슐화됩니다. 이 파일은 ThemeRoller 애플리케이션을 통해 수정됩니다. 프레임 스타일에는 색상, 배경 이미지, 아이콘 등 모양과 느낌에 영향을 미치는 속성만 포함됩니다. 따라서 이는 "안전한" 스타일이며 플러그인 기능에 영향을 미치지 않습니다. 이러한 분리는 개발자가 theme.css 파일에서 색상과 이미지를 수정하여 사용자 정의 모양과 느낌을 만들 수 있음을 의미합니다. 향후 플러그인이나 버그 수정이 제공될 예정이므로 수정 없이 테마와 함께 작동할 것입니다. 🎜🎜프레임 스타일은 모양과 느낌만 다루기 때문에 특정 플러그인 스타일 시트가 포함되어야 합니다. 이러한 스타일 시트에는 크기, 패딩, 거리, 위치 지정 등 위젯을 기능적으로 만드는 모든 추가 구조적 스타일 규칙이 포함됩니다. 떠 있는. 각 플러그인의 스타일 시트는 themes/base 폴더에 있으며 "jquery.ui.accordion.css"와 같이 플러그인에 따라 이름이 지정됩니다. 이러한 스타일은 스크립트와 함께 프레임 스타일을 재정의하므로 신중하게 편집해야 합니다. 🎜🎜우리는 모든 개발자가 jQuery 플러그인을 만들 것을 권장합니다. jQuery UI CSS 프레임워크를 사용하면 최종 사용자가 테마를 더 쉽게 사용자 정의하고 플러그인을 사용할 수 있습니다. 🎜

  테마

  🎜다음은 jQuery UI 플러그인 테마를 지정하는 세 가지 일반적인 방법입니다. 🎜
  • 🎜ThemeRoller 테마 다운로드: 테마를 만드는 가장 빠른 방법은 ThemeRoller를 사용하여 테마를 생성하고 다운로드하는 것입니다. 이 애플리케이션은 새로운 ui.theme.css 파일과 필요한 모든 배경 이미지와 아이콘 스프라이트가 포함된 images 폴더를 생성합니다. 이 접근 방식은 테마를 만들고 유지하는 가장 오래된 방법이지만 ThemeRoller에서 사용할 수 있는 옵션으로 사용자 정의를 제한합니다. 🎜

  • CSS 파일 수정: 모양과 느낌을 더 세밀하게 제어하려면 기본 테마(부드러움)로 시작하거나 ThemeRoller에서 생성한 테마로 시작한 다음 ui.theme.css 文件，或者任意一个独立插件的样式表。例如，您可以很容易地调整所有按钮的角半径为不同于其他 UI 组件的值，或者使用自定义设置为图标精灵改变路径。通过一点点的样式范围，您甚至可以在一个 UI 中同时使用多个主题。为了易于维护，建议只更改 ui.theme.css 파일과 이미지를 조정할 수 있습니다.

  • 사용자 정의 CSS 재작성: 모양과 느낌을 최대한 제어하려면 프레임워크 클래스나 특정 플러그인 스타일시트를 사용하지 않고 처음부터 시작하여 각 플러그인에 대한 CSS를 작성할 수 있습니다. CSS를 수정하거나 고도로 맞춤화된 마크업을 사용하여 원하는 모양과 느낌을 얻을 수 없는 경우 이 접근 방식을 사용할 수 있습니다. 이 접근 방식에는 CSS에 대한 깊은 전문 지식과 향후 플러그인의 수동 업데이트가 필요합니다. O Themeroller, JQuery UI CSS 프레임워크 사용 및 사용자 정의 테마 디자인

  jquery ui themeroller

  • jquery UI CSS 프레임워크 API

  • 디자인 테마