Reka Bentuk Aplikasi Mudah Alih / Dev Custom dengan jQuery Mobile

Dalam tutorial jQuery Mobile kami sebelumnya, saya telah memperkenalkan banyak kerangka asas dan bagaimana untuk membuat laman web pertama anda. Perpustakaan JS kedua-duanya adalah ringan dan mudah untuk pickup dalam hal kesukaran belajar. Terdapat juga generik lembaran gaya CSS yang disertakan dengan fail supaya anda boleh menyesuaikan lebih lanjut unsur-unsur dalam susun atur anda.

Untuk segmen kedua ini, saya ingin menghabiskan sedikit masa untuk mengkaji lebih mendalam tentang idea tema Mobile JQuery ini. Industri keseluruhan reka bentuk telah direvolusi oleh jQM dan proses membina templat mudah alih dari awal telah meningkat dengan ketara. jQuery Mobile bukan hanya sebuah perpustakaan skrip, tetapi satu rangka kerja keseluruhan untuk membina dan menghasilkan templat mudah alih yang efisien.

Kandungan Gaya Lembaran Lalai

Saya harus bermula dengan menjelaskan jenis kod CSS apa yang disertakan dengan fail lalai. Lembaran gaya dari jQM 1.0 telah dibahagikan kepada dua segmen utama - struktur dan tema.

Kod struktur adalah perkara yang anda boleh mengabaikan. Ini digunakan untuk menetapkan margin, padding, ketinggian / lebar, varian font, bersama dengan banyak lalai penyemak imbas lain. Tema dalaman kemudian berpecah dari A-E yang masing-masing mengawal kesan visual yang berbeza dalam reka bentuk anda. Ini boleh termasuk warna latar belakang, kecerunan, kejatuhan bayang, dan sebagainya.

Setiap elemen tema dalam ini juga boleh dirujuk sebagai swatches. Apabila anda membina templat mudah alih, anda secara umumnya akan melekat dengan tema tunggal. Tetapi dalam hampir setiap senario reka bentuk boleh diperbaiki apabila dengan skema warna yang berbeza. Lembaran gaya lalai hanya termasuk swatch A-E tetapi anda boleh membina swatches F-Z untuk menambah 21 alternatif lain ke dalam pustaka tema anda. Hanya untuk memperjelaskan istilah ini sekali lagi a tema dianggap 1 fail CSS tunggal yang boleh menyertakan sehingga 26 berbeza swatches dilabel A-Z.

Menukar Gaya

Jika anda tidak memilih untuk menentukan apa-apa suis maka jQuery Mobile akan berpegang pada swatch A secara lalai. Sekiranya anda tidak mengetahui dokumen mudah alih jQuery menggunakan atribut data HTML5 untuk banyak fungsi dalaman. Salah satunya termasuk mengubah suis melalui atribut tema-tema. Semak contoh kod saya di bawah untuk melihat apa yang saya maksudkan.

  Halaman jQM lalai
 
  Berikut adalah beberapa kandungan dalaman.

Perhatikan bahawa saya meletakkan atribut tema-tema pada div halaman akar. Ini bermakna warna swatch baru akan mempengaruhi segala-galanya di dalamnya termasuk kedua-dua bahagian header dan kandungan. Saya juga boleh memasukkannya data-tema = "c" ke dalam div header untuk menukar hanya kandungan itu dari seluruh halaman saya.

Komponen Swatch

Ia sepatutnya agak mudah bagaimana untuk melaksanakan swatch yang berbeza dalam susun atur tunggal. Jadi sekarang mari kita lihat kod CSS jQM supaya kita dapat memecahkan komponen individu swatch. Lihat fail jQuery Mobile 1.4.5 CSS terbaru yang dihoskan pada CDN mereka sendiri.

Anda harus perhatikan bagaimana setiap swatch dipisahkan oleh komen yang berbeza dan setiap kelas dalaman berakhir dengan huruf yang sesuai. Sebagai contoh .ui-bar-a dan .ui-body-a digunakan pada bar header / footer dan kawasan kandungan secara lalai. Kebanyakan sifat melaksanakan penetapan semula pada font dan warna pautan, kecerunan latar belakang, dan butiran kecil yang lain. Saya termasuk hanya ui-bar-a kod untuk memberi anda idea unsur-unsur yang kami targetkan.

/ * A ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; latar belakang: # 111111; warna: #ffffff; font-weight: bold; bayangan teks: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px # 000000; background-image: -webkit-gradient (linear, kiri atas, kiri bawah, dari (# 3c3c3c), ke (# 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-input, .ui-bar-a select, .ui-bar-a textarea, .ui-bar-a button 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 * /;

Sekiranya anda hanya ingin membuat suai adat, saya cadangkan meletakkan template dari salah satu asal. Proses ini akan menjadi lebih lancar jika anda mula menulis kod dalam dokumen CSS baru. Anda tidak akan mempunyai masalah pengeditan dalam fail asal dan anda boleh mula bekerja pada slate yang bersih. Tetapi bidang utama yang ingin anda fokuskan akan termasuk yang berikut:

bar header dan footer
kandungan badan & teks halaman
gaya senarai
butang menyatakan lalai / hover / aktif
bentuk kawalan input (tambahan)

Mengekodkan Reka Bentuk Baru Bar

Dari fail CSS yang sama, kami melihat salinan / tampalan yang telah dipasangkan sebelumnya (kod 12-150) ke dalam fail baru. Kita boleh menggunakan nama swatch G untuk melaksanakan gaya baru ini. Kini selepas menyalin kod yang anda mahu ubah nama setiap contoh kelas yang berakhir -a kepada -g, kerana ini adalah bagaimana jQuery Mobile akan mengenali gaya yang digunakan.

