jQuery UI misalnya - Button (Tombol)
Dengan menggunakan melayang tepat (hover) dan aktivasi (aktif) gaya dapat tombol bertema untuk meningkatkan unsur-unsur bentuk standar (seperti tombol, kotak input, anchor) fungsi.
Untuk rincian lebih lanjut tentang komponen tombol, lihat dokumentasi API anggota tombol (Button Widget) .
Fungsi standar
Contoh penanda dapat digunakan untuk tombol: elemen tombol, jenis elemen input dan mengirimkan jangkar.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tombol UI (Tombol) - Fungsi standar </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "Input [type = mengirimkan], sebuah, tombol")
.button ()
.Klik (function (event) {
event.preventDefault ();
});
});
</ Script>
</ Kepala>
<Body>
<Tombol> elemen tombol </ button>
<Input type = "submit" value = "Submit Button">
<a href="#"> anchor </a>
</ Body>
</ Html>
kotak centang
Dengan cara tombol kotak centang adalah gaya tombol aktivasi. elemen label yang terkait dengan kotak sebagai teks tombol.
Dalam hal ini dengan menyebut wadah publik .buttonset() , seperti yang ditunjukkan tiga display tombol gaya kotak.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> tombol jQuery UI (Tombol) - centang </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#periksa") .button ();
$ ( "#format") .buttonset ();
});
</ Script>
<Gaya>
#format {margin-top: 2em;}
</ Style>
</ Kepala>
<Body>
<Input type = "checkbox" id = "memeriksa"> <label for = "check"> saklar </ label>
<Div id = "format">
<Input type = "checkbox" id = "Check1"> <label for = "Check1"> B </ label>
<Input type = "checkbox" id = "check2"> <label for = "check2"> I </ label>
<Input type = "checkbox" id = "check3"> <label for = "check3"> U </ label>
</ Div>
</ Body>
</ Html>
icon
Beberapa dengan berbagai kombinasi tombol teks dan ikon
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tombol UI (Tombol) - ikon </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "Tombol: pertama") .button ({
ikon: {
primer: "ui-icon-terkunci"
},
Teks: false
}). Berikutnya (). Button ({
ikon: {
primer: "ui-icon-terkunci"
}
}). Berikutnya (). Button ({
ikon: {
primer: "ui-icon-gear",
sekunder: "ui-icon-segitiga-1-s"
}
}). Berikutnya (). Button ({
ikon: {
primer: "ui-icon-gear",
sekunder: "ui-icon-segitiga-1-s"
},
Teks: false
});
});
</ Script>
</ Kepala>
<Body>
<Tombol> tombol ikon dengan hanya </ button>
<Tombol> ikon tombol di sebelah kiri </ button>
<Tombol> tombol dengan dua ikon </ button>
<Tombol> dengan dua tombol dengan ikon teks tanpa </ button>
</ Body>
</ Html>
radio
Tiga tombol radio ke tombol.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tombol UI (Tombol) - Radio </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Fungsi () {
$ ( "#radio") .buttonset ();
});
</ Script>
</ Kepala>
<Body>
<Form>
<Div id = "radio">
<Input type = "radio" id = "Radio1" name = "radio"> <label for = "Radio1"> Pilih 1 </ label>
<Input type = "radio" id = "radio2" name = "radio" diperiksa = "diperiksa"> <label for = "radio2"> pilih 2 </ label>
<Input type = "radio" id = "radio3" name = "radio"> <label for = "radio3"> Pilih 3 </ label>
</ Div>
</ Form>
</ Body>
</ Html>
tombol perpecahan
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tombol UI (Tombol) - Tombol Berpisah </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Gaya>
Ui-menu {position: absolute; width: 100px;}
</ Style>
<Script>
$ (Fungsi () {
$ ( "#rerun")
.button ()
.Klik (function () {
alert ( "Menjalankan tindakan terakhir");
})
.next ()
.button ({
teks: palsu,
ikon: {
primer: "ui-icon-segitiga-1-s"
}
})
.Klik (function () {
menu var = $ (ini) .parent (). next (). show () posisi. ({
saya: "kiri atas",
di: "kiri bawah",
dari: ini
});
$ (Dokumen) .one ( "klik", function () {
menu.hide ();
});
return false;
})
.parent ()
.buttonset ()
.next ()
.hide ()
.menu ();
});
</ Script>
</ Kepala>
<Body>
<Div>
<Div>
<Tombol id = "tayangan ulang"> Run tindakan terakhir </ button>
<Tombol id = "pilih"> memilih tindakan </ button>
</ Div>
<Ul>
<Li> <a href="#"> terbuka ... </a> </ li>
<Li> <a href="#"> menyimpan </a> </ li>
<Li> <a href="#"> menghapus </a> </ li>
</ Ul>
</ Div>
</ Body>
</ Html>
toolbar
Sebuah multimedia player toolbar. Lihatlah berbasis spidol: Beberapa elemen tombol, tombol Shuffle adalah kotak centang untuk jenis input, pilihan Ulang tiga jenis masukan radio.
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "utf-8">
<Title> jQuery tombol UI (Tombol) - Toolbar </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Gaya>
#toolbar {
padding: 4px;
display: inline-block;
}
/ * Support: IE7 * /
* + #toolbar Html {
display: inline;
}
</ Style>
<Script>
$ (Fungsi () {
$ ( "#beginning") .button ({
teks: palsu,
ikon: {
primer: "ui-icon mencari-start-"
}
});
$ ( "#rewind") .button ({
teks: palsu,
ikon: {
primer: "ui-icon-mencari-prev"
}
});
$ ( "#play") .button ({
teks: palsu,
ikon: {
primer: "ui-icon-play"
}
})
.Klik (function () {
Pilihan var;
if ($ (ini) .text () === "bermain") {
Pilihan = {
label: "jeda",
ikon: {
primer: "ui-icon-pause"
}
};
} Lain {
Pilihan = {
label: "bermain",
ikon: {
primer: "ui-icon-play"
}
};
}
$ (Ini) .button ( "pilihan", opsi);
});
$ ( "#STOP") .button ({
teks: palsu,
ikon: {
primer: "ui-icon-stop"
}
})
.Klik (function () {
$ ( "#play") .button ( "Option", {
label: "bermain",
ikon: {
primer: "ui-icon-play"
}
});
});
$ ( "#forward") .button ({
teks: palsu,
ikon: {
primer: "ui-icon-mencari-next"
}
});
$ ( "# End") .button ({
teks: palsu,
ikon: {
primer: "ui-icon-mencari-end"
}
});
$ ( "#shuffle") .button ();
$ ( "#repeat") .buttonset ();
});
</ Script>
</ Kepala>
<Body>
<Div id = "toolbar" class = "ui-widget-header ui-sudut-semua">
<Tombol id = "awal"> mulai </ button>
<Tombol id = "mundur"> mundur </ button>
<Tombol id = "bermain"> Putar </ button>
<Tombol id = "berhenti"> Berhenti </ button>
<Tombol id = "maju"> Fast forward </ button>
<Tombol id = "end"> akhir </ button>
<Input type = "checkbox" id = "shuffle"> <label for = "shuffle"> Shuffle </ label>
<Span id = "ulangi">
<Input type = "radio" id = "repeat0" name = "ulangi" diperiksa = "diperiksa"> <label for = "repeat0"> Tidak Ulangi </ label>
<Input type = "radio" id = "repeat1" name = "ulangi"> <label for = "repeat1"> Setelah </ label>
<Input type = "radio" id = "repeatall" name = "ulangi"> <label for = "repeatall"> Semua </ label>
</ Span>
</ Div>
</ Body>
</ Html>