Thiết kế ứng dụng di động / Dev Chủ đề tùy chỉnh với jQuery Mobile

Trong hướng dẫn jQuery Mobile trước đây của chúng tôi, tôi đã giới thiệu phần lớn khung cơ bản và cách thiết lập trang web đầu tiên của bạn. Thư viện JS vừa nhẹ vừa dễ lấy về độ khó học tập. Ngoài ra còn có một biểu định kiểu CSS chung kèm theo các tệp để bạn có thể tùy chỉnh thêm các thành phần trong bố cục của mình.

Đối với phân khúc thứ hai này, tôi muốn dành một chút thời gian để tìm hiểu sâu hơn về ý tưởng này về các chủ đề jQuery Mobile. Toàn bộ ngành công nghiệp thiết kế đã được cách mạng bởi jQM và quá trình xây dựng một mẫu di động từ đầu đã được cải thiện đáng kể. jQuery Mobile không chỉ là một thư viện kịch bản, mà là toàn bộ khung nền tảng để xây dựng và sản xuất các mẫu di động hiệu quả.

Nội dung Biểu định kiểu mặc định

Tôi nên bắt đầu bằng cách làm rõ chính xác loại mã CSS được bao gồm trong các tệp mặc định. Biểu định kiểu từ jQM 1.0 đã được chia thành hai phân đoạn chính - kết cấu và chủ đề.

Mã cấu trúc là thứ bạn chủ yếu có thể bỏ qua. Điều này được sử dụng để đặt lề, phần đệm, chiều cao / chiều rộng, các biến thể phông chữ, cùng với nhiều mặc định khác của trình duyệt. Các chủ đề nội bộ sau đó được tách ra từ A-E, mỗi chủ đề kiểm soát các hiệu ứng hình ảnh khác nhau trong thiết kế của bạn. Điều này có thể bao gồm màu nền, độ dốc, bóng đổ, v.v..

Mỗi trong số các yếu tố chủ đề bên trong cũng có thể được gọi là mẫu màu. Khi bạn xây dựng một mẫu di động, bạn thường sẽ gắn bó với một chủ đề duy nhất. Nhưng trong hầu hết mọi kịch bản, thiết kế có thể được cải thiện với các cách phối màu khác nhau. Biểu định kiểu mặc định chỉ bao gồm các mẫu A-E nhưng bạn có thể tạo các mẫu màu F-Z để thêm 21 lựa chọn thay thế khác vào thư viện chủ đề của mình. Chỉ cần làm rõ các điều khoản này một lần nữa chủ đề được coi là 1 tệp CSS duy nhất có thể bao gồm tới 26 tệp khác nhau mẫu màu dán nhãn A-Z.

Chuyển đổi phong cách

Nếu bạn không chọn chỉ định bất kỳ mẫu màu nào thì jQuery Mobile sẽ dính vào mẫu A theo mặc định. Nếu bạn chưa biết các tài liệu jQuery Mobile sử dụng các thuộc tính dữ liệu HTML5 cho nhiều chức năng bên trong. Một trong số này bao gồm thay đổi mẫu màu thông qua thuộc tính chủ đề dữ liệu. Kiểm tra ví dụ mã của tôi dưới đây để xem ý tôi là gì.

  Trang jQM mặc định
 
  Đây là một số nội dung.

Lưu ý rằng tôi đã đặt thuộc tính data-theme trên div trang gốc. Điều này có nghĩa là màu swatch mới sẽ ảnh hưởng đến mọi thứ bên trong bao gồm cả vùng tiêu đề và nội dung. Tôi cũng có thể bao gồm data-theme = "c" vào div tiêu đề để chỉ thay đổi nội dung đó từ phần còn lại của trang của tôi.

Các thành phần của một mẫu màu

Nó khá đơn giản để làm thế nào để thực hiện các mẫu màu khác nhau trong một bố cục duy nhất. Vì vậy, bây giờ chúng ta hãy xem mã CSS jQM để chúng ta có thể chia nhỏ các thành phần riêng lẻ của một mẫu màu. Kiểm tra tệp CSS jQuery Mobile 1.4.5 mới nhất được lưu trữ trên CDN của riêng họ.

Bạn nên chú ý cách mỗi mẫu màu được phân tách bằng một nhận xét riêng biệt và mỗi lớp bên trong kết thúc bằng chữ thích hợp. Ví dụ .ui-bar-a và .ui-body-a được áp dụng vào các thanh tiêu đề / chân trang và các khu vực nội dung theo mặc định. Hầu hết các thuộc tính đang thực hiện thiết lập lại về phông chữ và màu liên kết, độ dốc nền và các chi tiết nhỏ khác. Tôi chỉ đơn giản là ui-bar-a mã để cung cấp cho bạn ý tưởng về các yếu tố chúng tôi nhắm mục tiêu.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a viền: 1px solid # 2A2A2A; nền: # 111111; màu: #ffffff; font-weight: in đậm; text-bóng: 0 / * a-bar-bóng-x * / -1px / * a-bar-bóng-y * / 1px # 000000; hình nền: -webkit-gradient (tuyến tính, trên cùng bên trái, dưới cùng bên trái, từ (# 3c3c3c), đến (# 111)); / * Saf4 +, Chrome * / hình nền: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / hình nền: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / hình nền: -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / hình nền: -o-linear-gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / hình nền: tuyến tính gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a nút font-family: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; font-weight: in đậm;  .ui-bar-a .ui-link: hover color: # 2489CE / * a-bar-link-hover * /;  .ui-bar-a .ui-link: active color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: đã truy cập color: # 2489CE / * a-bar-link-visit * /;

