jQuery Mobile을 사용한 모바일 앱 디자인 / Dev 사용자 정의 테마
이전 jQuery Mobile 튜토리얼에서는 기본 프레임 워크를 많이 소개하고 첫 번째 웹 사이트를 설정하는 방법을 설명했습니다. JS 라이브러리는 학습의 어려움과 관련하여 가볍고 픽업하기 쉽습니다. 또한 파일에 포함 된 CSS 스타일 시트가 일반이므로 레이아웃의 요소를 추가로 사용자 정의 할 수 있습니다..
이 두 번째 부분에서는 jQuery 모바일 테마에 대한 아이디어를 더 깊이 파고 드는 데 약간의 시간을 할애하고 싶습니다. 전체 디자인 업계는 jQM에 의해 혁명을 일으켰으며 모바일 템플릿을 처음부터 만드는 프로세스가 크게 개선되었습니다. jQuery Mobile은 스크립팅 라이브러리 일뿐만 아니라 효율적인 모바일 템플릿을 만들고 구축하기위한 전체 기본 프레임 워크입니다..
기본 스타일 시트 내용
먼저 기본 파일에 어떤 유형의 CSS 코드가 포함되어 있는지 명확히해야합니다. jQM 1.0의 스타일 시트는 두 개의 주요 세그먼트로 분할되었습니다. - 구조 과 테마.
구조 코드는 대부분 무시할 수있는 요소입니다. 여백, 여백, 높이 / 너비, 글꼴 변형을 다른 브라우저 기본값과 함께 설정하는 데 사용됩니다. 내부 테마는 디자인에서 서로 다른 시각 효과를 제어하는 A-E에서 분리됩니다. 배경색, 그라데이션, 그림자 등을 포함 할 수 있습니다..
이러한 각각의 내부 테마 요소는 다음과 같이도 참조 할 수 있습니다. 견본. 모바일 템플릿을 만들 때 일반적으로 하나의 테마를 고수 할 것입니다. 그러나 거의 모든 시나리오에서 서로 다른 색 구성표로 디자인을 개선 할 수 있습니다. 기본 스타일 시트에는 견본 A-E 만 포함되어 있지만 견본 F-Z를 작성하여 테마 라이브러리에 21 가지 대안을 추가 할 수 있습니다. 이 용어를 다시 명확히하기 위해 테마 최대 26 개의 다른 CSS 파일을 포함 할 수있는 1 개의 단일 CSS 파일로 간주됩니다. 견본 A-Z로 표시된.
스타일 전환
견본을 지정하지 않으면 jQuery Mobile은 기본적으로 견본 A에 고정됩니다. 아직 jQuery Mobile을 인식하지 못했다면 많은 내부 기능에 HTML5 데이터 속성을 사용합니다. 그 중 하나는 data-theme 속성을 통해 견본을 변경하는 것을 포함합니다. 내 코드 예제를 확인하여 무슨 뜻인지 확인하십시오..
기본 jQM 페이지
다음은 내부 내용입니다..
루트 페이지 div에 data-theme 속성을 두었습니다. 즉, 새로운 색상 견본 색상은 머리글과 내용 영역을 모두 포함하는 모든 요소에 영향을줍니다. 나는 또한 다음을 포함 할 수있다. 데이터 테마 = "c" 헤더 div에 해당 콘텐츠 만 다른 페이지에서 변경합니다..
견본의 구성 요소
단일 레이아웃 내에 이러한 다양한 견본을 구현하는 방법은 매우 간단해야합니다. 이제 jQM CSS 코드를 살펴보고 견본의 개별 구성 요소를 분석해 보겠습니다. 자신의 CDN에서 호스팅되는 최신 jQuery Mobile 1.4.5 CSS 파일 확인.
각 견본이 별개의 주석으로 분리되는 방법을 알아야하며 각 내부 클래스는 적절한 글자로 끝납니다. 예를 들어 .Ui-Bar-a 과 .우리 몸 기본적으로 머리글 / 바닥 글 막대 및 내용 영역에 적용됩니다. 대부분의 속성은 글꼴 및 링크 색상, 배경 그라디언트 및 기타 작은 세부 사항에 대한 재설정을 구현합니다. 나는 Ui-Bar-a 코드를 통해 우리가 목표로하는 요소에 대한 아이디어를 얻을 수 있습니다..
/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border : 1px solid # 2A2A2A; 배경 : # 111111; color : #ffffff; font-weight : bold; text-shadow : 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image : -webkit-gradient (선형, 왼쪽 위, 왼쪽 아래, (# 3c3c3c), (# 111)); / * Saf4 +, Chrome * / background-image : -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image : -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / 배경 이미지 : -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / background-image : -o-linear-gradient (# 3c3c3c, # 111); / * Opera 11.10 이상 * / background-image : 선형 그래디언트 (# 3c3c3c, # 111); .ui-bar-a, .ui-bar-a 입력, .ui-bar-a 선택, .ui-bar-a 텍스트 영역, .ui-bar-a 버튼 font-family : Helvetica, Arial, sans- 가는 장식 선; .ui-bar-a .ui-link-inherit color : #fff; .ui-bar-a .ui-link color : # 7cc4e7 / * a-bar-link-color * /; font-weight : bold; .ui-bar-a .ui-link : hover color : # 2489CE / * a-bar-link-hover * /; .ui-bar-a .ui-link : 활성 color : # 2489CE / * a-bar-link-active * /; .ui-bar-a .ui-link : visited color : # 2489CE / * a-bar-link-visited * /;
사용자 정의 견본을 만들려는 경우 원본 중 하나에서 템플릿을 가져 오는 것이 좋습니다. 새로운 CSS 문서에서 코드를 작성하기 시작하면 프로세스가 훨씬 원활해질 것입니다. 원본 파일을 편집하는 번거 로움이 없으며 깨끗한 슬레이트에서 작업을 시작할 수 있습니다. 그러나 중점적으로 다루고 싶은 핵심 영역은 다음과 같습니다.
- 머리글 및 바닥 글 막대
- 본문 내용 및 페이지 텍스트
- 목록 스타일
- 버튼 상태 기본값 / 마우스 오버 / 활성 상태
- 양식 입력 컨트롤 (추가)
새로운 바 디자인 코딩
동일한 CSS 파일에서 이전에 모든 견본 A 코드 (12-150 행)를 새 파일로 복사 / 붙여 넣기했습니다. 견본 이름 G를 사용하여 이러한 새 스타일을 구현할 수 있습니다. 이제 각 클래스 인스턴스의 이름을 바꿀 코드를 복사 한 후 -에이 에 -지, 이것이 jQuery Mobile이 사용할 스타일을 인식하는 방법입니다..
헤더 바 bg를 재 설계하여보다 친숙한 iOS 그라디언트를 모방 한 것으로 시작하고 싶습니다. 이것은 전적으로 .Ui-Bar-G 선택자. 그래디언트 효과를 변경하기 위해 배경 및 배경 이미지 속성을 편집하고 싶습니다. 아래 코드와 새로운 그라데이션 데모 화면을 확인하십시오..
.ui-bar-g 테두리 : 1 픽셀 단색 # 2d3033 / * a-bar-border * /; border-left : 0px; border-right : 0px; 배경 : # 6d83a1; color : #fff / * a-bar-color * /; font-weight : bold; 텍스트 그림자 : 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image : -webkit-gradient (선형, 0 % 0 %, 0 % 100 %, (# b4bfce), 컬러 스톱 (0.5, # 899cb3), 컬러 스톱 (0.505, # 7e94b0) 6d83a1)); background-image : -webkit-linear-gradient (상단, # b4bfce, # 899cb3 50 %, # 7e94b0 52 %, # 6d83a1); / * Chrome 10+, Saf5.1 + * / 배경 이미지 : -moz-linear-gradient (상단, # b4bfce, # 899cb3 50 %, # 7e94b0 52 %, # 6d83a1); / * FF3.6 * / 배경 이미지 : -ms-linear-gradient (상단, # b4bfce, # 899cb3 50 %, # 7e94b0 52 %, # 6d83a1); / * IE10 * / 배경 이미지 : -o 선형 그래디언트 (맨 위, # b4bfce, # 899cb3 50 %, # 7e94b0 52 %, # 6d83a1); / * Opera 11.10 이상 * / background-image : 선형 그래디언트 (맨 위, # b4bfce, # 899cb3 50 %, # 7e94b0 52 %, # 6d83a1);
대부분의 기본 iOS 응용 프로그램에있는 파란색 색상 체계를 사용하고 있습니다. 내 배경은 CSS3 그래디언트를 렌더링 할 수없는 장치의 경우 단색으로 설정됩니다. 그런 다음 아래에서 50 % 마커 주변에 색상 멈춤 점을 사용하여 전통적인 Apple 스타일 광택 광택 효과를 재현합니다. 또한 동일한 선택기 내에서 텍스트 그림자를 좀 더 미묘한 색상과 범위로 약간 수정했습니다..
버튼 및 텍스트 효과
인터페이스의 어느 부분이주의가 필요한지 구체적으로 고려하기 위해 견본을 코딩 할 때 중요합니다. 헤더 바는이 새로운 배경으로 멋지게 보이지만, 마지막으로 수정하고 싶은 부분은 iOS 앱에 가까운 버튼 스타일과 일치합니다..
.ui-btn-up-g border : 1px solid # 375073; 배경 : # 4a6c9b; font-weight : bold; color : #fff; 텍스트 그림자 : 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow : 없음; -webkit-box-shadow : 없음; -moz-box-shadow : 없음; background-image : -webkit-gradient (선형, 0 % 0 %, 0 % 100 %, from # 89a0be), 컬러 스톱 (0.5, # 5877a2), 컬러 스톱 (0.505, # 476999) 4a6c9b)); background-image : -webkit-linear-gradient (상단, # 89a0be, # 5877a2 50 %, # 476999 52 %, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image : -moz-linear-gradient (상단, # 89a0be, # 5877a2 50 %, # 476999 52 %, # 4a6c9b); / * FF3.6 * / 배경 이미지 : -ms-linear-gradient (맨 위, # 89a0be, # 5877a2 50 %, # 476999 52 %, # 4a6c9b); / * IE10 * / 배경 이미지 : -o 선형 그라디언트 (맨 위, # 89a0be, # 5877a2 50 %, # 476999 52 %, # 4a6c9b); / * Opera 11.10 이상 * / 배경 이미지 : 선형 그래디언트 (위쪽, # 89a0be, # 5877a2 50 %, # 476999 52 %, # 4a6c9b); border-radius : 4px; -webkit-border-radius : 4px; -moz-border-radius : 4px; .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner border-radius : 0; -webkit-border-radius : 0; -moz-border-radius : 0; .ui-btn-hover-g border : 1px solid # 1b49a5; 배경 : # 2463de; font-weight : bold; color : #fff; 텍스트 그림자 : 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; box-shadow : 없음; -webkit-box-shadow : 없음; -moz-box-shadow : 없음; background-image : -webkit-gradient (선형, 0 % 0 %, 0 % 100 %, from (# 779be9), 컬러 스톱 (0.5, # 376fe0), 컬러 스톱 (0.505, # 2260dd) 2463de)); background-image : -webkit-linear-gradient (상단, # 779be9, # 376fe0 50 %, # 2260dd 52 %, # 2463de); / * Chrome 10+, Saf5.1 + * / 배경 이미지 : -moz-linear-gradient (상단, # 779be9, # 376fe0 50 %, # 2260dd 52 %, # 2463de); / * FF3.6 * / 배경 이미지 : -ms-linear-gradient (맨 위, # 779be9, # 376fe0 50 %, # 2260dd 52 %, # 2463de); / * IE10 * / 배경 이미지 : -o 선형 그래디언트 (맨 위, # 779be9, # 376fe0 50 %, # 2260dd 52 %, # 2463de); / * Opera 11.10 이상 * / 배경 이미지 : 선형 그래디언트 (위쪽, # 779be9, # 376fe0 50 %, # 2260dd 52 %, # 2463de); border-radius : 4px; -webkit-border-radius : 4px; -moz-border-radius : 4px;
지금 편집중인 코드 영역은 UI 버튼 클래스 내에 있습니다. 3 가지 모드가 있습니다. .Ui-Btn-Up-g, .사용자 인터페이스 - 마우스 오버 - g, 과 .Ui-Btn-Down-G. 박스 그림자 및 선형 그래디언트를 편집하여 표준 (btn-up) 및 마우스 오버 (btn-hover) 효과에 주로 중점을 둡니다. 또한 둥근 모서리 효과를 확장하여 버튼이 더 직사각형으로 표시되도록했습니다..
이 때문에 제목이 붙은 클래스에서 내부 테두리 반경을 제거해야했습니다. .내부 - 내부 - 내부. 이 클래스는 헤더 막대의 각 앵커 링크 내의 span 요소에 연결됩니다. 테두리 반경 속성을 재설정하지 않으면 버튼 위에 마우스를 올려 놓을 때마다 디자인에 작은 결함이 있음을 알 수 있습니다. jQuery Mobile 테마에서 코딩하는 데 더 많은 시간을 할애하면 향후 프로젝트에서 이러한 작은 뉘앙스를 암기 할 수 있습니다..
ThemeRoller 소개
코드에서 손이 더러워지면 커스텀 편집을 계속하는 것이 좋습니다. 뿐만 아니라 당신이 더 많은 통제를 가지고 있지만 당신이 모든 편집을 직접한다면 CSS 내의 문제를 디버그하는 것이 훨씬 쉽습니다. 그러나 많은 디자이너들에게이 과정은 지루하고 필요 이상으로 오래 걸릴 것입니다. 운좋게도 jQuery Mobile 팀은 ThemeRoller라는 이름으로 온라인 편집기를 출시했습니다..
이 페이지에서 처음 3 개의 A-C 견본을 편집하거나 직접 만들 수도 있습니다. 왼쪽 사이드 바에서이 세 가지 설정간에 전환하거나 전체 테마 옵션을 신속하게 변경할 수 있습니다. 테두리 반경, 상자 그림자 또는 기본 페이지 글꼴과 같은 CSS 속성이 여기에 포함됩니다. 위쪽 / 아래쪽 막대, 본문 내용 및 3 개의 단추 상태와 같은 영역 만 편집 할 수있는 미리 설정된 견본을 선택하면 알림.
하지만 필자가 가장 좋아하는 기능은 Adobe Kuler 견본에 직접 액세스 할 수 있어야합니다. 실제로 Kuler 계정에서 몇 가지 색 구성표를 만들어 ThemeRoller로 가져올 수 있습니다. 인터페이스는 드래그 앤 드롭 기능을 지원하므로 몇 분 만에 여러 가지 아이디어를 시험해 볼 수 있습니다..
궁극적으로 jQM 견본을 올바르게 작성하는 절대적인 방법은 없습니다. 일부 디자이너는 CSS를 하드 코딩하는 반면 다른 사용자는 직관적 인 ThemeRoller 웹 앱을 선호합니다. 클래스 구조를 따르는 한 동일한 결과를 얻을 수 있어야합니다..
유용한 자료
- jQuery 모바일 테마 - 문서
- jQuery Mobile 테마 사용 및 사용자 정의
