JQuery Mobile melaksanakan bar navigasi dan footer_jquery

Bar navigasi terdiri daripada satu set pautan yang disusun secara mendatar, biasanya di dalam pengepala atau pengaki.

Secara lalai, pautan dalam bar navigasi ditukar kepada butang secara automatik (tidak memerlukan data-role="button").

Kod untuk bar navigasi biasanya diletakkan dalam div yang peranan datanya ialah pengepala.

<div data-role="header"> 
<a href="#" data-role="button" data-icon="home">首页</a> 
<h1>欢迎访问我的主页</h1> 
<a href="#" data-role="button" data-icon="search">搜索</a> 
</div>

Kod bar navigasi asas adalah seperti di atas, termasuk dua butang dan satu baris teks sebagai tajuk. ikon data boleh menentukan ikon kecil yang sepadan dengan butang. Jika anda mahu butang diletakkan di sebelah kanan teks, anda boleh menambah gaya class="ui-btn-right". Perlu diingatkan bahawa bahagian navigasi (di dalam pengepala) dalam Jquery Mobile hanya boleh mengandungi dua butang. (Seperti yang anda boleh bayangkan, navigasi aplikasi mudah alih umum tidak mempunyai terlalu banyak butang, dan ia biasanya diletakkan di pengaki)

Sebaliknya, tiada had pada bilangan butang dalam pengaki. Pengaki diletakkan di pengaki Kod asas adalah seperti berikut:

<div data-role="footer"> 
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a> 
</div>

Ini selaras dengan corak reka bentuk aplikasi mudah alih umum Di bahagian bawah terdapat butang untuk beralih ke halaman yang berbeza. Cara untuk menukar halaman juga sangat mudah. ​​Perhatikan bahawa setiap butang di sini ditakrifkan dengan tag ialah, div yang peranan datanya ialah halaman) boleh melengkapkan lompatan. Proses lompat mempunyai banyak kesan animasi terbina dalam jquery mobile, yang akan diperkenalkan kemudian.

Mengenai pengepala dan pengaki, sebagai tambahan kepada perkara di atas, anda juga boleh menggunakan atribut kedudukan data untuk menentukan atribut kedudukannya, termasuk tiga nilai pilihan berikut (dari: w2cschool):

Sebaris - Lalai. Pengepala dan pengaki adalah selaras dengan kandungan halaman.

Tetap – Pengepala dan pengaki akan kekal di bahagian atas dan bawah halaman.

Skrin penuh - Sama seperti tetap; pengepala dan pengaki akan kekal di bahagian atas dan bawah halaman, tetapi juga di atas kandungan halaman juga sedikit tembus

Di sinilah saya akan memperkenalkan anda kepada pengetahuan yang berkaitan tentang pelaksanaan bar navigasi dan pengaki jQuery mudah alih saya harap ia akan membantu anda!