Nếu bạn chỉ muốn tạo một mẫu màu tùy chỉnh, tôi khuyên bạn nên lấy mẫu ra khỏi một trong những bản gốc. Quá trình sẽ diễn ra suôn sẻ hơn rất nhiều nếu bạn bắt đầu viết mã trong một tài liệu CSS mới. Bạn sẽ không gặp rắc rối khi chỉnh sửa trong tệp gốc và bạn có thể bắt đầu làm việc với một bản rõ ràng. Nhưng các lĩnh vực chính bạn muốn tập trung vào sẽ bao gồm:

thanh đầu trang và chân trang
nội dung cơ thể & văn bản trang
liệt kê các kiểu
trạng thái nút mặc định / di chuột / hoạt động
điều khiển đầu vào mẫu (thêm)

Mã hóa một thiết kế thanh mới

Từ cùng một tệp CSS, chúng tôi đã xem xét sao chép / dán tất cả mã A swatch (dòng 12-150) vào một tệp mới. Chúng ta có thể sử dụng tên swatch G để thực hiện các kiểu mới này. Bây giờ sau khi sao chép mã bạn muốn đổi tên từng thể hiện của lớp kết thúc bằng -một đến -g, vì đây là cách jQuery Mobile sẽ nhận ra nên sử dụng kiểu nào.

Tôi muốn bắt đầu bằng cách thiết kế lại thanh tiêu đề bg để bắt chước một gradient iOS quen thuộc hơn. Điều này có thể được thực hiện chỉ trong .ui-bar-g bộ chọn. Chúng tôi muốn chỉnh sửa các thuộc tính nền và hình ảnh nền để thay đổi hiệu ứng gradient. Kiểm tra mã của tôi dưới đây và màn hình demo của gradient mới.

.ui-bar-g Border: 1px solid # 2d3033 / * a-bar-Border * /; viền trái: 0px; viền phải: 0px; nền: # 6d83a1; màu: #fff / * a-bar-color * /; font-weight: in đậm; text-Shadow: 0 / * a-bar-Shadow-x * / -1px / * a-bar-Shadow-y * / 1px / * a-bar-Shadow-radius * / # 3e4957; hình nền: -webkit-gradient (tuyến tính, 0% 0%, 0% 100%, từ (# b4bfce), dừng màu (0.5, # 899cb3), dừng màu (0.505, # 7e94b0), đến (# 6d83a1)); hình nền: -webkit-linear-gradient (trên cùng, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / hình nền: -moz-linear-gradient (trên cùng, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / hình nền: -ms-linear-gradient (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / hình nền: -o-linear-gradient (trên cùng, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / hình nền: tuyến tính gradient (trên cùng, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Tôi đang sử dụng bảng màu xanh được tìm thấy trong hầu hết các ứng dụng iOS mặc định. Nền của tôi ban đầu được đặt thành màu đơn sắc cho các thiết bị không thể hiển thị độ dốc CSS3. Sau đó, bên dưới tôi đang sử dụng các điểm dừng màu khoảng 50% để tạo lại hiệu ứng bóng sáng theo phong cách truyền thống của Apple. Ngoài ra, trong cùng một bộ chọn, tôi đã sửa đổi một chút bóng văn bản với màu sắc và phạm vi tinh tế hơn.

Các nút và hiệu ứng văn bản

Điều quan trọng khi mã hóa swatches để xem xét cụ thể khu vực nào của giao diện cần chú ý. Thanh tiêu đề trông tuyệt vời với nền mới này, nhưng một sửa đổi cuối cùng tôi muốn thực hiện sẽ khớp với các kiểu nút gần với kiểu ứng dụng iOS.