Saya ingin bermula dengan mendesain semula bg bar header untuk meniru kecerunan IOS yang lebih biasa. Ini boleh dilakukan semata-mata di dalam .ui-bar-g pemilih. Kami mahu mengedit latar belakang dan imej latar belakang untuk mengubah kesan kecerunan. Lihat kod saya di bawah dan skrin demo kecerunan baru.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; border-left: 0px; sempadan kanan: 0px; latar belakang: # 6d83a1; warna: #fff / * a-bar-color * /; font-weight: bold; bayang-bayang: 0 / * a-bar-shadow-x * / -1px / * a-bar-shadow-y * / 1px / * a-bar-shadow-radius * / # 3e4957; 0: 0% 0%, 0% 100%, dari (# b4bfce), berhenti warna (0.5, # 899cb3), berhenti warna (0.505, # 7e94b0) 6d83a1)); background-image: -webkit-linear-gradient (top, # 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 (top, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

Saya menggunakan skema warna biru yang terdapat dalam kebanyakan aplikasi iOS lalai. Latar belakang saya pada awalnya ditetapkan pada warna pepejal untuk peranti yang tidak dapat memberikan kecerunan CSS3. Kemudian di bawah saya menggunakan hentian warna di sekitar penanda 50% untuk mencipta kesan kilat gaya tradisional Apple. Juga di dalam pemilih yang sama, saya telah mengubah suai bayang teks dengan warna dan jarak yang lebih halus.

Butang dan Kesan Teks

Adalah penting apabila pengekodan swatch untuk dipertimbangkan secara spesifik di mana bidang antara muka memerlukan perhatian. Bar tajuk kelihatan hebat dengan latar belakang baru ini, tetapi satu pengubahsuaian terakhir yang saya ingin buat akan memadankan gaya butang lebih dekat dengan apl iOS.

.ui-btn-up-g border: 1px solid # 375073; latar belakang: # 4a6c9b; font-weight: bold; warna: #fff; bayang-bayang: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; kotak-bayang: tiada; -webkit-box-shadow: none; -moz-box-shadow: none; imej latar belakang: -webkit-gradient (linear, 0% 0%, 0% 100%, dari (# 89a0be), warna-stop (0.5, # 5877a2) 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); jejari sempadan: 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; bayang-bayang: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; kotak-bayang: tiada; -webkit-box-shadow: none; -moz-box-shadow: none; 0, 0% 0%, 0% 100%, dari (# 779be9), berhenti warna (0.5, # 376fe0), berhenti warna (0.505, # 2260dd) 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); jejari sempadan: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

Kawasan kod yang kami sediakan sekarang berada dalam kelas butang UI. Terdapat 3 mod yang berbeza untuk dipertimbangkan: .ui-btn-up-g, .ui-btn-hover-g, dan .ui-btn-down-g. Saya kebanyakannya memberi tumpuan kepada kesan standard (btn-up) dan hover (btn-hover) dengan menyunting kotak bayang dan gradien linear. Juga saya memperluaskan kesan sudut bulat supaya butang kelihatan lebih segi empat tepat.

Kerana ini saya perlu mengeluarkan jejari sempadan dalaman dari kelas bertajuk .ui-btn-inner. Kelas ini akan dilampirkan ke elemen span dalam setiap pautan utama dalam bar pengatas anda. Tanpa menetapkan semula ciri radius sempadan, anda akan melihat gangguan kecil dalam reka bentuk apabila anda mengarahkan butang. Seperti yang anda habiskan lebih banyak masa pengekodan dalam tema jQuery Mobile anda akan menghafal sedikit nuansa ini untuk projek masa depan.

Pengenalan kepada ThemeRoller

Jika anda menikmati tangan anda kotor dalam kod maka saya sangat mengesyorkan melekat pada penyuntingan tersuai. Bukan sahaja anda mempunyai lebih banyak kawalan tetapi lebih mudah untuk menyebarkan isu-isu dalam CSS jika anda membuat semua suntingan itu sendiri. Tetapi bagi banyak pereka proses ini melelahkan dan hanya memerlukan lebih lama daripada yang diperlukan. Untungnya pasukan Mobile jQuery telah mengeluarkan editor dalam talian dengan nama ThemeRoller.

Dari halaman ini, anda mempunyai akses untuk mengedit sapu 3 A-C yang pertama atau bahkan membuatnya sendiri. Jika anda melihat di bar sisi kiri, anda boleh menukar antara 3 tetapan ini atau dengan cepat membuat perubahan kepada pilihan tema global. Ini termasuk sifat CSS seperti jejari sempadan, bayang kotak, atau fon halaman lalai. Perhatikan kerana anda memilih mana-mana suapan pratetap bahawa kita boleh mengedit hanya kawasan yang sama seperti sebelum - bar atas / bawah, kandungan badan, dan butang butang 3.

Tetapi ciri kegemaran saya harus menjadi akses langsung kepada Adobe Kuler swatches. Anda sebenarnya boleh membuat beberapa skema warna dalam akaun Kuler anda dan mengimportnya ke ThemeRoller. Antara muka menyokong fungsi drag-and-drop sehingga mudah untuk mencuba beberapa idea yang berbeza dalam masa beberapa minit.

Pada akhirnya tidak ada kaedah mutlak untuk membina swatch jQM dengan betul. Sesetengah pereka memilih CSS keras kod manakala yang lain akan menyukai aplikasi web ThemeRoller intuitif. Selagi anda mengikuti struktur kelas maka anda harus mendapat hasil yang sama sama ada dengan cara.

Sumber yang Berguna

Tema Mudah Alih jQuery - Dokumentasi
Menggunakan dan menyesuaikan tema mudah alih jQuery