Latest web development tutorials

jQuery를 UI 디자인 테마

파일 구조

테마는 사용 용이성을 증가시키는 특정 방법이다. 다음과 같이 일반적으로 파일 디렉토리 구조는 다음과 같다 :

  • themename/ - 주제는 완전히 폴더라는 별도의 항목 이름에 포함되어야합니다.
  • themename/themename.css -이 기본 CSS 파일입니다. 관계없이 플러그인 파일은 테마를 사용하여 각 페이지에서 참조되어야한다. 파일 경량해야한다, 단지 주요 포인트가 포함되어 있습니다.
  • themename/themename.pluginname.css - 각는 지원이 CSS 파일이 필요합니다 위젯. 플러그인의 이름을 직접 파일명에 포함되어야한다. 당신이 플러그 인 탭 (탭)의 테마 예를 들어, 다음과 같습니다 themename.tabs.js .
  • themename/img.png - 당신의 테마 이미지를 포함 할 수 있습니다. 그들은 사용자의 기호에 따라 이름이 될 수 있으며, 특정 이름 지정 규칙이 없습니다.

테마 파일 구조가 인스턴스를 완료하는 방법을 알아 보려면 방문 jQuery를 UI 기본 테마를 .

사용자 지정 스타일

테마 스타일을 작성하는 것은 매우 간단합니다, 그것은 때문에 유연성 테마이다.

모든 항목은 기본 CSS 클래스를 가져야한다. 주요 주제 클래스는 사용자가 사용할 수 있도록 할 수 있습니다. 루트 클래스 형식이어야합니다 .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의 클래스와 <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 파일을 정의 할 수 여기에없는 경우에만 보편적 인 글로벌 스타일 정보, 특정 위젯 스타일의 정보를 포함한다. 여기에 모든 항목의 스타일이 적용됩니다. 여러 개의 파일을 차지합니다 주제에 대해 걱정하지 마십시오 -이 생성 및 다운로드 과정에서 단순화됩니다.