.ui-btn-up-g Border: 1px solid # 375073; nền: # 4a6c9b; font-weight: in đậm; màu: #fff; text-bóng: 0 / * a-bup-bóng-x * / -1px / * a-bup-bóng-y * / 1px / * a-bup-bóng-radius * / # 40536d; hộp bóng: không có; -webkit-box-bóng: không có; -moz-box-bóng: không có; hình nền: -webkit-gradient (tuyến tính, 0% 0%, 0% 100%, từ (# 89a0be), dừng màu (0.5, # 5877a2), dừng màu (0.505, # 476999), đến (# 4a6c9b)); hình nền: -webkit-linear-gradient (trên cùng, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / hình nền: -moz-linear-gradient (trên cùng, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / hình nền: -ms-linear-gradient (trên cùng, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / hình nền: -o-linear-gradient (trên cùng, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / hình nền: tuyến tính gradient (trên cùng, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); bán kính đường viền: 4px; -webkit-Border-radius: 4px; -moz-viền-bán kính: 4px;  .ui-btn-up-g .ui-btn-Internal, .ui-btn-hover-g .ui-btn-Inside, .ui-btn-down-g .ui-btn-Inside Border-radius: 0; -webkit-Border-radius: 0; -moz-viền-bán kính: 0;  .ui-btn-hover-g Border: 1px solid # 1b49a5; nền: # 2463de; font-weight: in đậm; màu: #fff; text-bóng: 0 / * a-bup-bóng-x * / -1px / * a-bup-bóng-y * / 1px / * a-bup-bóng-radius * / # 40536d; hộp bóng: không có; -webkit-box-bóng: không có; -moz-box-bóng: không có; hình nền: -webkit-gradient (tuyến tính, 0% 0%, 0% 100%, từ (# 779be9), dừng màu (0.5, # 376fe0), dừng màu (0.505, # 2260dd), đến (# 2463de)); hình nền: -webkit-linear-gradient (trên cùng, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / hình nền: -moz-linear-gradient (trên cùng, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / hình nền: -ms-linear-gradient (trên cùng, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / hình nền: -o-linear-gradient (trên cùng, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / hình nền: gradient tuyến tính (trên cùng, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); bán kính đường viền: 4px; -webkit-Border-radius: 4px; -moz-viền-bán kính: 4px;

Vùng mã chúng tôi đang chỉnh sửa hiện nằm trong các lớp nút UI. Có 3 chế độ khác nhau cần quan tâm: .ui-btn-up-g, .ui-btn-hover-g, và .ui-btn-down-g. Tôi chủ yếu tập trung vào các hiệu ứng tiêu chuẩn (btn-up) và hover (btn-hover) bằng cách chỉnh sửa bóng hộp và độ dốc tuyến tính. Ngoài ra tôi mở rộng hiệu ứng góc tròn để các nút xuất hiện hình chữ nhật hơn.

Do đó, tôi cần xóa bán kính đường viền bên trong khỏi một lớp có tiêu đề .ui-btn-nội. Lớp này được gắn vào một phần tử span trong mỗi liên kết neo trong thanh tiêu đề của bạn. Không đặt lại các thuộc tính bán kính đường viền, bạn sẽ nhận thấy những trục trặc nhỏ trong thiết kế mỗi khi bạn di chuột qua một nút. Khi bạn dành nhiều thời gian hơn để mã hóa trong các chủ đề jQuery Mobile, bạn sẽ ghi nhớ những sắc thái nhỏ này cho các dự án trong tương lai.

Giới thiệu về ThemeRoller

Nếu bạn thích bị bẩn tay trong mã thì tôi khuyên bạn nên sử dụng các chỉnh sửa tùy chỉnh. Bạn không chỉ có nhiều quyền kiểm soát hơn mà còn dễ dàng gỡ lỗi các vấn đề trong CSS hơn nếu bạn tự thực hiện tất cả các chỉnh sửa. Nhưng đối với nhiều nhà thiết kế thì quá trình này rất mệt mỏi và đơn giản là sẽ mất nhiều thời gian hơn mức cần thiết. May mắn thay, nhóm jQuery Mobile đã phát hành một trình soạn thảo trực tuyến dưới tên ThemeRoller.

Từ trang này, bạn có quyền truy cập để chỉnh sửa 3 mẫu màu A-C đầu tiên hoặc thậm chí tạo một mẫu của riêng bạn. Nếu bạn nhìn vào thanh bên trái, bạn có thể chuyển đổi giữa 3 cài đặt này hoặc nhanh chóng thực hiện các thay đổi cho các tùy chọn chủ đề toàn cầu. Chúng bao gồm các thuộc tính CSS như bán kính đường viền, bóng hộp hoặc phông chữ trang mặc định. Lưu ý khi bạn chọn bất kỳ mẫu màu cài sẵn nào mà chúng tôi chỉ có thể chỉnh sửa các khu vực giống như trước - thanh trên cùng / dưới cùng, nội dung cơ thể và 3 trạng thái nút.

Nhưng tính năng yêu thích của tôi phải là truy cập trực tiếp vào các mẫu màu của Adobe Kuler. Bạn thực sự có thể tạo một vài lược đồ màu trong tài khoản Kuler của mình và nhập chúng vào ThemeRoller. Giao diện hỗ trợ chức năng kéo và thả, thật đơn giản để thử một vài ý tưởng khác nhau trong vài phút.

Cuối cùng, không có phương pháp tuyệt đối để xây dựng các mẫu màu jQM của bạn. Một số nhà thiết kế thích mã CSS cứng trong khi những người khác sẽ yêu thích ứng dụng web ThemeRoller trực quan. Miễn là bạn đang theo cấu trúc lớp thì bạn cũng sẽ nhận được kết quả tương tự.

Tài nguyên hữu ích

Chủ đề jQuery Mobile - Tài liệu
Sử dụng và tùy chỉnh các chủ đề jQuery Mobile