Dalam artikel sebelumnya, saya memperkenalkan beberapa komponen yang berguna dalam seri komponen Bootstrap (disarankan). Selanjutnya, artikel ini memperkenalkan beberapa komponen yang berguna dalam seri komponen Bootstrap (direkomendasikan 2). Teman yang tertarik akan belajar bersama!
7. Komponen Input Multi-Nilai Manifes
Mengenai input multi-nilai kotak teks, itu selalu menjadi persyaratan umum. Hari ini, blogger merekomendasikan komponen input multi-nilai yang berguna untuk semua orang. Jangan berterima kasih kepada saya, tolong hubungi saya "Red syal"!
1. Tampilan Efek
Kotak Input Multi-Nilai Lokal
Kotak input multi-nilai jarak jauh
2. Deskripsi Kode Sumber
Terima kasih kepada komunitas open source dan orang -orang lucu yang suka berbagi. Alamat sumber terbuka.
3. Contoh Kode
(1) Input multi-nilai lokal
Pertama, Anda perlu merujuk file -file berikut
<tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-master/src/jQuery.manifest.css" rel = "stylesheet"/<script script/~ ~ ~ ~ src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-manifest-master/build/Parts/jQuery.ui.widget.js"> </script> <script src = "~/content/JUDEY-MANIFESTER">
File JS dan CSS dari Bootstrap tidak diperlukan. Artikel ini demi gaya yang baik, jadi dirujuk. Komponen manifes tidak bergantung pada bootstrap, tetapi tergantung pada jQuery. Selain itu, ia juga perlu merujuk ke tiga file: jQuery.manifest.css, jQuery.ui.widget.js, dan jquery.marcopolo.js.
Lalu ada inisialisasi HTML dan JS
<input type = 'text' autoComplete = "off" id = "txt_man"/> <script type = "text/javascript"> $ (function () {$ ('#txt_man'). manifest ();}); </skrip>Melalui langkah -langkah sederhana seperti di atas, efek di atas dapat dihasilkan. Bukankah itu sangat sederhana? Mari kita lihat beberapa penggunaannya
// Properti Umum: Dapatkan koleksi semua item di kotak teks var values = $ ('#txt_man'). Manifest ('values'); // Metode umum 1: Hapus item terakhir $ ('#txt_man'). Manifest ('hapus', ': terakhir'); // Metode umum 2: Tambahkan item baru dalam kotak teks item. The format of the second parameter is determined by the format of JSON data $('#txt_man').manifest('add', {id: "1",name:"ABC"});//Common method 3: Get the list of remotely searched data $('#txt_man').manifest('list');//Common event 1: New item event $ ('#txt_man'). on ('manifestAdd', function (event, data, $ item, inisial) {// alert ("Item yang baru ditambahkan adalah:"+data);}); // acara umum 2: hapus item event $ ('#txt_man'). on ('manifestremove', function (event, data, $ item) {{{{} ('manifestremove', function (event, data, $ item) {{{{{} ('manifestremove', function (event, data, $ item) {{{{{}). $ ('#txt_man'). on ('manifestselect', function (event, data, $ item) {});(2) Input multi-value jarak jauh
Cara ke input pencarian jarak jauh mengharuskan kami untuk memberikan alamat URL, mendapatkan data, dan kemudian kembali ke browser. Untuk kesederhanaan, artikel ini secara langsung menggunakan URL di situs web kode sumber untuk menampilkan efeknya.
Pertama, Anda perlu merujuk file JS
<tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/jQuery-manifest-master/src/jQuery.manifest.css" rel = "stylesheet"/<script script/~ ~ ~ ~ src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/jQuery-manifest-master/build/Parts/jQuery.ui.widget.js"> </script> <script/JUCK = "~/Content/JUIFest-manifest"> </scrips/JUTCOCT/JUCK/JUCK = "~/Content/JUIFESTESTESTESTESTEST/" " src = "~/content/jQuery-manifest-master/build/jQuery.manifest.js"> </script>
Dibandingkan dengan di atas, ada referensi tambahan untuk file jQuery.marcopolo.js.
Lalu ada inisialisasi HTML dan JS
<Form Action = "https://api.foursquare.com/v2/venues/search?callback=?" method="get"><div><div><input type='text' id="txt_man2" /><img src="~/Content/jquery-manifest-master/busy.gif" /></div></div></form> <script type="text/javascript">$(function () {$('#txt_man2').manifest({formatDisplay: function (data, $ item, $ mpitem) {return data.name;}, formatValue: function (data, $ value, $ item, $ mpItem) {return data.id;}, marcopolo: {data: {client_id: 'NO2MTQVBQANW3Q3SG23OFVMEGYOWIZDT4E1QHRPZO0BFCN4X', CLIENT_SECRET: 'LG2WRKKS1SXZ2FMKDG01LDW1KDTEKTULMXMXM0XEVWRN0, INTERENT:' INTENTEKKTULMXM0XEVWRN0, ' '20150601'}, formatData: function (data) {return data.response.venues;}, formatItem: function (data, $ item) {return data.name;}, minchars: 3, param: 'kueri'}, diperlukan: true});}); </skrip>Adapun pentingnya setiap parameter, harus mudah dipahami jika Anda membutuhkannya. Blogger secara singkat memantau nilai pengembalian metode pencarian jarak jauh ini
Jika seorang teman taman bermaksud menggunakan metode jarak jauh ini sendiri, Anda dapat merujuk pada format data ini untuk mengimplementasikannya.
8. Kotak Teks Pencarian Komponen Bootstrap-Typeahead
Bahkan, banyak komponen memiliki fungsi ini mengenai fungsi pencarian kotak teks. Misalnya, ada komponen pelengkapan otomatis dalam jQuery UI yang digunakan oleh blogger untuk mencapai penyelesaian otomatis. Komponen pencarian otomatis dari kotak teks bootstrap muncul secara online. Alasan saya memilih komponen ini hari ini adalah karena saya pikir itu mirip dengan gaya Bootstrap, dan komponennya lebih kecil, sederhana dan praktis.
1. Tampilan Efek
Pencarian statis lokal (sumber data adalah lokal)
Pencarian jarak jauh (sumber data diambil dari jarak jauh melalui permintaan AJAX)
2. Deskripsi Kode Sumber
Deskripsi kode sumber
3. Contoh Kode
File pertama yang perlu dirujuk: terutama berisi file CSS dan JS. Butuh dukungan dari jQuery dan bootstrap.
<tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <tautan href = "~/konten/twitter-bootstrap-tipea-master/twitter-bootstrap-tipeah-master/demo/css/prettify.css" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = "rel =" rel = " src="~/Content/jquery-1.9.1.js"></script><script src="~/Content/bootstrap/js/bootstrap.js"></script><script src="~/Content/twitter-bootstrap-typeahead-master/twitter-bootstrap-typeahead-master/js/bootstrap-typeahead.js"></script>
Kemudian inisialisasi komponen
<input type = 'text' id = "txt_man" />
Sumber data secara lokal
<script type = "text/javascript"> $ (function () {$ ("#txt_man"). TypeAhead ({Sumber: [{Key: 1, Value: 'Toronto'}, {key: 2, value: 'montreal'}, {key: 3, value: 'New York'}, {{Key: 4, value '{' BUFFAL ' }, {key: 6, value: 'columbus'}, {key: 7, value: 'dallas'}, {key: 8, value: 'vancouver'}, {key: 9, value: 'seattle'}, {key: 10, value: 'los Angeles'}], display: "vale", val: "Sumber data diperoleh melalui permintaan AJAX
<script type="text/javascript">$(function () {$("#txt_man").typeahead({ajax: {url: '/Home2/TypeaheadData',timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,displayField: null,preDispatch: null,preProcess: null},display: "Value", Val: "Key"});}); </Script>Metode uji yang sesuai dengan latar belakang
public JsonResult TypeaheadData(){var lstRes = new List<object>();for (var i = 0; i < 20; i++)lstRes.Add(new { key = i, value = Guid.NewGuid().ToString().Substring(0, 4) });return Json(lstRes, JsonRequestBehavior.AllowGet) ;}Properti Umum:
• Tampilan: Nama bidang yang ditampilkan
• Val: Nilai aktual
• Item: Jumlah hasil pencarian yang ditampilkan secara default. Nilai defaultnya adalah 8
• Sumber: Sumber data lokal, diformat sebagai array.
• AJAX: Objek yang diminta oleh AJAX dapat secara langsung URL string atau objek objek. Jika itu adalah objek objek, saya tidak akan berbicara tentang URL. Properti triggerLength menunjukkan bahwa input beberapa karakter memicu pencarian.
Acara yang umum digunakan:
• Item yang Dipilih: dipicu saat nilai pencarian dipilih.
<script type="text/javascript">$(function () {$("#txt_man").typeahead({ajax: {url: '/Home2/TypeaheadData',timeout: 300,method: 'post',triggerLength: 1,loadingClass: null,displayField: null,preDispatch: null,preProcess: null},display: "value",val: "Key", item yang dipilih: fungsi (item, val, teks) {}});}); </script>Item parameter mewakili objek yang dipilih, val parameter mewakili nilai aktual dari item yang dipilih, dan teks mewakili nilai yang ditampilkan dari item yang dipilih.
9. Komponen Langkah Bootstrap
Mengenai komponen langkah bootstrap, artikel sebelumnya memperkenalkan widget YSTEP. Ini dapat memainkan peran tertentu dalam melihat kemajuan tugas, tetapi untuk beberapa bisnis yang kompleks, agak tidak berdaya untuk berurusan dengan bisnis yang sesuai sesuai dengan langkah -langkah saat ini. Hari ini, blogger akan memperkenalkan komponen langkah yang memiliki efek yang sangat baik. Dengan komponen ini, programmer tidak perlu lagi khawatir tentang desain langkah yang kompleks.
1. Tampilan Efek
Sekilas gaya
Ikuti langkah -langkah ke "Langkah Sebelumnya" dan "Langkah Berikutnya"
Lebih banyak langkah
2. Deskripsi Kode Sumber
Komponen ini ditemukan oleh blogger online. Saya melihat bahwa banyak gaya dan penggunaan berasal dari Bootstrap. Satu -satunya hal yang perlu saya rujuk adalah file JS dan CSS. Sumber kode sumber belum ditemukan. Jika ada yang tahu sumber kode sumber, Anda dapat memberi tahu blogger. Selain itu, untuk menghormati hasil tenaga kerja penulis, blogger harus menghormati orisinalitas!
3. Contoh Kode
File yang perlu direferensikan
<tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/bootstrap-step/css/bs-is-fun.css" rel = "stylesheet"/<script src = "~/~/j). src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-step/js/brush.js"> </script>
bs-is-fun.css dan sikat.js perlu direferensikan, dan komponen membutuhkan dukungan dari jQuery dan bootstrap.
Lalu ada inisialisasi komponen.
(1) Panah
<ul> <li> <a> Step1 </a> </li> <li> <a> Step2 </a> </li> <li> <a> Langkah3 </a> </li> </ul>
Jika ini adalah langkah statis, Anda hanya perlu kode HTML di atas untuk melihat efek langkah panah pada gambar di atas. Gaya aktif di sini mewakili gaya yang telah dilewati langkah.
(2) persegi
<ul> <li> <a> Step1 </a> </li> <li> <a> Step2 </a> </li> <li> <a> Langkah3 </a> </li> </ul>
(3) Bentuk melingkar
<ul> <li> <a> Step1 </a> </li> <li> <a> Step2 </a> </li> <li> <a> Langkah3 </a> </li> </ul>
(4) Bilah kemajuan
<ul> <li> <a> Step1 <span> </span> </a> </li> <li> <a> Step2 <span> </span> </a> </li> <li> <a> Langkah3 <span > </span> </a> </li> <li> <a> Step4 <span> </span> </a> </li> <li> <a> Step5 <span> </span> </a> </li> </ul>
(5) Langkah Sebelumnya, Langkah Berikutnya
"Langkah Sebelumnya" dan "Langkah Berikutnya" pada gambar di atas didefinisikan oleh diri Anda sendiri di komponen modal Bootstrap, atau kode yang diposting untuk referensi Anda.
<div id="myModalNext"><div><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4>Option configuration</h4><ul><li><a>Step 1<span></span></a></li><li><a>Step 2 <span> </span> </a> </li> <li> <a> Langkah 3 <span> </span> </a> </li> <li> <a> Langkah 4 <span> </span> </a> </li> </li> </li> </li> </div> <Div> <Div Data-Ride = "CAROUSEL" Role = "ListBox"> <div> <p> Langkah 1 </p> <div> Mengkonfigurasi Peran </div> <vert> <input type = "Text"/> </div> <vect type = "Tombol"> Simpan </button> </Div> <p> Langkah 2 </p * </Div> Konfigurasikan Pengguna </Div> <Div> <p> Langkah 2 </p> <Div> Konfigurasikan Pengguna </Div> <Div> <p> type = "Tombol"> Simpan </button> </div> <v> <p> Langkah 3 </p> </div> <v> <p> Langkah 4 </p> </div> <v> <p> Langkah 5 </p> </div> <p> <p> Langkah 6 </p> </div> </Div> </Div> <v> <p> Type type = "Tombol"> Berikutnya </button> </div> </div> </div>
Tentu saja, Anda juga perlu mendaftarkan acara klik untuk dua tombol
$ ("#mymodalnext .modal-footer tombol"). masing-masing (fungsi () {$ (this) .click (function () {if ($ (this) .hasclass ("mn-next")) {$ ("#mymodalnext .carousel"). Courousel ('NEXT'); "#"#myModalnext .sarousel "). Courousel ('NEXT' ("#"#"#myModalNext .SAREL "). CORUSEL ('NEXT' ("#"#"#"#MYMODALLEX. li.active "). next (). addClass (" Active ");} else {$ ("#mymodalnext .carousel "). carousel ('prev'); if ($ ("#mymodalnext .step li "). Panjang> 1) {$ ($ ($ ($ ("#myModex. li.active "). Panjang - 1]). RemoveClass (" Active ")}}})})Logika mungkin tidak lengkap dan pengujian diperlukan jika digunakan secara formal.
10. Tombol Load Komponen Ladda-Bootstrap
Mengenai pemuatan tombol, blogger telah lama ingin menemukan komponen yang sesuai untuk dioptimalkan. Jika tidak diproses, pasti ada kemungkinan operasi berulang. Mari kita lihat hal yang begitu kecil hari ini.
1. Tampilan Efek
Pertemuan pertama
Warna, ukuran, bilah kemajuan khusus
2. Deskripsi Kode Sumber
Alamat kode sumber
3. Contoh Kode
File yang perlu direferensikan
<tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <link href = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda-themeless.min.min.cssss" rel = "style =" styles/ladda/ladda-themeless.min.min.cssssssssss "rel =" styles/ladda/ladda etremeless.min.cssssssssssssss "rel =" "styles" rel = "styles/ladda/ladda" src = "~/content/jQuery-1..9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/ladda-boottrap-paster/ladda-bootstrap/script src = "~/content/ladda-bootstrap-master/ladda-bootstrap-master/dist/ladda.min.js"> </script>
Inisialisasi Komponen: Inisialisasi 4 tombol
<button data-style="expand-left"><span>expand-left</span></button><button data-style="expand-right"><span>expand-right</span></button><button data-style="zoom-in"><span>zoom-in</span></button><button data-style="zoom-out"><span>zoom-out</span></button> $(function () {$ ('tombol'). Klik (fungsi (e) {e.preventDefault (); var l = ladda.create (this); l.start (); l.setProgress (0 - 1); $. Post ("/home2/typeHeadData", {}, function (data, state) {console (console) (console (console ("console (" console ("console (" data) {console (data) (data) (data) (data) {console) (data) {console) {console. {l.stop ();}); return false;});});Keraguan Kode: Seharusnya tidak sulit dipahami. Kode yang terlibat dalam menginisialisasi komponen var l = ladda.create (ini); l.start (); Di sini ini mewakili objek tombol yang saat ini diklik (perhatikan bahwa ini adalah objek DOM, bukan objek jQuery), dan kemudian hubungi l.stop (); Setelah permintaan selesai, tutup beban.
(1) Semua opsi gaya data adalah sebagai berikut. Jika Anda tertarik, Anda dapat mencobanya dan melihat apa efeknya:
Data-style = "Expand-left"
Data-style = "Expand-Right"
Data-style = "Expand-up"
Data-style = "Expand-down"
data-gaya = "zoom-in"
data-gaya = "zoom-out"
data-gaya = "slide-left"
Data-style = "Slide-Right"
Data-style = "slide-up"
Data-style = "slide-down"
Data-style = "Kontrak"
(2) Jika Anda perlu menyesuaikan ukuran tombol, komponen memiliki properti ukuran data bawaan. Semua opsi ukuran data adalah sebagai berikut:
ukuran data = "xs"
ukuran data = "s"
ukuran data = "l"
(3) Jika Anda perlu mengatur warna tombol, gunakan data-color-color
Data-Spinner-Color = "#FF0000"
(4) Pengaturan bilah kemajuan tombol
Ladda.bind ('tombol', {callback: function (instance) {var progress = 0; var interval = setInterval (function () {progress = math.min (progress + math.random () * 0.1, 1); instance.setProgress (progress); if (progress === 1) {instance.stop (); oLintVal (progress); if (progress === 1) {instance ();Kemajuan eksekusi saat ini terutama ditetapkan melalui contoh kalimat. Dalam proyek resmi, kita perlu menghitung situasi eksekusi permintaan saat ini untuk secara dinamis mengembalikan kemajuan.
11. Sakelar Komponen Bootstrap-Switch
Di beranda situs Bootstrap Chinese, Anda dapat menemukan komponen seperti itu
1. Tampilan Efek
Efek awal
Berbagai atribut dan acara
2. Deskripsi Kode Sumber
Alamat kode sumber bootstrap-switch: https://github.com/nostalgiaz/bootstrap-switch
Dokumentasi dan demo bootstrap-switch: http://www.bootstrap-switch.org/examples.html
3. Contoh Kode
File yang perlu direferensikan
<tautan href = "~/konten/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <tautan href = "~/content/bootstrap-switch-master/bootstrap-switch-master/dist/css/bootstrap/bootstrap-switch.cssss" rel = " src = "~/content/jQuery-1..9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-switch-master/bootstrap-switch-switch-switch/js/js/js/js/boottrap-switch/bootstrap
Komponen bergantung pada jQuery dan bootstrap
Lalu ada inisialisasi HTML dan JS
<input type = "centang kotak" diperiksa /> $ (fungsi () {$ ('input [type = centang kotak]'). bootstrapswitch ({size: "besar"});})Atribut ukuran tidak perlu. Jika Anda menggunakan gaya default, parameter tidak dapat dilewati.
Properti yang umum digunakan
• Ukuran: Ukuran sakelar. Nilai opsional adalah 'mini', 'kecil', 'normal', 'besar'
• Oncolor: Warna tombol ON di sakelar. Nilai opsional termasuk 'primer', 'info', 'sukses', 'peringatan', 'bahaya', 'default'
• Offcolor: Warna sakelar dalam warna tombol off. Nilai opsional 'primer', 'info', 'sukses', 'peringatan', 'bahaya', 'default'
• OnText: Teks tombol ON di sakelar, standarnya adalah "ON".
• Offtext: Teks sakelar adalah "mati" secara default.
• OnInit: Peristiwa yang menginisialisasi komponen.
• Onswitchchange: Acara saat sakelar berubah.
Acara dan metode umum dapat digunakan untuk melihat dokumen secara langsung, dan pejabat memberikan deskripsi yang sangat rinci.
12. Komponen Penilaian Bootstrap-Rating
Setiap orang harus mengetahui peringkat peringkat pada Taobao ke -10 dan ke -10. Saya tidak sengaja menemukan komponen peringkat gaya bootstrap. Saya merasa menarik. Ini mungkin berguna untuk sistem e-commerce, komunitas, dan forum di masa depan, jadi saya akan membagikannya.
1. Tampilan Efek
2. Deskripsi Kode Sumber
Unduh kode sumber
3. Contoh Kode
Komponen ini membutuhkan dukungan untuk gaya jQuery dan bootstrap
<tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <tautan href = "~/content/bootstrap-star-rating-master/bootstrap-rating-master/css/star-rating.css" rel = "stylesheet"/> src = "~/content/jQuery-1..9.1.js"> </script> <script src = "~/content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/star-rating.js"> </script> <script src = "~/content/bootstrap-star-rating-master/bootstrap-star-rating-master/js/locales/zh.js"> </script>
Langsung melalui komponen awal HTML
<input id="input-2b" type="number" min="0" max="5" step="0.5" data-size="xl"data-symbol="" data-default-caption="{rating} hearts" data-star-captions="{}"><input id="input-21a" value="0" type="number" min=0 max=5 step=0.5 ukuran data = "xl"> <input id = "input-21b" value = "4" type = "number" min = 0 max = 5 langkah = 0,2 ukuran data = "lg"> <input id = "input-21c" value = "0" type = "number" min = 0 max = 8 langkah = 0.5 data-SIZE = "XL" DATA-STARS = "" Min = 0 MAX = 8 Langkah = 0,5 Data-SIZE = "XL" DATA-STARS = "" 8 " type = "angka" min = 0 maks = 5 langkah = 0,5 ukuran data = "sm"> <input id = "input-21e" value = "0" type = "number" min = 0 max = 5 langkah = 0,5 ukuran data = "xs"> <input id = "input-21f" value = "0" type = "angka" Min = 5 MAX = 0. 5 B. type = "number" min = "0" max = "5" step = "0,5" data-stars = 5data-symbol = "" data-default-caption = "{rating} hati" data-captions = "{}"> <input id = "input-22" value = "0" type = "Min = 0 Min = 0 Max =" Input = "Input-22" Value = "0" Type = "Min = 0 Min = 0 Max =" Input = "Input-22" Value = "0" Type = "Min = 0 Min = 0 Data-Container-Class = 'Text-Right' Data-glyphicon = 0>Komponen diinisialisasi melalui kelas = "peringkat". Berikut adalah beberapa parameter yang seharusnya mudah dimengerti:
• Nilai: mewakili skor default saat inisialisasi komponen
• Min: Skor minimum
• Max: Skor maksimum
• Langkah: Skala minimum ditambahkan setiap kali
• ukuran data: ukuran bintang
• Bintang Data: Jumlah bintang
Anda bisa mendapatkan skor saat ini dengan menggunakan $ ("#input-21a"). Val ().
Di atas adalah beberapa komponen yang berguna dari seri komponen bootstrap yang diperkenalkan editor kepada Anda (Rekomendasi 2). Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!