jQuery UI 디자인 테마


파일 구조

테마는 사용 편의성을 높이기 위해 특정 방식으로 설계되었습니다. 일반적으로 파일 디렉터리 구조는 다음과 같습니다.

  • themename/ – 테마는 테마 이름으로 명명된 별도의 폴더에 완전히 포함되어야 합니다. themename/ – 您的主题必须完全包含在一个单独的以主题名称命名的文件夹内。

  • themename/themename.css – 这是基本的 CSS 文件。无论使用了哪个插件，该文件都必须在每个使用主题的页面中引用。该文件应该是轻量级的，只包括要点。

  • themename/themename.pluginname.css – 您支持的每个插件都需要一个 CSS 文件。插件的名称应直接包含在文件名中。例如，如果您为 tabs（标签页）插件进行主题化，则有：themename.tabs.js。

  • themename/img.png – 您的主题可以包含图像。它们可以根据您的喜好进行命名，这里没有特定的命名惯例。

如需了解主题文件结构是如何完成的实例，请访问 jQuery UI 基本主题。

定义样式

为主题编写样式是非常简单的，这是因为主题的灵活性。

所有的主题都应该有一个基本的 CSS class。这个主要的 class 允许用户启用禁用主题。您的根 class 的格式应该是 .ui-themename。且它在 HTML 文件中的用法如下所示：

<html>
<head>
    <title>My Site</title>
    <link rel="stylesheet" href="themename/themename.css" />
    <link rel="stylesheet" href="othertheme/othertheme.css" />
    <link rel="stylesheet" href="othertheme/othertheme.dialog.css" />
</head>
<body class="ui-themename">
    <div class="ui-othertheme">
        <div class="ui-dialog">This is a modal dialog.</div>
    </div>
</body>
</html>

在上面的实例中，发生了一些重要的事情：

  • 我们同时向文档中加载两个主题。

  • 整个页面机器所有内容，是根据 themename 的样式进行主题化的。

  • 然而，带有 ui-othertheme class 的 <div>及其中的每个元素（包括模态对话框）都是根据 othertheme 的样式进行主题化的。

如果我们打开 themename.css 文件进行查看，我们可以看到如下代码：

body.ui-themename { background:#111; color:snow; }
.ui-themename a, a.ui-themename { color:#68D; outline:none; }
.ui-themename a:visited, a.ui-themename:visited { color:#D66; }
.ui-themename a:hover, a.ui-themename:hover { color:#FFF; }

请注意，themename.css

themename/themename.css - 기본 CSS 파일입니다. 어떤 플러그인을 사용하든 해당 테마가 사용되는 모든 페이지에서 이 파일을 참조해야 합니다. 문서는 가벼워야 하며 필수 사항만 포함해야 합니다. 🎜🎜🎜themename/themename.pluginname.css – 지원하는 각 플러그인에는 CSS 파일이 필요합니다. 플러그인 이름은 파일 이름에 직접 포함되어야 합니다. 예를 들어 탭 플러그인의 테마를 지정하는 경우 themename.tabs.js가 됩니다. 🎜🎜🎜themename/img.png – 테마에 이미지가 포함될 수 있습니다. 원하는 대로 이름을 지정할 수 있으며 여기에는 특정 명명 규칙이 없습니다. 🎜🎜테마 파일 구조가 어떻게 구성되는지에 대한 예를 보려면 jQuery UI 기본 테마를 방문하세요. 🎜🎜스타일 정의🎜🎜테마 스타일을 작성하는 것은 매우 간단하며 이는 테마의 유연성 때문입니다. 🎜🎜모든 테마에는 기본 CSS 클래스가 있어야 합니다. 이 메인 클래스를 통해 사용자는 테마를 활성화 및 비활성화할 수 있습니다. 루트 클래스는 .ui-themename 형식이어야 합니다. HTML 파일에서의 사용법은 다음과 같습니다. 🎜rrreee🎜위의 예에서 중요한 일이 발생했습니다. 🎜🎜🎜🎜두 개의 테마를 문서에 동시에 로드하고 있습니다. 🎜🎜🎜전체 페이지의 모든 콘텐츠는 테마 이름 스타일에 따라 테마가 지정됩니다. 🎜🎜🎜그러나 ui-othertheme 클래스가 있는 <div>와 그 안의 모든 요소(모달 대화 상자 포함)는 othertheme의 스타일에 따라 테마가 지정됩니다. 🎜🎜 themename.css 파일을 열어보면 다음과 같은 코드를 볼 수 있습니다. 🎜rrreee🎜 themename.css 파일에는 전역 스타일 정보만 포함되어 있으며, 플러그인별 스타일 정보는 여기에 정의되어 있지 않습니다. 여기에 있는 스타일은 모든 테마에 적용 가능합니다. 테마가 여러 파일을 차지하는 것에 대해 걱정하지 마세요. 이러한 파일은 생성 및 다운로드 과정에서 단순화됩니다. 🎜🎜