Pendahuluan: Saya telah membagikan banyak komponen umum bootstrap sebelumnya, termasuk formulir, verifikasi formulir, unggah file, centang kotak drop-down, kotak pop-up, dll. Selama periode ini, blogger telah mengumpulkan beberapa komponen yang berguna (beberapa di antaranya telah digunakan dalam proyek). Setelah dua hari, dia telah memilah beberapa dari mereka. Berdasarkan prinsip "hal -hal baik harus dibagikan kepada orang lain", hari ini kami akan memberikan beberapa manfaat untuk berbagi hal -hal yang dikumpulkan oleh blogger untuk referensi oleh tukang kebun yang membutuhkan. Sebagian besar komponen adalah komponen open source, dan beberapa di antaranya adalah efek yang ditemukan dan ditulis ulang oleh blogger di internet. Mereka mungkin tidak memuaskan. Jika Anda tertarik, silakan lihat.
1. Komponen Waktu
Ada banyak komponen waktu dalam gaya bootstrap. Anda dapat mencari kata kunci "DatePicker" di GitHub dan Anda dapat menemukan banyak komponen waktu. Blogger telah menggunakan dua dari mereka sebelumnya dan menemukan bahwa akan ada beberapa masalah ukuran besar atau kecil. Setelah beberapa pemutaran film, kami menemukan komponen waktu yang memiliki hasil yang baik dan dapat digunakan untuk berbagai skenario. Mari kita lihat gayanya di bawah ini.
1. Tampilan Efek
Efek awal
Kustomisasi Budaya dan Format Tanggal dalam Komponen: Hanya Tanggal yang ditampilkan
Tampilkan tanggal dan waktu (pengalaman ponsel dan perangkat tablet mungkin lebih baik)
2. Deskripsi Kode Sumber
Chuchu melihat efek komponen dan memberikan alamat kode sumber
3. Contoh Kode
Pertama, referensi file yang diperlukan
<tautan href = "~/konten/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <tautan href = "~/content/bootstrap-datetimePicker-master/build/css/bootstrap-datetimePicker.css" rel = "stylesheet"/> src = "~/content/jQuery-1..9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "// cdnjs.cloudflare.com/ajax/libs/moment.js/2. src = "~/content/bootstrap-datetimePicker-master/build/js/bootstrap-datetimePicker.min.js"> </script>
Diperlukan jQuery dan bootstrap. Selain itu, Anda juga harus merujuk pada file momen-dengan-locales.js. Tentu saja, Anda juga dapat mengunduh file JS ini ke area lokal Anda tanpa menggunakan metode CDN ini. Anda dapat sepenuhnya mengunduh file JS ini ke area lokal Anda dan kemudian menambahkan referensi lokal.
(1) Efek awal
<LABEL> Tanggal: </label> <Div class = 'input-group date' id = 'datetimePicker1'> <input type = 'text'/> <span> <span> </span> </span> </div> <script type = "text/javascript"> $ () {$ ('#dateTimEmepicker'). DATETIMEP "> $ () () {) {$ ('#DATETIMICKER1). </script>Ini akan memberikan efek seperti yang ditunjukkan pada gambar di atas.
(2) Budaya dan format kencan Cina
Bagian HTML tetap tidak berubah. Cukup tambahkan parameter saat menginisialisasi JS.
<script type = "text/javascript"> $ (function () {$ ('#dateTimePicker1'). DatetimePicker ({format: 'yyyy-mm-dd', // formatted formatting, hanya tanggal lokal: 'zh-cn' // budaya Cina});}); </script>(3) Tampilkan waktu
<LABEL> Waktu: </label> <div class = 'input-group date' id = 'datetimePicker2'> <input type = 'text'/> <span> <span> </span> </span> </div> <script type = "text/javascript"> $ () {$ ('#dateTimePicker2'). DATETMEP "> $ () {$ ('#DATETIMEPICKER2). HH: mm: ss ', lokal:' zh-cn '}); </script>(4) Tanggal maksimum dan tanggal minimum
$ ('#DateTimePicker1'). DatetimePicker ({format: 'yyyy-mm-dd', // formating tanggal, hanya tampilan tanggal lokal: 'zh-cn', // budaya Cina maxDate: '2017-01-01', // mindate kencan maksimum: '2010-01-01//Minimum Tanggal Minimum)});(5) Aktifkan tombol Hapus
ShowClear: Benar
(6) Atribut Mode Lihat. Atur browser untuk memilih mode untuk menyalin kode sebagai berikut: viewmode: 'tahun'
(7) Lainnya
Untuk fungsi yang lebih kuat, silakan merujuk ke API, jadi saya tidak akan mencantumkan semuanya di sini. Ada sejumlah besar atribut, acara, dan metode untuk memenuhi berbagai kebutuhan khusus Anda.
2. Komponen perangkat yang meningkat sendiri
Mengenai bootstrap autoincrementer, mungkin tidak diperlukan dalam setiap proyek. Ada beberapa skenario khusus, seperti: kotak teks tertentu membutuhkan nomor data, dan ukuran array perlu disesuaikan. Setelah berbicara untuk waktu yang lama, beberapa tukang kebun mungkin tidak tahu seperti apa, jadi silakan klik gambarnya.
1. Tampilan Efek
Faktanya, efeknya sangat sederhana, tetapi secara otomatis dapat menetapkan nilai maksimum, nilai minimum, dan nilai tambah mandiri, dan secara otomatis dapat melakukan verifikasi digital. Hal yang paling nyaman adalah bahwa ia perlu diinisialisasi menggunakan JavaScript, dan hanya perlu diinisialisasi dalam HTML.
2. Deskripsi Kode Sumber
Kode Sumber dan Alamat Dokumen
3. Contoh Kode
File pertama yang dirujuk adalah sebagai berikut:
<tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <tautan rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/csseesey-weycdn.com/font-awesome/4.6.3/csseage.min.min.min.min.min.min.min href = "~/content/jQuery.spinner-master/dist/css/bootstrap-spinner.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script> <cript src = "~/content/content/bootstrap/js/boottrp src = "~/content/jQuery.spinner-master/dist/js/jquery.spinner.js"> </script>
File Font-Aweaome.min.css juga merupakan file referensi CDN, dan Anda juga dapat merujuknya ke lokal Anda.
(1) Inisialisasi
<Div data-trigger = "spinner"> <input type = "text" value = "1" data-aturan = "kuantitas"> <span> <a href = "javascript :;" data spin = "up"> <i> </i> </a> <a href = "javascript :;" data spin = "down"> <i> </i> </a> </span> </div>
Hanya bagian HTML sederhana, Anda dapat melihat efek seperti yang ditunjukkan pada gambar di atas. Apakah mudah?
(2) Jenis yang meningkat pada diri sendiri
Saat melihat kode sumber komponen, Anda dapat melihat bahwa ada beberapa jenis penari-sendiri yang ditentukan untuk kami:
Anda dapat mendefinisikan atribut aturan data untuk jenis ini, seperti:
Aturan yang dapat mengontrol komponen pembangkangan diri dilakukan sesuai dengan aturan bulanan.
(3) Tetapkan nilai maksimum, nilai minimum, nilai tambah sendiri
Selain jenis spesifik di atas, komponen juga mendukung nilai maksimum, minimum, dan penambahan kustom.
<Div Data-Trigger = "Spinner"> <input type = "text" value = "1" data-min = "-10" data-max = "10" data-step = "2"-rule = "kuantitas"> <span> <a href = "javascript :;" data spin = "up"> <i> </i> </a> <a href = "javascript :;" data spin = "down"> <i> </i> </a> </span> </div>
Data-min = "-10": Nilai minimum Data-max = "10": Nilai maksimum Data-step = "2": Nilai yang meningkat sendiri
Ini mudah dimengerti, dan saya tidak akan menjelaskannya terlalu banyak. Memengaruhi:
(4) Tangkapan Acara
Komponen menyediakan dua peristiwa berubah dan berubah, yang sesuai dengan perubahan numerik dan callback acara setelah perubahan.
$ ('#id'). spinner ('diubah', fungsi (e, newVal, oldval) {}); $ ('[data-trigger = "spinner"]'). spinner ('change', function (e, newval, oldval) {});3. Efek pemuatan
Beberapa hari yang lalu, seorang anggota kelompok meminta komponen apa yang akan digunakan untuk efek pemuatan Bootstrap. Bahkan, mencari Baidu juga dapat menemukan banyak hasil. Di sini, blogger akan membagikan beberapa widget yang dimuat berdasarkan pengalaman penggunaannya, berharap semua orang dapat menggunakannya. Ini terutama dibagi menjadi praktis dan keren. Model praktis memiliki efek rata -rata, tetapi dapat digunakan untuk berbagai browser; Model keren ditulis menggunakan CSS3 dan HTML5 terbaru, dan efeknya sangat keren, tetapi pada dasarnya versi IE yang lebih rendah (di bawah 10) tidak kompatibel.
1. Praktis
1. Komponen Muat Perfect
Komponen ini adalah JS yang ditemukan oleh blogger di internet, tetapi setelah mengunduhnya, saya menemukan beberapa masalah besar dan kecil. Jadi blogger menulis ulang dan menamainya komponen pemuatan bootstrap. Prinsipnya adalah untuk memunculkan lapisan penutup ketika komponen dimulai, dan kemudian ketika komponen ditutup, lapisan overlay DOM dilepas, dan efek pemuatan menggunakan gambar GIF.
Konten File PerfectLoad.js:
/*******************************************Plug-in: Efek pemuatan halaman yang ramah*Penulis: sqinyang ([email protected])*Waktu: 2015/04/20*Penjelasan: Dengan popularitas HTML5, efek LOAD-LOADS semakin menuntut Noals. Kecepatan internet sangat sengit, terutama untuk situs web yang tergantung di server asing. Setelah Anda membuka banyak bahan, Anda dapat secara perlahan memuat lokasi dan lokasi tidak konsisten. Oleh karena itu, metode ini ditulis untuk memfasilitasi semua orang menggunakan ******************************************************/jQuery.bootstrapLoading = {start: function (opsi) {var Defaults = {Opacity://Loading Page Transparency Transparency Backgroundcolor: "#FFFFFFFFFFFFFFFFFFFFFFFS =/OPACATE://LOADING PAGE TRANSFORTENT border color borderWidth: 1, //prompt border width borderStyle: "solid", //prompt border style loadingTips: "Loading, please wait...", //prompt text TipsColor: "#666", //prompt color delayTime: 1000, //After the page loading is completed, the loading page is gradually out of speed zindex: 999, //loading page hierarchy sleep: 0 //Set suspend, if itu sama dengan 0, tidak perlu menangguhkan} var options = $ .Extend (default, opsi); // Dapatkan lebar halaman dan tinggi var _pageHeight = document.documentelement.clientHeight, _pagewidth = document.documentelement.clientwidth; // LoadingHtml Konten khusus ditampilkan sebelum halaman tidak dimuat var _loadingHtml = '<Div id = "LoadingPage" style = "Posisi: Fixed; kiri: 0; atas: 0; _Posisi: absolute; lebar: 100%; tinggi:' + _pageHeight + 'px; latar belakang:' + options. '; Filter: alpha (opacity =' + options.opacity * 100 + '); z-index:' + options.zindex + '; "> <div id =" loadingtips "style =" Posisi: absolute; 'PX; '; font-size: 20px; ">' + options.LoadingTips + '</div> </div>'; // mewakili efek pemuatan $ ("body"). Append (_loadingHtml); // Dapatkan lebar dan tinggi kotak prompt pemuatan var _loadingtipsh = document.getElementById ("LoadingTips"). ClientHeight, _LoadingTipsw = document.getElementById ("LoadingTips"). ClientWidth; // Hitung jarak dan simpan kotak prompt pemuatan, ke bawah, kiri dan kanan, berpusat var _loadingtop = _pageHeight> _LoadingTipsh? (_PageHeight - _LoadingTipsh) / 2: 0, _LoadingLeft = _Pagewidth> _LoadingTipsw? (_Pagewidth - _LoadingTipsw) / 2: 0; $ ("#LoadingTips"). CSS ({"Left": _LoadingLeft + "px", "Top": _LoadingTop + "px"}); // dengarkan dokumen status pemuatan halaman. // jalankan fungsi pageloaded () {if (document.readystate == "complete") {var loadingmask = $ ('#loadingpage'); setTimeout (function () {loadingmask.animate ({"opacity": 0}, options.delaytime, function () {$ (this) .hide ();});}, options.sleep); }}}, end: function () {$ ("#loadingpage"). Remove (); }}
JS ini pada dasarnya online, tetapi atas dasar ini, blogger menambahkan metode akhir.
Mari kita lihat bagaimana komponen digunakan. Ini kode uji:
<html> <head> <meta name = "viewport" content = "width = device-width"/> <title> memuat </iteme> <tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/<script script = "~/jquery-1.9.9. src = "~/content/bootstrap/js/bootstrap.js"> </script> <script src = "~/content/bootstrap-loading/sempurna.js"> </script> <script type = "text/javascript"> $ (function () {$ ("#btn_subm"). $ .bootStraploading.start ({LoadingTips: "Data sedang diproses, tunggu ..."}); </script></head><body> <div style="padding:0px"> <div style="height:450px;"> <div>Query conditions</div> <div> <form id="formSearch"> <div> <div> <button type="button" id="btn_submit"><span aria-hidden="true"></span>Loading test</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>Instruksi untuk digunakan: Komponen tidak memerlukan kode HTML, ia hanya perlu memanggil metode start komponen saat menjalankan pemuatan. Metode start () memulai lapisan pop-up dan dapat mengatur semua parameter dalam variabel default. Ketika pemuatan selesai, metode akhir komponen akan dipanggil, dan lapisan pop-up akan secara otomatis dihapus. Mari kita lihat efeknya:
Jika Anda tidak puas dengan efeknya, Anda dapat mengatur parameter di default sendiri. Anotasi ditulis secara rinci, jadi saya tidak akan mencantumkannya satu per satu di sini.
2. Komponen pemuatan krisan spin.js
Menggunakan gambar untuk menampilkan efek pemuatan memiliki kelemahan yang melekat, begitu banyak komponen pemuatan sekarang menggunakan CSS+JS untuk mencapai efek animasi. Spin.js adalah salah satu contoh ini. Spin.js adalah komponen open source dengan alamat sumber terbuka.
Setelah mengunduh kode sumber, inisialisasi menemukan bahwa komponen tidak memiliki topeng, sehingga hanya bisa seperti ini:
Setelah mencari parameternya untuk waktu yang lama, saya tidak dapat menemukannya, atau saya tidak menemukannya di mana ada "organisasi". Tidak mungkin, blogger hanya dapat menambahkan efek topeng itu sendiri. Jadi file gaya CSS baru dibuat dan sementara dinamai spin.css, dengan hanya satu gaya di dalamnya:
.fade {position: diperbaiki; TOP: 0; Kanan: 0; Bawah: 0; Kiri: 0; z-index: 9999; Opacity: 1; latar belakang-warna: abu-abu;}Kemudian spin.js ditulis ulang di dua tempat, dan konten penulisan ulang adalah sebagai berikut:
/** * Hak Cipta (C) 2011-2014 Felix Gnass * dilisensikan di bawah lisensi MIT * http://spin.js.org/ * * Contoh: var opts = {lines: 12,//Jumlah garis untuk menarik panjang: 7, // Panjang setiap baris lebar: 5, // garis ketebalan garis: 10,/ spinner corners: 1, // Roundness (0..1) color: '#000', // #rgb or #rrggbb opacity: 1/4, // Opacity of the lines rotate: 0, // Rotation offset direction: 1, // 1: clockwise, -1: counterclockwise speed: 1, // Rounds per second trail: 100, // Afterglow percentage fps: 20, // Frames per second when using setTimeout() zIndex: 2e9, // Use a high z-index by default className: 'spinner', // CSS class to assign to the element top: '50%', // center vertically left: '50%', // center horizontally shadow: false, // whether to render a shadow hwaccel: false, // Whether to use hardware acceleration (might be buggy) position: 'absolute' // Element positioning }; var target = document.geteLementById ('foo'); var spinner = spinner baru (opts) .spin (target); */; (function (root, factory) {if (typeOf module == 'objek' && module.exports) module.exports = factory (); // commonjs lain jika (typeof define == 'function' && define.amd) define (factory); // amd module lain root.spinner = factory ();) () (factory) (factory); // AMD modul lain root.spinner = factory (); Prefiks = 'WebKit', 'Moz', 'MS', 'O']; Div dibuat. i ++) {Parent.AppendChild (Argumen [i]); I, Lines] .join ('-'); ||. ' +' 100%{Opacity: ' + z +'} ' +'} ', sheet.cssrules.length) Animasi [nama] = 1; Prop.charat (0) .tupercase ()+prop.slice (1); prop) untuk (var n dalam prop) {el.style [vendor (el, n) || n] = prop [n] tidak ditentukan) OBJ [n] = Def [n]; line width: 5, // The line thickness radius: 10, // The radius of the inner circle scale: 1.0, // Scales overall size of the spinner corners: 1, // Roundness (0..1) color: '#000', // #rgb or #rrggbb opacity: 1/4, // Opacity of the lines rotate: 0, // Rotation offset direction: 1, // 1: clockwise, -1: Kecepatan berlawanan arah jarum jam: 1, // putaran per detik jejak: 100, // Persentase afterglow fps: 20, // bingkai per detik saat menggunakan setTimeout () Zindex: 2e9, // Gunakan kelas-z-index tinggi secara default: 'spinner'. Render Shadow Hwaccel: False, // Apakah akan menggunakan posisi akselerasi perangkat keras: 'absolute' // Posisi elemen}; gabungan (spinner.prototype, { / ** * Menambahkan pemintal ke elemen target yang diberikan. Jika instance ini sudah * berputar, secara otomatis dihapus dari target sebelumnya B panggilan * stop () secara internal. * / spin: function (target) {this.stop (); var self = var o = self.opts; var el = {this. CSS (EL, {Posisi: O.Posisi, Lebar: 0, Zindex: O.Zindex, Kiri: O.Left, TOP: O.TOP}) self.opts); = f / o.lines; (function anim () {i ++; for (var j = 0; j <o.lines; j ++) {alpha = math.max (1 - (i+(o.lines - j) * step) % f * step, o.opacity); self.opacity (el, j * o.direction+start, alpa, o. ~ ~ 1000/fps)); El.Parentnode.className = El.Parentnode.ClassName.Replace (Reg, ''); (O.Lines - 1) * (1 - O.Direction) / 2; Transform: 'Rotate (' + ~~ (360/o.lines * i + o.rotate) + 'deg) translate (' + o.scale * o.radius + 'px' + ', 0)', borderradius: (o.corners * o.scale * o.width >> 1) + 'px'}; css (createel (), {position: 'absolute', top: 1 + ~ (o.scale * o.width / 2) + 'px', transform: o.hwaccel? 'Translate3d (0,0,0)': ', opacity: o.opacity, animasi: usecsanimation & & ADDUDANIMASI (o. o.Opacity, o. o. o. o.opacity: o. o.opacity: o. o.opacity: o. o.opacity: o.opacity: o.opacity o. o.lines) + '' + 1 / o.speed + linear Infinite '}); if (o.shadow) INS (Seg, CSS (fill (' #000 ',' 0 0 4px #000 '), {top:' 2px '})); RGBA (0,0,0, .1) ')); initvml () { / * fungsi utilitas untuk membuat tag vml * / function vml (tag, attr) {return createel ('<' + tag + 'xmlns = "urn: schemas-microsoft.com: vml"> ATTR); 'Perilaku:#Default#VML)'); {Width: S, STE: S}); / o.lines * i + 'deg', kiri: ~~ dx}), INS (css (vml ('roundrect', {arcsize: o.corners}), {lebar: r, tinggi: o.scale * o.width, kiri: o.scale * o.radius, top: -o.scale *,. vml ('isi', {color: getColor (o.color, i), opacity: o.opacity}), vml ('stroke', {opacity: 0}) // stroke transparan untuk memperbaiki perdarahan warna pada 2; 'Progid: dximagetransform.microsoft.blur (pixelradius = 2, makeshadow = 1, shadowopacity = .3)') untuk (i = 1; i <= o.lines; i ++); EL.FirstChild; = () {var el = createel ('style', {type: 'text/css'}); INS (Document.getElementsbyTagname ('head') [0], el); return el.sheet || el.stylesheet;} ()); (! Vendor (probe, 'transformasi') && probe.adj) initvml ();spin.js
Dua perubahan:
(1) Saat menginisialisasi, jika ditampilkan, tambahkan gaya fade ke tag yang sesuai.
(2) Hapus gaya fade setiap saat.
Setelah modifikasi dibuat, antarmuka uji sekarang tersedia.
<html> <head> <meta name = "viewport" content = "width = device-width"/> <title> loading2 </title> <link href = "~/content/bootstrap/css/bootstrap.css" rel = "styles"/> <link href = "~ ~ ~ ~ ~ content/content. <skrip src = "~/content/jQuery-1.9.1.js"> </script> <skrip src = "~/content/bootstrap/js/bootstrap.js"> </script> <skrip src = "~/content/spin.js-master/js/spin.js"> </skrip> script = "TEPPRIP =" $("#btn_submit").on("click", function () { //var opts = { // lines: 9, // Number of petals// length: 1, // Petal length// width: 10, // Petal width// radius: 15, // Petal radius from the center// corners: 1, // Petal smoothness (0-1) // Rotate: 0, // Petal rotation Sudut // arah: 1, // arah rotasi kelopak 1: searah jarum jam, -1: berlawanan arah jarum jam // warna: '#000', // warna kelopak // kecepatan: 1, // kecepatan rotasi kelopak // jejak: 60, // bayangan ketika kelopak berputar (persentase) // false,// apakah petal shadows shadow // hwaccel: falser: falser, false,/ Apakah kelopak bayangan petal // hwaccel: falser: falser, falser,/ apakah kelopak bayangan // hwaccel: hwaccel: falser, false, false,/ Apakah kelopak bayangan// hwaccel: hwaccel: falser, false, false,/ Apakah kelopak bayangan// hwaccel: hwaccel: falser, false, found Diaktifkan // ClassName: 'Spinner', // Pemintal CSS Gaya Nama // Zindex: 2E9, // SPINNER Z-AXIS (Default adalah 2000000000) // TOP: 'AUTO', // SPINNER TOP POSISI POX PX//KIRI; Document.getElementById ('foo'); // var spinner = spinner baru ({}). spin (target); Lebar kelopak: // lebar kelopak: 15, // jarak kelopak dari bayangan tengah: true, opacity: 1/8}; });})}); </script></head><body> <div style="padding:0px"> <div style="height:450px;"> <div>Query conditions</div> <div> <form id="formSearch"> <div> <div> <button type="button" id="btn_submit"><span aria-hidden="true"></span>Loading test</button> </div> </form> </div> </div> </div> </div> </div> </div> <div id = "foo"> </div> </body> </html> test_spin.cshtmlInstruksi untuk digunakan: Jika halaman Anda tidak menggunakan jQuery, lihat file spin.js, file ini tidak memerlukan dukungan jQuery; Jika Anda ingin menggunakan jQuery, lihat file jQuery.spin.js. Kode di atas tidak menggunakan jQuery. Komponen perlu mendefinisikan div kosong dan kemudian menginisialisasi pada div ini. Hasil yang diperoleh adalah sebagai berikut:
Tentu saja, jika Anda tidak puas dengan efek ini, Anda juga dapat mengatur transparansi lapisan topeng dan gaya seluruh topeng. Ada juga berbagai parameter untuk rotasi yang dapat disesuaikan selama inisialisasi, dan ada komentar terperinci dalam kode di atas.
2. Gaya keren
1. JQuery.ShcircLeloader.js Component
Tak perlu dikatakan, komponen ini juga mudah digunakan, tetapi tidak didukung untuk versi di bawah IE10. Mari kita lihat efeknya terlebih dahulu:
Adapun penggunaan kode tertentu, blogger tidak bermaksud masuk ke dalamnya, sehingga Anda dapat mencari di Baidu atau GitHub.
2. Komponen Fakeloader.js
Lebih banyak opsi, efek perataan yang lebih baik, pengalaman yang lebih baik dengan ponsel dan perangkat tablet. Lihat saja gambar -gambarnya dan Anda akan tahu. Alamat sumber terbuka.
4. Plug-in Flowchart
Saya harus melakukan alur kerja beberapa waktu yang lalu dan saya perlu menunjukkan ke mana prosesnya saat ini. Saya menemukan plug-in proses YSTEP. Keuntungan dari komponen ini adalah mudah digunakan dan ringan.
1. Tampilan Efek
Mari kita lihat efeknya dulu
Versi berkurang biru
2. Deskripsi Kode Sumber
Alamat sumber terbuka.
3. Contoh Kode
Pertama, referensi file yang diperlukan
<tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <tautan href = "~/content/ystep-master/css/ystep.css" rel = "stylesheet"/> <script src = "~ ~ ~/jQuery-1.9.9 src = "~/content/bootstrap/js/bootstrap.js"> </script>
Komponen ini membutuhkan dukungan dari dua komponen: jQuery dan bootstrap.
Kemudian tentukan div kosong
<Div ID = "Div_ystep1"> </div>
Terakhir, inisialisasi komponen saat tombol diklik
<type script = "Text/JavaScript"> $ (function () {$ ("#btn_submit"). Klik (fungsi () {$ ("#Div_ystep1"). LoadStep ({// YSTEP NILAI LOP // Nilai Opsional: Kecil, Ukuran Besar: "Kecil",///YSTEP Warna // Nilai Opsional: Kecil, Kecil, "Kecil",///YSTEP Warna//Nilai Opsional: Kecil, kecil, "kecil", // YSTEP Color: [{// Judul Nama Langkah: "Mulai", // Konten Langkah (Ketika mouse bergerak ke simpul langkah ini, itu akan diminta) Konten: "Proses Mulai"}, {title: "Persetujuan", Konten: "Setiap Peran Mulai Persetujuan"}, {title: "Implementasi", Konten: "Persyaratan Mulai Implementasi"}, {Judul: " $ ("#Div_ystep1"). SetStep (3); </script>Jika itu adalah langkah dinamis, mungkin perlu untuk membangun atribut langkah secara dinamis. Kemudian gunakan setStep () untuk mengatur langkah mana yang telah Anda capai.
Metode Umum:
// Lewati ke langkah berikutnya $ (". YStep1"). NextStep (); // Lewati ke langkah sebelumnya $ (". YStep1"). PrevStep (); // ke langkah yang ditentukan $ (". Ystep1"). Setstep (2); // Dapatkan langkah $ ("saat ini").5. Tombol Prompt Komponen Bootstrap-Konfirmasi
Komponen Prompt tombol sedikit mirip dengan fungsi konfirmasi di JS, tetapi konfirmasi ini adalah efek pop-up tooltip, memberikan pengguna tekad dan penilaian pembatalan, dan antarmuka lebih ramah. Sebelum memperkenalkan komponen ini, pertama -tama Anda dapat melihat efek kotak prompt di bootstrap:
Komponen konfirmasi bootstrap diimplementasikan berdasarkan efek kotak prompt ini. Ada banyak komponen konfirmasi bootstrap di GitHub, tetapi pada dasarnya sama. .
1. Tampilan Efek
Efek paling asli
Judul Kustom, Teks Teks
2. Deskripsi Kode Sumber
Alamat sumber terbuka
3. Contoh Kode
(1) Kutipan file:
<tautan href = "~/content/bootstrap/css/bootstrap.css" rel = "stylesheet"/> <script src = "~/content/jQuery-1.9.1.js"> </script> <script src = "~/content/bootstrap/js/bootstrap.js"> </script = "~/content/bootstrap/js/js/bootstrap.js"> </script = ">
Gaya membutuhkan dukungan dari bootstrap.css. JavaScript membutuhkan dukungan dari jQuery dan bootstrap.js.
(2) Tag klik yang sesuai (dapat berupa tag apa pun)
<typon type = "tombol" id = "btn_submit1"> <span aria-hidden = "true"> </span> hapus </button>
(3) Inisialisasi JS
<type script = "text/javascript"> $ (function () {$ ('#btn_submit1'). Konfirmasi ({animasi: true, penempatan: "bawah", judul: "Apakah Anda yakin ingin menghapus?", Btnoklabel: 'OK', BTNCANCELLLAELLLABEL: 'Batal', OnCon. Oncancel: function () {// alert ("Diklik Batal"); </script>(4) lebih banyak atribut, peristiwa, metode
Selain sifat inisialisasi yang disebutkan di atas, ada beberapa sifat yang umum digunakan. Misalnya:
btnokclass: Tentukan gaya tombol; BTNCancelClass: Batalkan gaya tombol; Singleton: Apakah hanya satu kotak penentuan yang diizinkan; Popout: apakah akan menyembunyikan kotak penentuan saat pengguna mengklik di tempat lain;
Misalnya, Anda dapat mengatur btnokclass ke btnokclass: 'btn btn-sm btn-primary',
6. Klasifikasi Gambar dan Komponen Penyaringan Muxitup
Ini adalah komponen pengelompokan dan penyaringan dengan efek yang sangat keren, dan alamat sumber terbuka. Blogger melihat demo di internet dan berpikir itu sangat efektif. Tanpa basa -basi lagi, gambar di atas.
Bagaimana dengan itu, efeknya OK. Komponen ini tidak digunakan dalam proyek untuk saat ini, tetapi saya merasa ada kemungkinan membutuhkannya di masa depan, jadi saya mengumpulkannya. Kode implementasi disalin secara online. Saya belum mempelajarinya secara mendalam. Jika Anda tertarik, Anda bisa melihatnya. Kode HTML+JS diimplementasikan sebagai berikut:
<html> <head> <meta name = "viewport" content = "width = device-width"/> <title> mixItup </iteme> <tautan href = "~/content/image/css/normalize.css" rel = "stylesheet"/> <link href = "~ ~/contents/citss/capss. src="~/Content/jquery-1.9.1.js"></script> <script src="~/Content/mixitup-master/jquery.easing.min.js"></script> <script src="~/Content/mixitup-master/build/jquery.mixitup.min.js"></script> <script type="text/javascript"> $(function () { var filterList = { init: function () { debugger; // MixItUp plugin $('#portfoliolist').mixitup({ targetSelector: '.portfolio', filterSelector: '.filter', effects: ['fade'], easing: 'snap', // call the hover effect onMixEnd: filterList.hoverEffect() }); }, hoverEffect: function () { // Simple parallelax effect $('#portfoliolist .portfolio').hover( function () { $(this).find('.label').stop().animate({ bottom: 0 }, 200, 'easeOutQuad'); $(this).find('img').stop().animate({ top: -30 }, 500, 'easeOutQuad'); }, function () { $(this).find('.label').stop().animate({ bottom: -40 }, 200, 'easeInQuad'); $(this).find('img').stop().animate({ top: 0 }, 300, 'easeOutQuad'); } ); } }; // Run the show! filterList.init(); }); </script></head><body> <div> <ul id="filters"> <li><span data-filter="app card icon logo web">All categories</span></li> <li><span data-filter="app">Mobile application</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="card">Card</span></li> <li><span data-filter="icon">icon</span></li> <li><span data-filter="logo">Logo</span></li> <li><span data-filter="web">Web page</span></li> </ul> <div id="portfoliolilist"> <div data-cat="logo"> <div> <img src="~/Content/image/Logo/5.jpg" /> <div> <div> <a>Bird Document</a> <span>Logo</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/app/1.jpg" /> <div> <div> <a>Visual Infography</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="web"> <div> <img src="~/Content/image/web/4.jpg" /> <div> <a>Sonor's Design</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/1.jpg" /> <div> <div> <a>Typography Company</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/3.jpg" /> <div> <a>Weatherette</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/4.jpg" /> <div> <div> <a>BMF</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="card"> <div> <img src="~/Content/image/card/5.jpg" /> <div> <a>Techlion</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/1.jpg" /> <div> <div> <a>KittyPic</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div data-cat="app"> <div> <img src="~/Content/image/app/2.jpg" /> <div> <a>Graph Plotting</a> <span>APP</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/card/2.jpg" /> <div> <a>QR Quick Response</a> <span>Business card</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/6.jpg" /> <div> <div> <a>Mobi Sock</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <a>Village Community Church</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/4.jpg" /> <div> <div> <a>Domino's Pizza</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/3.jpg" /> <div> <a>Backend Admin</a> <span>Web design</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/1.jpg" /> <div> <div> <a>Instagram</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/web/2.jpg" /> <div> <a>Student Guide</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/2.jpg" /> <div> <div> <a>Scoccer</a> <span>Icon</span> </div> <div></div> </div> </div> </div> <div> <img src="~/Content/image/icon/5.jpg" /> <div> <a>3D Map</a> <span>Icon</span> </div> <div></div> </div> </div> <div> <img src="~/Content/image/web/1.jpg" /> <div> <div> <a>Note</a> <span>Web design</span> </div> <div></div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/3.jpg" /> <div> <a>Native Designers</a> <span>Logo</span> </div> <div></div> </div> </div> </div> <div> <div> <img src="~/Content/image/logo/4.jpg" /> <div> <a>Bookworm</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="icon"> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <div> <a>Sandwich</a> <span>Icon</span> </div> <div></div> </div> </div> </div> </div> <div> <img src="~/Content/image/icon/3.jpg" /> <div> <a>Reality</a> <span>Business card</span> </div> <div></div> </div> </div> </div> </div> <div data-cat="logo"> <div> <img src="~/Content/image/logo/2.jpg" /> <div> <div> <a>Specialisterne</a> <span>Logo</span> </div> <div></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div><!-- container --></body></html>muxitup7. Ringkasan
以上是博主最近收藏的一些前端组件，在此分享给大家，有实用型，也有炫酷型，不管如何，希望能帮助需要的园友节省寻找组件的时间。还有一些组件没有整理出来，待整理好后放到后面分享。如果你觉得本文对你有帮助，不妨推荐下。再次感谢园友们的支持，不管是物资奖励还是精神支持，都是对博主分享精神的肯定，博主一定继续努力。
The above is the relevant knowledge of the Bootstrap component series welfare chapter (recommended) that the editor introduced to you. Saya harap ini akan membantu Anda. If you have any questions, please leave me a message and the editor will reply you in time. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!