Desain Aplikasi Seluler / Dev Tema Khusus dengan jQuery Mobile

Dalam tutorial jQuery Mobile kami sebelumnya, saya telah memperkenalkan banyak kerangka dasar dan cara menyiapkan situs web pertama Anda. Pustaka JS ringan dan mudah diambil sehubungan dengan kesulitan belajar. Ada juga generik CSS stylesheet yang disertakan dengan file sehingga Anda dapat lebih lanjut menyesuaikan elemen dalam tata letak Anda.

Untuk segmen kedua ini saya ingin menghabiskan sedikit waktu menggali lebih dalam gagasan tema jQuery Mobile ini. Seluruh industri desain telah direvolusi oleh jQM dan proses membangun templat seluler dari awal telah meningkat secara signifikan. jQuery Mobile bukan hanya perpustakaan skrip, tetapi seluruh kerangka dasar untuk membangun dan menghasilkan templat seluler yang efisien.

Isi Stylesheet Default

Saya harus mulai dengan menjelaskan jenis kode CSS apa yang disertakan dengan file default. Lembar gaya dari jQM 1.0 telah dibagi menjadi dua segmen utama - struktur dan tema.

Kode struktur adalah hal yang sebagian besar dapat Anda abaikan. Ini digunakan untuk mengatur margin, padding, tinggi / lebar, varian font, bersama dengan banyak default browser lainnya. Tema internal kemudian dipisahkan dari A-E yang masing-masing mengontrol efek visual yang berbeda dalam desain Anda. Ini dapat mencakup warna latar belakang, gradien, bayangan drop, dll.

Masing-masing elemen tema dalam ini juga dapat disebut sebagai swatch. Saat Anda membuat templat seluler biasanya Anda akan tetap dengan satu tema. Tetapi di hampir setiap skenario desain dapat diperbaiki dengan skema warna yang berbeda. Lembar gaya default hanya menyertakan swatch A-E tetapi Anda dapat membangun swatch F-Z untuk menambahkan 21 alternatif lain ke pustaka tema Anda. Hanya untuk mengklarifikasi persyaratan ini sekali lagi a tema dianggap 1 file CSS tunggal yang dapat mencakup hingga 26 berbeda swatch berlabel A-Z.

Gaya Berpindah

Jika Anda tidak memilih untuk menentukan swatch apa pun maka jQuery Mobile akan tetap menggunakan swatch A secara default. Jika Anda belum mengetahui dokumen jQuery Mobile memanfaatkan atribut data HTML5 untuk banyak fungsi internal. Salah satunya termasuk mengubah swatch melalui atribut data-theme. Lihat contoh kode saya di bawah ini untuk melihat apa yang saya maksud.

  Halaman jQM default
 
  Berikut ini beberapa konten internal.

Perhatikan bahwa saya menempatkan atribut data-theme di halaman root div. Ini berarti warna carikan baru akan mempengaruhi semua yang ada di dalamnya yang mencakup header dan area konten. Saya juga bisa memasukkan data-theme = "c" ke div header untuk mengubah hanya konten itu dari sisa halaman saya.

Komponen dari Swatch

Seharusnya cukup mudah bagaimana menerapkan contoh yang berbeda ini dalam satu tata letak. Jadi sekarang mari kita lihat kode CSS jQM sehingga kita dapat memecah komponen individu dari suatu carikan. Lihat file CSS jQuery Mobile 1.4.5 terbaru yang di-host di CDN mereka sendiri.

Anda harus memperhatikan bagaimana masing-masing carikan dipisahkan oleh komentar yang berbeda dan masing-masing kelas internal diakhiri dengan huruf yang sesuai. Sebagai contoh .ui-bar-a dan .ui-tubuh-a diterapkan ke bilah header / footer dan area konten secara default. Sebagian besar properti menerapkan pengaturan ulang pada font dan warna tautan, gradien latar belakang, dan detail kecil lainnya. Saya hanya menyertakan ui-bar-a kode untuk memberi Anda gambaran tentang elemen yang kami targetkan.

