Penjelasan terperinci tentang penggunaan susun atur grid ui-grid dalam halaman mudah alih jQuery development_jquery

Pada peranti mudah alih, lebar skrin adalah sempit, jadi reka letak berbilang lajur biasanya tidak digunakan, tetapi kadangkala anda mungkin perlu menyusun elemen kecil (seperti butang atau label navigasi sebelah menyebelah, contohnya) dalam berbilang lajur . Rangka kerja Mudah Alih Jquery menyediakan kaedah mudah untuk membina susun atur lajur berasaskan CSS yang dipanggil ui-grid

Jquery Mobile menyediakan empat susun atur pratetap, yang boleh digunakan dalam sebarang situasi di mana lajur diperlukan

• Dua lajur (menggunakan kelas ui-grid-a)
• Tiga lajur (menggunakan kelas ui-grid-b)
• Empat lajur (menggunakan kelas ui-grid-c)
• Lima lajur (menggunakan kelas ui-grid-d)

Grid adalah 100% lebar, tidak kelihatan sepenuhnya (tiada sempadan atau latar belakang) dan tidak mempunyai jidar atau pelapik, jadi ia tidak mengganggu penggayaan elemen yang diletakkan di dalamnya. Dalam bekas grid, elemen anak diberikan ui-block-a / b / c / d secara berterusan, menjadikan setiap elemen "blok" terapung dan disandingkan, membentuk grid. Kelas ui-block-a pada asasnya mengosongkan apungan dan akan memulakan baris baharu (lihat grid berbilang baris, di bawah).

ui-grid-letak letak dua lajur

Buat reka letak dua lajur (50 / 50%) Tambahkan atribut ui-grid-a pada lapisan pertama (bekas induk), dan tambah ui-block-a dan ui-block pada lapisan kedua (dua. sub-bekas). -b：

<div class="ui-grid-a">
 <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
 <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div><!-- /grid-a -->

Teg di atas menghasilkan reka letak kandungan berikut:

Seperti yang anda lihat, grid tidak mempunyai penggayaan visual secara lalai; ia hanya memaparkan kandungan sebelah menyebelah.

Kelas grid boleh digunakan pada mana-mana bekas. Dalam contoh seterusnya, kami menambah ui-grid-a, menggunakan blok-ui dan kedua-dua butang memanjang hingga 50% daripada lebar skrin

<fieldset class="ui-grid-a">
 <div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
 <div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>  
</fieldset>

Sila ambil perhatian bahawa rangka kerja ini menambah jidar kiri dan kanan pada butang dalam grid. Untuk satu butang anda boleh menggunakan kelas ui-grid-solo dan kelas butang ui-block-a, seperti contoh di bawah untuk div. Butang sedemikian akan mendapat margin yang sama

<div class="ui-grid-a">
 <div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
 <div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>  
</div>
<div class="ui-grid-solo">
 <div class="ui-block-a"><button type="v" data-theme="b">More</button></div>
</div>

Kelas tema (tanpa atribut tema data) daripada sistem tema boleh ditambahkan pada elemen, termasuk grid. Dalam blok berikut, kami menambah dua kelas: ui-bar untuk menambah bar lalai dan ui-bar-e untuk menggunakan kecerunan latar belakang dan gaya fon pada sampel tema bar alat "E". Untuk tujuan ilustrasi, atribut inline style="height:120px" juga ditambahkan pada setiap grid untuk menetapkan setiap ketinggian standard.

letak letak tiga lajur ui-blok-b

Konfigurasi susun atur grid menggunakan class=ui-grid-b pada induk dan 3 elemen bekas anak, setiap satu dengan kelas ui-block-a/a/c masing-masing, mencipta susun atur tiga lajur satu baris (33/33 /33%). Nota: Blok ini berkongsi tema gaya yang sama seperti kursus, dengan reka letak grid boleh dilihat dengan jelas.

<div class="ui-grid-b">
 <div class="ui-block-a">Block A</div>
 <div class="ui-block-b">Block B</div>
 <div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->

Ini akan menghasilkan susun atur grid 33 / 33 / 33% untuk kandungan kami

letak letak empat lajur ui-blok-c

Satu baris empat lajur, grid 25/25/25/25%, dicapai dengan menentukan class=ui-grid-c dalam bekas induk dan menambah blok suku. Nota: Blok ini mempunyai gaya kursus tema yang sama, reka letak grid boleh dilihat dengan jelas

letak letak lima lajur ui-blok-c

Satu baris dan lima lajur, grid 20/20/20/20%, ditentukan oleh class= ui-grid-d
dalam bekas induk

Susun atur berbilang baris dan berbilang lajur

Reka bentuk grid membalut item dalam berbilang baris. Contohnya, jika anda menentukan grid tiga baris, tiga lajur (ui-grid-b) dalam bekas yang mempunyai sembilan sub-blok, ia akan ditukar kepada 3 baris 3 item setiap satu. Mempunyai peraturan CSS yang jelas untuk terapung dan memulakan baris baharu apabila class=ui-block-a adalah untuk memastikan urutan ulangan blok yang ditetapkan (A,B,C,A,B,C,dll) dipetakan kepada jenis grid . Anda boleh menetapkan bekas pertama setiap baris ke class=ui-block-a untuk mengosongkan pelampung, jadi kelas bagi 9 sub-bekas hendaklah: class=ui-block-(a,b,c,a,b ,c, a,b,c).

<div id="grid" class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
<div class="ui-block-a"><div class="ui-bar ui-bar-e">A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e">B</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-e">C</div></div>
</div>

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>grid-layout demo</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <!-- The script below can be omitted -->
 <script src="/resources/turnOffPushState.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
 
<div data-role="page">
 <div data-role="header">
  <h1>Grid Layout Example</h1>
 </div>
 <div data-role="content">
  <div class="ui-grid-a">
   <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap.</div>
   <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap.</div>
  </div><!-- /grid-a -->
 </div>
</div>
 
</body>
</html>