Gunakan jQuery untuk menambah butang dan ikon pada butang pada halaman mudah alih_jquery

Buat butang data-role=button
Tambah atribut data-role="button" pada elemen HTML. jQuery Moble akan meningkatkan elemen ini kepada gaya butang. Rangka kerja Jquery Mobile mengandungi set ikon yang diperlukan oleh aplikasi mudah alih yang paling biasa digunakan Untuk mengurangkan saiz muat turun, Jquery Mobile mengandungi imej sprite ikon putih dan secara automatik menambah bulatan hitam lut sinar selepas ikon untuk memastikan Gambar dapat dipaparkan dengan jelas. pada mana-mana warna latar belakang.

Butang Pautan Gaya

Dalam blok kandungan utama halaman web, anda boleh menggayakan mana-mana pautan sauh untuk butang dengan menambahkan atribut data-role="button". Rangka kerja ini akan meningkatkan butang pautan dengan kaedah penandaan dan pemautan kelas. Contohnya, teg ini:

<a href="index.html" data-role="button">Link button</a>

NOTA: Gaya seperti pautan butang adalah sama dengan pemilihan visual bentuk sebenar di bawah butang, tetapi terdapat beberapa perbezaan penting. Berdasarkan butang pautan, butang itu ialah pemalam, yang bukan sahaja menggunakan pemalam teg butang asas untuk menjana gaya butang, jadi kaedah butang borang (dayakan, lumpuhkan, muat semula) tidak disokong. Jika anda perlu melumpuhkan butang (atau elemen berasaskan pautan), anda boleh menggunakan UI tahap kecacatan kepada orang kurang upaya itu sendiri menggunakan javascript untuk mencapai kesan yang sama.

Versi mini data-mini="true"

Untuk versi yang lebih padat yang berguna dalam bar alat dan ruang yang sempit, tambahkan atribut data-mini="true" pada butang untuk mencipta versi mini.

<a href="index.html" data-role="button" data-mini="true">Link button</a>

Tambahkan ikon pada ikon data butang
Rangka kerja Mudah Alih jQuery termasuk set ikon terpilih yang biasanya diperlukan oleh aplikasi mudah alih. Untuk meminimumkan saiz muat turun, jQuery Mobile mengandungi satu sprite ikon putih, dan secara automatik menambah bulatan hitam lut sinar di belakang ikon untuk memastikan ia kontras dengan baik dengan mana-mana warna latar belakang.

Ikon boleh ditambah pada butang dengan menambahkan sifat ikon pada sauh yang menyatakan data ikon yang akan dipaparkan. Contohnya, teg berikut:

<a href="index.html" data-role="button" data-icon="delete">Delete</a>

Versi mini menambah atribut data-mini="true"

Senarai gaya ikon

jQuery Mobile dilengkapi dengan banyak ikon butang kecil, seperti yang ditunjukkan di bawah:

Anak panah kiri: data-icon="arrow-l"
Anak panah kanan: data-icon="arrow-r"
Anak panah ke atas: data-icon="arrow-u"
Anak panah ke bawah: data-icon="arrow-d"
Padam: data-icon="delete"
Tambah: data-icon="Plus"
Kurangkan: data-icon="minus"
Semak: data-icon="Semak"
Gear: data-icon="gear"
Ke hadapan: data-icon="Forward"
Belakang: data-icon="Kembali"
Grid: data-icon="Grid"
Pentagram: data-icon="Star"
Amaran: data-icon="Alert"
Maklumat: data-icon="info"
Halaman utama: data-icon="home"
Cari: data-icon="Cari"

Data-iconpos kedudukan ikon

Secara lalai, semua ikon diletakkan di sebelah kiri teks butang butang. Lalai ini boleh diganti dengan menggunakan atribut data-iconpos untuk menetapkan teks bahagian atas, bawah, kanan dan kiri ikon. Contohnya, tag:

<font color=#0000ff><a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Delete</a>

Sembunyikan teks pada imej data-iconpos="notext"

Anda juga boleh membuat butang ikon dan menetapkan data-iconpos="notext". Pemalam Button akan menyembunyikan teks pada skrin, tetapi menggunakannya sebagai atribut tajuk pautan kontekstual untuk memberikan pembaca skrin dan peranti yang menyokong petua alat. Contohnya, data-iconpos="right", data-iconpos="notext":

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>

迷你和内联

迷你和内联属性可以被添加到产生更紧凑的按钮

自定义图标 data-icon="自定义值"

使用自定义图标，需要指定 data-icon 值。Jquery Mobile的button插件会将生成一个CSS类，它的前缀是ui-icon- ，后面的是data-icon值。假如：有一个按钮 data-icon 属性的值为 myapp-email，即 data-icon=“ myapp-email”。那么生产的CSS类是：ui-icon-myapp-email。

然后你可以在你的样式表写一个CSS规则来定义 ui-icon-myapp-email。然后在css中指定这个类的背景图片地址。为了保持与其他图标的视觉上的一致性，请创建一个白色18x18像素的PNG-8图标，并且保存为Alpha透明度。

.ui-icon-myapp-email {
 background-image: url( "app-icon-email.png" );
}

这将创建标准分辨率的图标，但许多设备都有非常高的分辨率的显示器，就像iPhone 4的视网膜显示器。添加一个高清图标，创建一个图标，36X36像素（18像素大小完全相同的两倍），并添加第二个规则使用WebKit分钟装置像素比例：2。媒体查询到目标的规则只有以高分辨率显示器。指定背景图片高清图标文件和设置背景像素大小18x18将安装36个像素图标到同一个18像素的空间。传媒查询块可以用多个图标规则：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
 .ui-icon-myapp-email {
  background-image: url( "app-icon-email-highres.png" );
  background-size: 18px 18px;
 }
 ...more HD icon rules go here...
}