/* SEBUAH ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; latar belakang: # 111111; warna: #ffffff; font-weight: bold; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-gradient (linear, kiri atas, kiri bawah, dari (# 3c3c3c), hingga (# 111)); / * Saf4 +, Chrome * / background-image: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / background-image: -ms-linear-gradient (# 3c3c3c, # 111); / * IE10 * / background-image: -o-linear-gradient (# 3c3c3c, # 111); / * Opera 11.10+ * / background-image: linear-gradient (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a pilih, .ui-bar-a textarea, tombol .ui-bar-a 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: bold;  .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: visited color: # 2489CE / * a-bar-link-visited * / /;

Jika Anda hanya ingin membuat swatch khusus, saya sarankan mendasarkan template dari salah satu yang asli. Prosesnya akan jauh lebih lancar jika Anda mulai menulis kode dalam dokumen CSS baru. Anda tidak akan memiliki kesulitan mengedit dalam file asli dan Anda dapat mulai mengerjakan yang bersih. Tetapi bidang-bidang utama yang ingin Anda fokuskan akan mencakup hal-hal berikut:

bilah header dan footer
konten tubuh & teks halaman
daftar gaya
tombol menyatakan default / arahkan kursor / aktif
kontrol input bentuk (ekstra)

Coding Desain Bar Baru

Dari file CSS yang sama kami melihat sebelumnya salin / tempel semua kode carikan A (baris 12-150) ke file baru. Kita dapat menggunakan nama carikan G untuk menerapkan gaya baru ini. Sekarang setelah menyalin kode Anda ingin mengganti nama setiap instance kelas yang diakhiri -Sebuah untuk -g, karena ini adalah bagaimana jQuery Mobile akan mengenali gaya mana yang digunakan.

Saya ingin memulai dengan mendesain ulang bilah header bg untuk meniru gradien iOS yang lebih akrab. Ini dapat dilakukan hanya di dalam .ui-bar-g pemilih. Kami ingin mengedit properti gambar latar dan latar belakang untuk mengubah efek gradien. Lihat kode saya di bawah ini dan layar demo dari gradien baru.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; border-left: 0px; border-right: 0px; latar belakang: # 6d83a1; warna: #fff / * a-bar-color * /; font-weight: bold; text-shadow: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; background-image: -webkit-gradient (linear, 0% 0%, 0% 100%, dari (# b4bfce), penghenti warna (0,5, # 899cb3), penghenti warna (0,505, # 7e94b0), hingga (# 6d83a1)); background-image: -webkit-linear-gradient (atas, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (atas, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linear-gradient (atas, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-linear-gradient (atas, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: linear-gradient (atas, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Saya menggunakan skema warna biru yang ditemukan di sebagian besar aplikasi iOS default. Latar belakang saya awalnya diatur ke warna solid untuk perangkat yang tidak dapat membuat gradien CSS3. Kemudian di bawah ini saya menggunakan penghenti warna di sekitar penanda 50% untuk menciptakan kembali efek kilau gaya Apple tradisional. Juga di dalam pemilih yang sama saya sedikit memodifikasi bayangan teks dengan warna dan jangkauan yang lebih halus.

Tombol dan Efek Teks

Sangat penting ketika coding swatch untuk mempertimbangkan secara spesifik area antarmuka mana yang perlu diperhatikan. Bilah header tampak hebat dengan latar belakang baru ini, tetapi satu modifikasi terakhir yang ingin saya buat akan mencocokkan gaya tombol lebih dekat dengan aplikasi iOS.

.ui-btn-up-g border: 1px solid # 375073; latar belakang: # 4a6c9b; font-weight: bold; warna: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; bayangan kotak: tidak ada; -webkit-box-shadow: tidak ada; -moz-box-shadow: tidak ada; background-image: -webkit-gradient (linier, 0% 0%, 0% 100%, dari (# 89a0be), penghenti warna (0,5, # 5877a2), penghenti warna (0,505, # 476999), hingga (# 4a6c9b)); background-image: -webkit-linear-gradient (atas, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (atas, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / background-image: -ms-linear-gradient (atas, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -o-linear-gradient (atas, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: linear-gradient (atas, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); batas-jari-jari: 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; latar belakang: # 2463de; font-weight: bold; warna: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; bayangan kotak: tidak ada; -webkit-box-shadow: tidak ada; -moz-box-shadow: tidak ada; background-image: -webkit-gradient (linier, 0% 0%, 0% 100%, dari (# 779be9), penghenti warna (0,5, # 376fe0), penghenti warna (0,505, # 2260dd), hingga (# 2463de)); background-image: -webkit-linear-gradient (atas, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (atas, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linear-gradient (atas, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-linear-gradient (atas, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Opera 11.10+ * / background-image: linear-gradient (atas, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); batas-jari-jari: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Area kode yang kami edit sekarang berada dalam kelas tombol UI. Ada 3 mode berbeda yang harus diperhatikan: .ui-btn-up-g, .ui-btn-hover-g, dan .ui-btn-down-g. Saya kebanyakan berfokus pada efek standar (btn-up) dan hover (btn-hover) dengan mengedit bayangan kotak dan gradien linier. Saya juga memperluas efek sudut membulat sehingga tombol tampak lebih persegi panjang.

Karena itu saya harus menghapus radius batas dalam dari kelas berjudul .ui-btn-inner. Kelas ini akan dilampirkan ke elemen rentang dalam setiap tautan jangkar di bilah header Anda. Tanpa mengatur ulang properti radius perbatasan Anda akan melihat gangguan kecil dalam desain setiap kali Anda mengarahkan kursor ke tombol. Saat Anda menghabiskan lebih banyak waktu untuk mengkodekan dalam tema jQuery Mobile, Anda akan menghafal nuansa kecil ini untuk proyek-proyek masa depan.

Pengantar ThemeRoller

Jika Anda menikmati tangan Anda kotor dalam kode maka saya sangat menyarankan untuk tetap mengedit kustom. Anda tidak hanya memiliki lebih banyak kontrol tetapi juga jauh lebih mudah untuk men-debug masalah di dalam CSS jika Anda membuat sendiri semua pengeditan. Tetapi bagi banyak desainer proses ini melelahkan dan hanya akan memakan waktu lebih lama dari yang diperlukan. Untungnya tim jQuery Mobile telah merilis editor online dengan nama ThemeRoller.

Dari halaman ini Anda memiliki akses untuk mengedit 3 swatch A-C pertama atau bahkan membuatnya sendiri. Jika Anda melihat di bilah sisi kiri Anda dapat beralih di antara 3 pengaturan ini atau dengan cepat melakukan perubahan pada opsi tema global. Ini termasuk properti CSS seperti jari-jari perbatasan, bayangan kotak, atau font halaman default. Perhatikan ketika Anda memilih salah satu swatch preset yang kami dapat edit hanya area yang sama seperti sebelumnya - bar atas / bawah, konten tubuh, dan 3 tombol menyatakan.

Tetapi fitur favorit saya harus menjadi akses langsung ke swatch Adobe Kuler. Anda benar-benar dapat membuat beberapa skema warna dalam akun Kuler Anda dan mengimpornya ke ThemeRoller. Antarmuka mendukung fungsionalitas drag-and-drop sehingga sangat mudah untuk mencoba beberapa ide yang berbeda dalam hitungan menit.

Pada akhirnya tidak ada metode mutlak untuk membangun dengan benar swatch jQM Anda. Beberapa desainer lebih suka menggunakan hard code CSS sementara yang lain akan menyukai aplikasi web ThemeRoller yang intuitif. Selama Anda mengikuti struktur kelas maka Anda harus mendapatkan hasil yang sama.

Sumber Daya Bermanfaat

Tema jQuery Mobile - Dokumentasi
Menggunakan dan menyesuaikan tema jQuery Mobile