Framework7 - Panduan Cepat
Framework7 adalah kerangka kerja sumber terbuka dan gratis untuk HTML seluler. Ini digunakan untuk mengembangkan aplikasi seluler hibrida atau aplikasi web untuk perangkat iOS dan Android.
Framework7 diperkenalkan pada tahun 2014. Versi terbaru 1.4.2 dirilis pada Februari 2016 dengan lisensi di bawah MIT.
Mengapa Menggunakan Framework7?
- Lebih mudah mengembangkan aplikasi untuk iOS dan Android.
- Kurva pembelajaran untuk Framework7 sangat mudah.
- Ini memiliki banyak widget / komponen pra-gaya.
- Ini memiliki perpustakaan pembantu built-in.
fitur
Framework7 adalah open source dan framework gratis untuk digunakan.
Framework7 memiliki sintaks jQuery yang mudah dan familiar untuk memulai tanpa penundaan.
Untuk mengontrol penundaan klik untuk UI sentuh, Framework7 memiliki pustaka FastClick bawaan .
Framework7 memiliki tata letak sistem grid bawaan untuk mengatur elemen Anda secara responsif.
Framework7 secara dinamis memuat halaman dari template melalui api router fleksibel .
Keuntungan
Framework7 tidak bergantung pada pustaka pihak ketiga mana pun bahkan untuk manipulasi DOM. Sebaliknya, ia memiliki DOM7 khusus sendiri.
Framework7 juga dapat digunakan dengan framework Angular dan React .
Anda dapat mulai membuat aplikasi setelah mengetahui HTML, CSS, dan beberapa JavaScript dasar.
Ini mendukung pengembangan yang lebih cepat melalui Bower .
Mudah untuk mengembangkan aplikasi untuk iOS dan Android tanpa mempelajarinya.
Kekurangan
Framework7 hanya mendukung platform seperti iOS dan Android.
Dukungan komunitas online untuk kerangka Framework7 lebih sedikit dibandingkan dengan iOS dan Android.
Pada bab ini, kita akan membahas tentang cara menginstal dan mengatur Framework7.
Anda dapat mengunduh Framework7 dengan dua cara -
Unduh dari repositori Framework7 Github
Anda dapat menginstal Framework7, menggunakan Bower seperti yang ditunjukkan di bawah ini -
bower install framework7Setelah berhasil menginstal Framework7, Anda harus mengikuti langkah-langkah yang diberikan di bawah ini untuk menggunakan Framework7 di aplikasi Anda -
Step 1 - Anda perlu menginstal gulp-cli untuk membangun versi pengembangan dan dist dari Framework7 dengan menggunakan perintah berikut.
npm install gulp-cliThe cli singkatan Command Line Utility untuk Gulp.
Step 2 - Gulp harus diinstal secara global dengan menggunakan perintah berikut.
npm install --global gulpStep 3- Selanjutnya, instal manajer paket NodeJS, yang menginstal program node yang memudahkan untuk menentukan dan menautkan dependensi. Perintah berikut digunakan untuk menginstal npm.
npm installStep 4 - Versi pengembangan Framework7 dapat dibangun dengan menggunakan perintah berikut.
npm buildStep 5- Setelah Anda membangun versi pengembangan Framework7, mulailah membangun aplikasi dari folder dist / dengan menggunakan perintah berikut.
npm distStep 6 - Simpan folder aplikasi Anda di server dan jalankan perintah berikut untuk navigasi antar halaman aplikasi Anda.
gulp serverUnduh Framework7 Library dari CDN
CDN atau Jaringan Pengiriman Konten adalah jaringan server yang dirancang untuk menyajikan file kepada pengguna. Jika Anda menggunakan tautan CDN di halaman web Anda, ini memindahkan tanggung jawab hosting file dari server Anda sendiri ke serangkaian server eksternal. Ini juga menawarkan keuntungan bahwa jika pengunjung halaman web Anda telah mengunduh salinan Framework7 dari CDN yang sama, itu tidak perlu diunduh ulang. Anda dapat menyertakan file CDN berikut ke dalam dokumen HTML.
CDN berikut digunakan dalam file iOS App layout -
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />Ini digunakan untuk menyertakan Framework7 iOS CSS Library ke aplikasi Anda.
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />Ini digunakan untuk menyertakan gaya warna terkait Framework7 iOS ke aplikasi Anda.
CDN berikut digunakan di Android/Material App Layout -
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>Ini digunakan untuk menyertakan pustaka JS Framework7 ke aplikasi Anda.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>Ini digunakan untuk menyertakan penataan Material Framework7 ke aplikasi Anda.
Kami menggunakan versi CDN pustaka sepanjang tutorial ini. Kami menggunakan AMPPS (AMPPS adalah tumpukan WAMP, MAMP, dan LAMP dari server Apache, MySQL, MongoDB, PHP, Perl & Python) untuk menjalankan semua contoh kami.
Contoh
Contoh berikut mendemonstrasikan penggunaan aplikasi sederhana di Framework7, yang akan menampilkan kotak peringatan dengan pesan yang disesuaikan saat Anda mengklik bilah navigasi.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
//you can control the background color of the Status bar
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<div class = "list-block">
<ul>
<li>
<a href = "envirmnt_about.html" class = "">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">Blog</div>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
//use the 'pageInit' event handler for all pages
$$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
if (page.name === 'blog') {
// you will get below message in alert box when page with data-page attribute is equal to "about"
myApp.alert('Here its your About page');
}
})
</script>
</body>
</html>Selanjutnya, buat satu halaman HTML lagi yaitu envirmnt_about.html seperti yang ditunjukkan di bawah ini -
envirmnt_about.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left">
<a href = "#" class = "back link">
<i class = "icon icon-back"></i>
<span>Back</span>
</a>
</div>
<div class = "center sliding">My Blog</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel">
<i class = "icon icon-bars"></i>
</a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "blog" class = "page">
<div class = "page-content">
<div class = "content-block">
<h2>My Blog</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML di atas sebagai framework7_environment.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/framework7_environment.html dan output ditampilkan seperti yang ditunjukkan di bawah ini.
Ketika Anda mengklik bilah navigasi, itu akan menampilkan kotak peringatan dengan pesan yang disesuaikan.
Deskripsi
Framework7 menyediakan berbagai jenis tata letak untuk aplikasi Anda. Ini mendukung tiga jenis tata letak Navbar / Toolbar -
| S.No | Jenis & Deskripsi Tata Letak |
|---|---|
| 1 | Tata Letak Statis Tata letak statis paling sering digunakan jenis tata letak dan menyertakan bilah navigasi dan bilah alat, yang bisa menjadi konten laman yang dapat digulir dan setiap laman berisi bilah navigasi dan bilah alatnya sendiri. |
| 2 | Tata Letak Tetap Tata letak tetap menyertakan bilah navigasi dan bilah alatnya sendiri, yang dapat terlihat di layar dan tidak dapat digulir di halaman. |
| 3 | Melalui Tata Letak Dalam tata letak ini, navbar dan toolbar tampak tetap untuk semua halaman dalam tampilan tunggal. |
| 4 | Tata Letak Campuran Anda dapat mencampur berbagai jenis tata letak dalam satu tampilan. |
Tidak ada Navbar / Toolbar
Jika Anda tidak ingin menggunakan navbar dan toolbar, jangan sertakan kelas yang sesuai ( navbar-fixed , navbar-through , toolbar-fixed , toolbar-through ) ke halaman / halaman / tampilan.
Deskripsi
Pada bab ini, mari kita pelajari tentang navbar . Ini biasanya ditempatkan di atas layar yang berisi judul halaman dan elemen navigasi.
Navbar terdiri dari tiga bagian yang masing-masing berisi konten HTML apa pun, tetapi Anda disarankan untuk menggunakannya dengan cara berikut -
Left- Ini dirancang untuk menempatkan ikon tautan balik atau tautan teks tunggal.
Center - Digunakan untuk menampilkan judul halaman atau tautan tab.
Right- Bagian ini mirip dengan bagian kiri .
Tabel berikut menunjukkan penggunaan navbar secara detail -
| S.No | Jenis & Deskripsi Navbar |
|---|---|
| 1 | Navbar dasar Navbar dasar dapat dibuat dengan menggunakan kelas navbar , navbar-inner , left , center dan right . |
| 2 | Navbar dengan tautan Untuk menggunakan tautan di bagian kiri dan kanan bilah navigasi Anda, cukup tambahkan tag <a> dengan tautan kelas . |
| 3 | Banyak tautan Untuk menggunakan banyak tautan, cukup tambahkan beberapa <a class = "link"> lagi ke bagian pilihan Anda. |
| 4 | Tautan dengan teks dan ikon Tautan dapat dilengkapi dengan ikon dan teks dengan menambahkan kelas untuk ikon dan membungkus teks tautan dengan elemen <span> . |
| 5 | Tautan dengan ikon saja Tautan navbar hanya dapat diberikan dengan ikon dengan menambahkan kelas khusus ikon ke tautan. |
| 6 | Aplikasi terkait dan metode tampilan Saat menginisialisasi View , framework7 memungkinkan Anda menggunakan metode yang tersedia untuk navbar. |
| 7 | Sembunyikan bilah navigasi secara otomatis Navbar dapat disembunyikan / ditampilkan secara otomatis untuk beberapa halaman yang dimuat Ajax di mana navbar tidak diperlukan. |
Deskripsi
Toolbar memberikan akses mudah ke halaman lain dengan menggunakan elemen navigasi di bagian bawah layar.
Anda dapat menggunakan toolbar dengan dua cara seperti yang ditentukan dalam tabel -
| S.No | Jenis & Deskripsi Toolbar |
|---|---|
| 1 | Sembunyikan Toolbar Anda dapat menyembunyikan toolbar secara otomatis saat Anda memuat halaman dengan menggunakan no-toolbar kelas ke halaman yang dimuat. |
| 2 | Toolbar Bawah Tempatkan toolbar di bagian bawah halaman dengan menggunakan toolbar-bottom kelas. |
Metode Toolbar
Metode yang tersedia berikut ini dapat digunakan dengan Toolbars -
| S.No | Metode & Deskripsi Toolbar |
|---|---|
| 1 | myApp.hideToolbar(toolbar) Ini menyembunyikan toolbar yang ditentukan. |
| 2 | myApp.showToolbar(toolbar) Ini menunjukkan toolbar yang ditentukan. |
| 3 | view.hideToolbar() Ini menyembunyikan toolbar yang ditentukan dalam tampilan. |
| 4 | view.showToolbar() Ini menunjukkan toolbar yang ditentukan dalam tampilan. |
Contoh
Contoh berikut menunjukkan penggunaan tata letak toolbar di Framework7.
Pertama, kita akan membuat satu halaman HTML bernama toolbar.html seperti yang ditunjukkan di bawah ini -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Toolbar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Toolbar Layout</div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "index" class = "page with-subnavbar">
<div class = "page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean
sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur.
Sed posuere a orci id imperdiet.</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">Link 1</a>
<a href = "#" class = "link">Link 2</a>
<a href = "#" class = "link">Link 3</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view
dynamicNavbar: true
});
</script>
</body>
</html>Sekarang, inisialisasi aplikasi dan tampilan Anda di file JS kustom toolbar.js.
Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai toolbar.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/toolbar.html dan hasilnya ditampilkan seperti di bawah ini.
Deskripsi
Framework 7 memungkinkan pencarian elemen dengan menggunakan kelas searchbar .
Parameter Bilah Pencarian
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | searchList Ini mencari pemilih CSS atau elemen HTML dari daftar. |
string atau Elemen HTML | - |
| 2 | searchIn Anda dapat mencari elemen tampilan daftar pemilih CSS, juga mencari elemen dengan meneruskan kelas .item-title , .item-text . |
tali | '.nama barang' |
| 3 | found Ini mencari pemilih CSS atau elemen HTML menggunakan elemen "ditemukan". Lebih lanjut, ia menggunakan elemen .searchbar-found jika tidak ada elemen yang ditentukan. |
string atau Elemen HTML | - |
| 4 | notfound Ini mencari pemilih CSS atau elemen HTML menggunakan elemen "tidak ditemukan". Lebih lanjut, ini menggunakan elemen .searchbar-not-found jika tidak ada elemen yang ditentukan. |
string atau Elemen HTML | - |
| 5 | overlay Ini menelusuri pemilih CSS atau elemen HTML menggunakan elemen "hamparan bilah pencarian " dan menggunakan elemen .searchbar-overlay , jika tidak ada elemen yang ditentukan. |
string atau Elemen HTML | - |
| 6 | ignore Anda dapat mengabaikan pemilih CSS untuk item dengan menggunakan bilah pencarian. |
tali | '.searchbar-ignore' |
| 7 | customSearch Ketika diaktifkan, bilah pencarian tidak akan mencari melalui blok daftar mana pun yang ditentukan oleh searchList dan Anda akan diizinkan untuk menggunakan fungsionalitas pencarian kustom. |
boolean | Salah |
| 8 | removeDiacritics Saat mencari elemen, hapus diakritik dengan mengaktifkan parameter ini. |
boolean | Salah |
| 9 | hideDividers Parameter ini akan menyembunyikan pemisah item dan judul grup, jika tidak ada item. |
boolean | benar |
| 10 | hideGroups Parameter ini akan menyembunyikan grup, jika tidak ada item yang ditemukan dalam grup tampilan daftar. |
boolean | benar |
Callback Bar Pencarian
| S.No | Callback & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | onSearch Metode ini akan mengaktifkan fungsi panggilan balik saat melakukan pencarian. |
fungsi | - |
| 2 | onEnable Metode ini akan mengaktifkan fungsi panggilan balik saat Bilah Pencarian menjadi aktif. |
fungsi | - |
| 3 | onDisable Metode ini akan mengaktifkan fungsi panggilan balik saat Bilah Pencarian menjadi tidak aktif. |
fungsi | - |
| 4 | onClear Metode ini akan mengaktifkan fungsi panggilan balik saat Anda mengklik elemen "hapus". |
fungsi | - |
Properti Bilah Pencarian
| S.No | Properti & Deskripsi |
|---|---|
| 1 | mySearchbar.params Merupakan parameter yang diinisialisasi yang diteruskan dengan objek. |
| 2 | mySearchbar.query Menelusuri kueri saat ini. |
| 3 | mySearchbar.searchList Mendefinisikan blok daftar pencarian. |
| 4 | mySearchbar.container Mendefinisikan wadah bilah pencarian dengan elemen HTML. |
| 5 | mySearchbar.input Mendefinisikan input bilah pencarian dengan elemen HTML. |
| 6 | mySearchbar.active Ini menentukan apakah bilah pencarian diaktifkan atau dinonaktifkan. |
Metode Bilah Pencarian
| S.No | Metode & Deskripsi |
|---|---|
| 1 | mySearchbar.search(query); Metode ini mencari kueri yang lewat. |
| 2 | mySearchbar.enable(); Ini memungkinkan bilah pencarian. |
| 3 | mySearchbar.disable(); Ini menonaktifkan bilah pencarian. |
| 4 | mySearchbar.clear(); Anda dapat menghapus kueri dan hasil pencarian. |
| 5 | mySearchbar.destroy(); Ini menghancurkan contoh bilah pencarian. |
Peristiwa JavaScript Bilah Pencarian
| S.No | Deskripsi acara | Target |
|---|---|---|
| 1 | search Anda dapat mengaktifkan acara ini saat mencari elemen. |
<div class = "list-block"> |
| 2 | clearSearch Peristiwa ini akan dijalankan ketika pengguna mengklik elemen clearSearch. |
<div class = "list-block"> |
| 3 | enableSearch Saat Bilah Pencarian diaktifkan, acara ini akan diaktifkan. |
<div class = "list-block"> |
| 4 | disableSearch Saat Search Bar dinonaktifkan, dan pengguna mengklik tombol batal, atau elemen "search bar-overlay", peristiwa ini akan diaktifkan. |
<div class = "list-block"> |
Contoh
Contoh berikut menunjukkan penggunaan bilah pencarian pada gulir di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Search Bar Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages navbar-fixed">
<div data-page = "home" class = "page">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Search Bar Layout</div>
</div>
</div>
<form data-search-list = ".list-block-search" data-search-in = ".item-title"
class = "searchbar searchbar-init">
<div class = "searchbar-input">
<input type = "search" placeholder = "Search"><a href = "#"
class = "searchbar-clear"></a>
</div>
<a href = "#" class = "searchbar-cancel">Cancel</a>
</form>
<div class = "searchbar-overlay"></div>
<div class = "page-content">
<div class = "content-block searchbar-not-found">
<div class = "content-block-inner">No element found...</div>
</div>
<div class = "list-block list-block-search searchbar-found">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">India</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Argentina</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Belgium</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Brazil</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Canada</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Colombia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Denmark</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ecuador</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">France</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Germany</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Greece</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Haiti</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Hong Kong</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Iceland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Ireland</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Jamaica</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Japan</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kenya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Kuwait</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Libya</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Liberia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Malaysia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mauritius</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Mexico</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Namibia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">New Zealand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Oman</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Paraguay</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Philippines</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Russia</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Singapore</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">South Africa</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Thailand</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">United Kingdom</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Vatican City</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Zimbabwe</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas search_bar.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/search_bar.html dan hasilnya ditampilkan seperti di bawah ini.
Jika elemen yang terdapat dalam daftar dimasukkan di bilah pencarian, ini akan menampilkan elemen tertentu dari daftar.
Jika elemen selain elemen yang terdapat dalam daftar dimasukkan, ini akan menampilkan tidak ada elemen yang ditemukan.
Deskripsi
IOS 7+ memungkinkan Anda membuat aplikasi layar penuh yang dapat menimbulkan masalah saat bilah status tumpang tindih dengan aplikasi Anda. Framework7 memecahkan masalah ini dengan mendeteksi apakah aplikasi Anda dalam mode layar penuh atau tidak. Jika aplikasi Anda dalam mode layar penuh, Framework7 secara otomatis akan menambahkan kelas dengan-statusbar-overlay ke <html> (atau menghapus jika aplikasi tidak dalam mode layar penuh) dan Anda perlu menambahkan kelas statusbar-overlay di <body> seperti yang ditunjukkan pada kode berikut -
<html class = "with-statusbar-overlay">
...
<body>
<div class = "statusbar-overlay"></div>
...Secara default, <div> akan selalu disembunyikan dan diperbaiki di atas layar Anda. Ini hanya akan terlihat ketika aplikasi dalam mode layar penuh dan kelas dengan-statusbar-overlay ditambahkan ke <html> .
Contoh
Contoh berikut menunjukkan penggunaan bilah status di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>My App</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "statusbar-overlay"></div>
<div class = "panel-overlay"></div>
<div class = "panel panel-right panel-reveal">
<div class = "content-block">
<p>Contents goes here...</p>
</div>
</div>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">My App</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<p>This is simple application...</p>
<p>page contents goes here!!!</p>
</div>
</div>
</div>
<div class = "toolbar">
<div class = "toolbar-inner">
<a href = "#" class = "link">First Link</a>
<a href = "#" class = "link">Second Link</a>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7; // Add the view var mainView = myApp.addView('.view-main', { // enable the dynamic navbar for this view: dynamicNavbar: true }); //use the 'pageInit' event handler for all pages $$(document).on('pageInit', function (e) {
//get page data from event data
var page = e.detail.page;
})
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode html yang diberikan di atas sebagai status_bar.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/status_bar.html dan hasilnya ditampilkan seperti di bawah ini.
Contoh menunjukkan penggunaan file statusbar-overlay, yang memungkinkan Anda membuat aplikasi layar penuh saat bilah status tumpang tindih dengan aplikasi.
Deskripsi
The panel samping bergerak ke sisi kiri atau kanan layar untuk menampilkan konten. Framework7 memungkinkan Anda menyertakan hingga 2 panel (panel sisi kanan dan panel sisi kiri) ke aplikasi Anda. Anda perlu menambahkan panel di awal <body> dan kemudian memilih efek pembukaan dengan menerapkan kelas yang terdaftar berikut -
panel-reveal - Ini akan membuat seluruh konten aplikasi keluar.
panel-cover - Ini akan membuat panel menjadi overlay pada konten aplikasi.
Misalnya, kode berikut menunjukkan cara menggunakan kelas di atas -
<body>
<!-- First add Panel's overlay which will overlays app while panel is opened -->
<div class = "panel-overlay"></div>
<!-- Left panel -->
<div class = "panel panel-left panel-cover">
panel's content
</div>
<!-- Right panel -->
<div class = "panel panel-right panel-reveal">
panel's content
</div>
</body>Tabel berikut menunjukkan jenis panel yang didukung oleh Framework77 -
| S.No | Jenis & Deskripsi |
|---|---|
| 1 | Buka dan Tutup Panel Setelah Anda menambahkan panel dan efek, kami perlu menambahkan fungsionalitas untuk membuka dan menutup panel. |
| 2 | Acara Panel Untuk mendeteksi bagaimana pengguna berinteraksi dengan panel, Anda dapat menggunakan peristiwa panel. |
| 3 | Buka Panel Dengan Gesek Framework7 memberi Anda fitur untuk membuka panel dengan gerakan menggesek . |
| 4 | Panel Dibuka? Kita bisa menentukan apakah panel dibuka atau tidak dengan menggunakan with-panel[position]-[effect] aturan. |
Deskripsi
Blok konten dapat digunakan untuk menambahkan konten ekstra dengan format berbeda.
Contoh
Contoh berikut menunjukkan penggunaan blok konten di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Content Block</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Content Block</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<p>This is out side of content block!!!</p>
<div class = "content-block">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis
et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class = "content-block">
<div class = "content-block-inner">This is another text block wrapped with "content-block-inner"</div>
</div>
<div class = "content-block-title">Content Block Title</div>
<div class = "content-block">
<p>Praesent nec imperdiet diam. Maecenas vel lectus porttitor, consectetur
magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales.
Integer blandit varius nisi quis consectetur.</p>
</div>
<div class = "content-block-title">This is another long content block title</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
<div class = "content-block-title">Content Block Inset</div>
<div class = "content-block inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
<div class = "content-block-title">Content Block Tablet Inset</div>
<div class = "content-block tablet-inset">
<div class = "content-block-inner">
<p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis,
vulputate turpis vel, sagittis felis. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai content_block.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/content_block.html dan hasilnya ditampilkan seperti di bawah ini.
Kode menambahkan pemformatan ekstra dan spasi yang diperlukan untuk konten teks.
Deskripsi
Framework7 menyediakan berbagai jenis tipe kisi untuk menempatkan konten sesuai kebutuhan pengguna.
Kisi tata letak menyediakan berbagai tipe ukuran kolom seperti yang dijelaskan dalam tabel berikut -
| S.No | Kelas | Kelas Meja | Lebar |
|---|---|---|---|
| 1 | col-5 | tablet-5 | 5% |
| 2 | col-10 | tablet-10 | 10% |
| 3 | col-15 | tablet-15 | 15% |
| 4 | col-20 | tablet-20 | 20% |
| 5 | col-25 | tablet-25 | 25% |
| 6 | col-30 | tablet-30 | 30% |
| 7 | col-33 | tablet-33 | 33,3% |
| 8 | col-35 | tablet-35 | 35% |
| 9 | col-40 | tablet-40 | 40% |
| 10 | col-45 | tablet-45 | 45% |
| 11 | col-50 | tablet-50 | 50% |
| 12 | col-55 | tablet-55 | 55% |
| 13 | col-60 | tablet-60 | 60% |
| 14 | col-65 | tablet-65 | 65% |
| 15 | col-66 | tablet-66 | 66,6% |
| 16 | col-70 | tablet-70 | 70% |
| 17 | col-75 | tablet-75 | 75% |
| 18 | col-80 | tablet-80 | 80% |
| 19 | col-85 | tablet-85 | 85% |
| 20 | col-90 | tablet-90 | 90% |
| 21 | col-95 | tablet-95 | 95% |
| 21 | col-100 | tablet-100 | 100% |
| 22 | col-auto | tablet-auto | Lebar yang sama |
Contoh
Contoh berikut menyediakan tata letak kisi untuk menempatkan konten Anda seperti yang Anda butuhkan di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Layout Grid</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<style>
div[class* = "col-"] {
background: #fff;
text-align: center;
color: #000;
border: 1px solid #D8D8D8;
}
.row {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Layout Grid</div>
</div>
</div>
<div class = "pages">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block-title">Columns with gutter</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
<div class = "content-block-title">Columns without gutter</div>
<div class = "content-block">
<div class = "row no-gutter">
<div class = "col-50">col 1</div>
<div class = "col-50">col 2</div>
</div>
<div class = "row no-gutter">
<div class = "col-25">col 1</div>
<div class = "col-25">col 2</div>
<div class = "col-25">col 3</div>
<div class = "col-25">col 4</div>
</div>
<div class = "row no-gutter">
<div class = "col-33">col 1</div>
<div class = "col-33">col 2</div>
<div class = "col-33">col 3</div>
</div>
</div>
<div class = "content-block-title">Nested Columns</div>
<div class = "content-block">
<div class = "row">
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-40">col 2</div>
<div class = "col-60">col 3</div>
</div>
</div>
<div class = "col-50">
col 1
<div class = "row">
<div class = "col-75">col 2</div>
<div class = "col-25">col 3</div>
</div>
</div>
</div>
</div>
<div class = "content-block-title">Columns With Different Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-100 tablet-50">col 1</div>
<div class = "col-100 tablet-50">col 2</div>
</div>
<div class = "row">
<div class = "col-50 tablet-25">col 1</div>
<div class = "col-50 tablet-25">col 2</div>
<div class = "col-50 tablet-25">col 3</div>
<div class = "col-50 tablet-25">col 4</div>
</div>
<div class = "row">
<div class = "col-100 tablet-40">col 1</div>
<div class = "col-50 tablet-60">col 2</div>
<div class = "col-50 tablet-60">col 3</div>
<div class = "col-100 tablet-40">col 4</div>
</div>
</div>
<div class = "content-block-title">Columns With Equal Width</div>
<div class = "content-block">
<div class = "row">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
<div class = "row no-gutter">
<div class = "col-auto">col-1</div>
<div class = "col-auto">col-2</div>
<div class = "col-auto">col-3</div>
<div class = "col-auto">col-4</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main');
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai layout_grid.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/layout_grid.html output ditampilkan seperti di bawah ini.
Kode ini menyediakan tipe grid yang berbeda untuk menempatkan konten sesuai kebutuhan pengguna.
Deskripsi
Framework7 menyediakan berbagai jenis overlay untuk bekerja dengan aplikasi dengan lancar. Tabel berikut mencantumkan beberapa overlay Framework7 -
| S.No | Jenis & Deskripsi Overlay |
|---|---|
| 1 | Modal Modal adalah jendela kecil yang menampilkan konten dari sumber terpisah tanpa meninggalkan jendela induk. |
| 2 | Muncul Popup adalah kotak popup yang menampilkan konten ketika pengguna mengklik elemen tersebut. |
| 3 | Popover Untuk mengelola penyajian konten sementara, komponen popover dapat digunakan. |
| 4 | Lembar Tindakan The Lembar Tindakan digunakan untuk menyajikan pengguna dengan satu set kemungkinan bagaimana menangani tugas yang diberikan. |
| 5 | Layar login Layar login overlay digunakan untuk menampilkan format layar login yang dapat digunakan di halaman atau popup atau sebagai overlay mandiri. |
| 6 | Modal Pemetik Modal alat pilih digunakan untuk memilih beberapa konten khusus yang mirip dengan alat pilih kalender. |
Deskripsi
Preloader di Framework7 dibuat dengan Scalable Vector Graphic (SVG) dan dianimasikan dengan CSS, yang membuatnya mudah diubah ukurannya. Preloader tersedia dalam dua warna -
- defaultnya adalah latar belakang terang
- satu lagi berlatar belakang gelap
Anda dapat menggunakan kelas prapemuat di HTML Anda seperti yang ditunjukkan di bawah ini -
Contoh
Contoh berikut menunjukkan penggunaan preloader di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Panel Events</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Framework7 Preloader</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block row">
<div class = "col-25"><span class = "preloader"></span><br>Default Preloader</div>
<div class = "col-25 col-dark"><span class = "preloader preloader-white"></span><br>White Preloader</div>
<div class = "col-25"><span style = "width:42px; height:42px" class = "preloader"></span><br>Big Preloader</div>
<div class = "col-25 col-dark"><span style = "width:42px; height:42px" class = "preloader preloader-white"></span><br>White Preloader</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.col-25{padding:5px;text-align:center;}.col-dark{background:#222;}</style>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai preloader.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/preloader.html dan hasilnya ditampilkan seperti di bawah ini.
Kode ini menampilkan indikator prapemuat, yang dibuat dengan SVG dan dianimasikan dengan CSS.
Deskripsi
Bilah kemajuan dapat digunakan untuk menunjukkan pemuatan aset atau kemajuan tugas kepada pengguna. Anda dapat menentukan bilah kemajuan dengan menggunakan kelas bilah kemajuan . Ketika pengguna tidak tahu berapa lama proses pemuatan akan ada untuk permintaan tersebut, Anda dapat menggunakan kelas progressbar-infinite .
API JavaScript Bilah Kemajuan
Bilah kemajuan dapat digunakan bersama dengan JavaScript API untuk menentukan properti tampilkan , sembunyikan , dan kemajuan dengan menggunakan metode berikut -
| S.No | Metode | Deskripsi & Parameter |
|---|---|---|
| 1 | myApp.setProgressbar (container , progress, speed) | Ini mengatur bilah kemajuan untuk kemajuan tugas.
|
| 2 | myApp.hideProgressbar (contain er) | Ini menyembunyikan bilah kemajuan.
|
| 3 | myApp.showProgressbar (contai ner, progress, color) | Ini menampilkan bilah kemajuan.
|
Contoh
Contoh berikut menampilkan bilah kemajuan determinate dan indeterminate animasi untuk menunjukkan aktivitas di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Progress Bar</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Progress Bar</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Determinate Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline determinate progress bar:</p>
<div class = "progressbar-inline">
<p><span data-progress = "10" class = "progressbar"></span></p>
<p class = "buttons-row">
<a href = "#" data-progress = "25" class = "button button-raised">25%</a>
<a href = "#" data-progress = "50" class = "button button-raised">50%</a>
<a href = "#" data-progress = "75" class = "button button-raised">75%</a>
<a href = "#" data-progress = "100" class = "button button-raised">100%</a>
</p>
</div>
<p>Loads and hides the determinate progress bar:</p>
<div class = "progressbar-load-hide">
<p><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
<p>Displays the determinate progress bar on top:</p>
<p class = "progressbar-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Infinite Progress Bar</div>
<div class = "content-block">
<div class = "content-block-inner">
<p>Inline infinite progress bar:</p>
<p><span class = "progressbar-infinite"></span></p>
<p>Displays the infinite progress bar in multiple colors:</p>
<p><span class = "progressbar-infinite color-multi"></span></p>
<p>Displays the infinite progress bar on top:</p>
<p class = "progressbar-infinite-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
<p>Displays the infinite progress bar in multiple colors on top:</p>
<p class = "progressbar-infinite-multi-overlay"><a href = "#" class = "button button-raised">Start Loading</a></p>
</div>
</div>
<div class = "content-block-title">Different types of colored progress bars:</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "5" class = "progressbar color-red"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "10" class = "progressbar color-pink"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "20" class = "progressbar color-deeppurple"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "30" class = "progressbar color-blue"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "40" class = "progressbar color-cyan"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "50" class = "progressbar color-green"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "60" class = "progressbar color-lime"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "70" class = "progressbar color-amber"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "80" class = "progressbar color-deeporange"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "90" class = "progressbar color-gray"></div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div data-progress = "100" class = "progressbar color-black"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7({
material: true
});
var $$ = Dom7; $$('.progressbar-inline .button').on('click', function () {
var progress = $$(this).attr('data-progress'); var progressbar = $$('.progressbar-inline .progressbar');
myApp.setProgressbar(progressbar, progress);
});
$$('.progressbar-load-hide .button').on('click', function () { var container = $$('.progressbar-load-hide p:first-child');
//it doesn't load if another progresbar is loading
if (container.children('.progressbar').length) return;
myApp.showProgressbar(container, 0);
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-overlay .button').on('click', function () { var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 0, 'orange');
var progress = 0;
function simulateLoading() {
setTimeout(function () {
var progressBefore = progress;
progress += Math.random() * 20;
myApp.setProgressbar(container, progress);
if (progressBefore < 100) {
simulateLoading();
}
//hides the progressbar
else myApp.hideProgressbar(container);
}, Math.random() * 200 + 200);
}
simulateLoading();
});
$$('.progressbar-infinite-overlay .button').on('click', function () { var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'yellow');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
$$('.progressbar-infinite-multi-overlay .button').on('click', function () { var container = $$('body');
if (container.children('.progressbar, .progressbar-infinite').length) return;
myApp.showProgressbar(container, 'multi');
setTimeout(function () {
myApp.hideProgressbar();
}, 3000);
});
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai progress_bar.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/progress_bar.html dan hasilnya ditampilkan seperti di bawah ini.
Contoh ini menampilkan bilah kemajuan, yang menunjukkan berapa lama waktu yang dibutuhkan sebuah operasi untuk menyelesaikan proses dan menampilkan berbagai jenis bilah kemajuan untuk menunjukkan aktivitas.
Deskripsi
Tampilan daftar adalah komponen UI yang kuat yang menyajikan data dalam daftar beberapa baris yang dapat digulir. Framework7 menyediakan berbagai jenis Tampilan Daftar untuk bekerja dengan aplikasi Anda. Tabel berikut mencantumkan beberapa tampilan daftar Framework7 -
| S.No | Jenis & Deskripsi |
|---|---|
| 1 | Tampilan Daftar Tampilan daftar adalah komponen antarmuka pengguna yang kuat, yang menyajikan data dalam daftar yang dapat digulir yang berisi beberapa baris. |
| 2 | Daftar Kontak Daftar kontak adalah jenis tampilan daftar, yang dapat digunakan untuk menampilkan daftar kontak orang. |
| 3 | Tampilan Daftar Media Tampilan daftar Media digunakan untuk menampilkan struktur data yang rumit seperti produk, layanan, informasi pengguna. |
| 4 | Geser ke luar The swipeout memungkinkan Anda untuk mengungkapkan tindakan menu tersembunyi dengan menggesekkan atas elemen daftar. |
| 5 | Daftar Sortable Daftar yang dapat diurutkan adalah tipe tampilan daftar, yang mengurutkan elemen tampilan daftar. |
| 6 | Daftar Virtual Daftar virtual jenis tampilan daftar, yang menyertakan daftar elemen data dalam jumlah besar tanpa menurunkan performanya. |
Deskripsi
Akordeon adalah elemen kontrol grafis yang ditampilkan sebagai daftar item yang ditumpuk. Setiap akordeon dapat diperluas atau diregangkan untuk menampilkan konten yang terkait dengan akordeon tersebut.
Tata Letak yang Dapat Diciutkan
Saat Anda menggunakan satu elemen terpisah yang dapat diciutkan, Anda perlu menghilangkan elemen pembungkus daftar akordeon .
Berikut ini adalah struktur tata letak yang dapat dilipat -
<!-- Single collapsible element ------>
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>
<!-- Separate collapsible element -->
<div class = "accordion-item">
<div class = "accordion-item-toggle"></div>
<div class = "accordion-item-content"></div>
</div>Kelas berikut digunakan untuk akordeon di Framework7 -
| S.No | Kelas & Deskripsi |
|---|---|
| 1 | accordion-list Ini adalah kelas opsional, yang berisi sekelompok daftar item akordeon. |
| 2 | accordion-item Ini adalah kelas wajib untuk item akordeon tunggal. |
| 3 | accordion-item-toggle Ini adalah kelas wajib yang digunakan untuk memperluas konten item akordeon. |
| 4 | accordion-item-content Ini adalah kelas wajib yang digunakan untuk konten item akordeon tersembunyi. |
| 5 | accordion-item-expanded Ini adalah item akordeon yang diperluas. |
API JavaScript Akordeon
Metode JavaScript API digunakan untuk membuka dan menutup akordeon secara terprogram.
Ini berisi metode API JavaScript berikut -
myApp.accordionOpen(item) - Digunakan untuk membuka akordeon.
myApp.accordionClose(item) - Digunakan untuk menutup akordeon.
myApp.accordionToggle(item) - Digunakan untuk mengganti akordeon.
Semua metode berisi parameter yang disebut item yang HTML atau elemen string dari item-akordeon.
Acara Akordeon
Accordion berisi empat peristiwa seperti yang tercantum dalam tabel berikut -
| S.No | Peristiwa | Target & Deskripsi |
|---|---|---|
| 1 | Buka | Accordion item Saat Anda membuka animasi, acara ini akan dipecat. |
| 2 | dibuka | Accordion item Saat pembukaan animasi selesai, acara ini akan dipecat. |
| 3 | Menutup | Accordion item Saat Anda menutup animasi, acara ini akan dipecat. |
| 4 | Tutup | Accordion item Saat penutupan animasi selesai, acara ini akan dipecat. |
Tampilan Daftar Akordeon
Dalam tampilan daftar akordeon, Anda dapat menggunakan elemen item-link sebagai ganti akordeon-toggle .
<div class = "list-block accordion-list">
<ul>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">1st Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 1st Item...</div>
</li>
<li class = "accordion-item">
<a href = "" class = "item-link item-content">
<div class = "item-inner">
<div class = "item-title">2nd Item</div>
</div>
</a>
<div class = "accordion-item-content">Content for 2nd Item...</div>
</li>
</ul>
</div>Contoh
Contoh berikut menunjukkan penggunaan akordeon di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Accordion</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Accordion</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content">
<div class="content-block-title">List of Programming Lagauges</div>
<div class="list-block accordion-list">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Separate Collapsibles</div>
<div class="list-block">
<ul>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p >C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">C++</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
</li>
<li class="accordion-item">
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Java</div>
</div>
</a>
<div class="accordion-item-content">
<div class="content-block">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block-title">Custom Accordion</div>
<div class="content-block accordion-list custom-accordion">
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C</span></div>
<div class="accordion-item-content">
<p>C is a general-purpose, procedural, imperative computer programming language developed in 1972 by Dennis M. Ritchie at the Bell Telephone Laboratories to develop the UNIX operating system. C is the most widely used computer language. It keeps fluctuating at number one scale of popularity along with Java programming language, which is also equally popular and most widely used among modern software programmers.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>C++</span></div>
<div class="accordion-item-content">
<p>C++ is a middle-level programming language developed by Bjarne Stroustrup starting in 1979 at Bell Labs. C++ runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX.
This reference will take you through simple and practical approach while learning C++ Programming language.
</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-toggle"><i class="icon icon-plus">+</i><i class="icon icon-minus">-</i><span>Java</span></div>
<div class="accordion-item-content">
<p>Java is a high-level programming language originally developed by Sun Microsystems and released in 1995. Java runs on a variety of platforms, such as Windows, Mac OS, and the various versions of UNIX. This tutorial gives a complete understanding of Java.
This reference will take you through simple and practical approach while learning Java Programming language.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>.custom-accordion{padding-left:0;padding-right:0;}.custom-accordion .accordion-item-toggle{padding:0px 15px;height:44px;line-height:44px;font-size:17px;color:#000;border-bottom:1px solid rgba(0,0,0,0.15);cursor:pointer;}.custom-accordion .accordion-item-toggle:active{background:rgba(0,0,0,0.15);}.custom-accordion .accordion-item-toggle span{display:inline-block;margin-left:15px;}.custom-accordion .accordion-item:last-child .accordion-item-toggle{border-bottom:none;}.custom-accordion .icon-plus,.custom-accordion .icon-minus{display:inline-block;width:22px;height:22px;border:1px solid #000;border-radius:100%;line-height:20px;text-align:center;}.custom-accordion .icon-minus{display:none;}.custom-accordion .accordion-item-expanded .icon-minus{display:inline-block;}.custom-accordion .accordion-item-expanded .icon-plus{display:none;}.custom-accordion .accordion-item-content{padding:0px 15px;}</style>
<script>
// here initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai accordion.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/accordion.html dan hasilnya ditampilkan seperti di bawah ini.
Contoh tersebut menyediakan tata letak yang dapat diciutkan, yang dapat diperluas untuk menampilkan konten yang terkait dengan akordeon.
Deskripsi
Kartu berisi informasi terorganisir yang terkait dengan satu subjek seperti foto, tautan, dan teks. Tabel berikut menunjukkan jenis kartu Framework7 -
| S.No | Jenis & Deskripsi |
|---|---|
| 1 | Tata Letak Kartu HTML Tata letak HTML kartu dasar menggunakan kelas kartu untuk mengatur itemnya. |
| 2 | Tampilan Daftar Dengan Kartu Anda dapat menggunakan kartu sebagai elemen tampilan daftar dengan menambahkan kelas cards-list ke <div class = "list-block"> . |
Deskripsi
Chip adalah sekumpulan kecil entitas, yang dapat berisi foto, rangkaian kecil judul, dan informasi singkat.
Keripik Tata Letak HTML
Kode berikut menunjukkan tata letak HTML chip dasar yang digunakan dalam Framework7 -
<div class = "chip">
<div class = "chip-media">
<img src = "http://lorempixel.com/100/100/people/9/">
</div>
<div class = "chip-label">Jane Doe</div>
<a href = "#" class = "chip-delete"></a>
</div>Tata letak HTML di atas berisi banyak kelas seperti yang tercantum di bawah ini -
chips - Ini adalah wadah chip.
chip-media- Ini adalah elemen media chip yang dapat berisi gambar, avatar, atau ikon. Ini opsional.
card-label - Ini adalah label teks chip.
card-delete - Ini adalah tautan ikon hapus opsional dari sebuah chip.
Contoh
Contoh berikut mewakili entitas seperti album, elemen kartu, dll. Bersama dengan foto dan informasi singkat -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Chips HTML Layout</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Chips HTML Layout</div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Chips With Text</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
</div>
</div>
<div class = "content-block-title">Chips with icons</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media bg-blue"><i class = "icon icon-form-calendar"></i></div>
<div class = "chip-label">Set Date</div>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent Mail</div>
</div>
</div>
<div class = "content-block-title">Contact Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic2.jpg"></div>
<div class = "chip-label">Sunil Narayan</div>
</div>
<div class = "chip">
<div class = "chip-media bg-pink">R</div>
<div class = "chip-label">Raghav</div>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
</div>
<div class = "chip">
<div class = "chip-media bg-red">Z</div>
<div class = "chip-label">Zien</div>
</div>
</div>
<div class = "content-block-title">Deletable Chips</div>
<div class = "content-block">
<div class = "chip">
<div class = "chip-label">Chip one</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-teal">S</div>
<div class = "chip-label">Sharma</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-purple"><i class = "icon icon-form-email"></i></div>
<div class = "chip-label">Sent</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media"><img src = "/framework7/images/pic.jpg"></div>
<div class = "chip-label">James Willsmith</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-label">Chip two</div>
<a href = "#" class = "chip-delete"></a>
</div>
<div class = "chip">
<div class = "chip-media bg-green">R</div>
<div class = "chip-label">Raghav</div>
<a href = "#" class = "chip-delete"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
</style>
<script>
var myApp = new Framework7 ({
material: true
});
var $$ = Dom7; $$('.chip-delete').on('click', function (e) {
e.preventDefault();
var chip = $$(this).parents('.chip');
myApp.confirm('Do you want to delete this Chip?', function () {
chip.remove();
});
});
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai cards_html_layout.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/cards_html_layout.html dan hasilnya ditampilkan seperti di bawah ini.
Contoh tersebut merepresentasikan entitas kompleks dalam blok kecil seperti album, elemen kartu, gambar yang diposting, yang berisi foto, string judul, dan informasi singkat.
Deskripsi
Framework7 menyediakan sekelompok tombol yang siap digunakan hanya dengan menambahkan kelas yang sesuai ke tautan atau tombol input.
| S.No | Jenis & Deskripsi |
|---|---|
| 1 | Tombol Tema iOS Framework7 menyediakan banyak tombol tema iOS, yang dapat digunakan dengan menerapkan kelas yang sesuai. |
| 2 | Tombol Tema Material Tema material menyediakan banyak tombol untuk digunakan dalam aplikasi Anda dengan menggunakan kelas yang sesuai. |
Deskripsi
Framework7 menyediakan tombol tindakan mengambang untuk tindakan yang dipromosikan. Mereka muncul sebagai ikon lingkaran mengambang di atas UI. Ini memiliki perilaku gerak yang mengandung morphing , meluncurkan , dan mentransfer titik jangkar .
Tombol aksi mengambang hanya didukung dalam tema Material.
Tabel berikut mencantumkan jenis tombol tindakan yang digunakan di Framework7 -
| S.No | Jenis & Deskripsi |
|---|---|
| 1 | Tata Letak Tombol Tindakan Mengambang Ini sangat sederhana; Anda hanya perlu menempatkannya sebagai anak halaman atau tampilan . |
| 2 | Morph Ke Popover Jika Anda ingin membuka popover dengan mengklik tombol tindakan mengambang maka Anda dapat menggunakan kelas tombol-ke-popover mengambang . |
| 3 | Panggilan cepat Anda dapat menjalankan tindakan terkait setelah mengklik tombol tindakan mengambang dengan menggunakan panggilan cepat . |
Deskripsi
Formulir digunakan untuk berinteraksi dengan pengguna dan mengumpulkan data dari pengguna web menggunakan bidang teks, kotak centang, tombol radio, dll.
Framework7 menyediakan berbagai jenis elemen formulir untuk bekerja dengan aplikasi dengan lancar seperti yang ditentukan dalam tabel di bawah ini -
| S.No | Jenis & Deskripsi Overlay |
|---|---|
| 1 | Elemen Bentuk Elemen formulir digunakan untuk membuat tata letak formulir yang terlihat bagus. |
| 2 | Kotak centang dan Radio The tampilan daftar extention memungkinkan Anda untuk membuat kotak centang dan radio masukan dalam Framework7. |
| 3 | Pilih Cerdas Pilih cerdas adalah cara mudah untuk mengubah pemilihan formulir ke halaman dinamis dengan menggunakan grup kotak centang dan input radio. |
| 4 | Elemen Dinonaktifkan Elemen dapat dinonaktifkan dengan menerapkan kelas yang dinonaktifkan ke elemen atau menambahkan atribut yang dinonaktifkan untuk elemen formulir. |
| 5 | Formulir Data Framework7 memiliki sangat sedikit metode yang berguna, yang membuat bekerja dengan formulir menjadi mudah. |
| 6 | Formulir Penyimpanan Sangat mudah dengan penyimpanan formulir untuk menyimpan dan mengurai data formulir secara otomatis pada halaman yang dimuat Ajax. |
| 7 | Pengiriman Formulir Ajax Framework7 memungkinkan Anda mengirim data secara otomatis menggunakan Ajax. |
Deskripsi
Tab adalah sekumpulan konten yang dikelompokkan secara logis yang memungkinkan kita beralih dengan cepat di antara tab dan menghemat ruang seperti akordeon.
Tata Letak Tab
Kode berikut mendefinisikan tata letak untuk tab -
<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
<!-- The tab, should have "tab" class and unique id attribute -->
<!-- The tab is active by default - "active" class -->
<div class = "tab active" id = "tab1">
... The content for Tab 1 goes here ...
</div>
<!-- The second tab, should have "tab" class and unique id attribute -->
<div class = "tab" id = "tab2">
... The content for Tab 2 goes here ...
</div>
</div>Dimana -
<div class = "tabs">- Ini adalah pembungkus wajib untuk semua tab. Jika kami melewatkan ini, tab tidak akan berfungsi sama sekali.
-
<div class = "tab"> - Ini adalah satu tab, yang seharusnya unique id atribut.
-
<div class = "tab active">- Ini adalah satu tab aktif, yang menggunakan kelas aktif tambahan untuk membuat tab terlihat (aktif).
Beralih Antar Tab
Anda dapat menggunakan beberapa pengontrol dalam tata letak tab, sehingga pengguna dapat beralih di antaranya.
Untuk ini, Anda perlu membuat tautan (tag <a>) dengan kelas tab-link dan atribut href sama dengan atribut id dari tab target -
<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1) -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>
<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2) -->
<a href = "#tab2" class = "tab-link">Tab 2</a>
<a href = "#tab3" class = "tab-link">Tab 3</a>Beralih Beberapa Tab
Jika Anda menggunakan tautan tab tunggal untuk beralih di antara banyak tab, Anda dapat menggunakan kelas daripada menggunakan atribut ID dan tab data .
<!-- For Top Tabs -->
<div class = "tabs tabs-top">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
<div class = "tab tab1 active">...</div>
<div class = "tab tab2">...</div>
<div class = "tab tab3">...</div>
</div>
<!-- For Tabs links -->
<div class = "tab-links">
<!-- Links are switch top and bottom tabs to .tab1 -->
<a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
<!-- Links are switch top and bottom tabs to .tab2 -->
<a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
<!-- Links are switch top and bottom tabs to .tab3 -->
<a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>The Data-tab atribut tab-link berisi CSS pemilih dari tab Target / tab.
Kita dapat menggunakan berbagai cara tab, ini ditentukan dalam tabel berikut -
| S.No | Jenis & Deskripsi Tab |
|---|---|
| 1 | Tab Sebaris Tab sebaris adalah kumpulan yang dikelompokkan dalam sebaris yang memungkinkan Anda beralih di antara tab tersebut dengan cepat. |
| 2 | Beralih Tab Dari Navbar Kami dapat menempatkan tab di bilah navigasi yang memungkinkan Anda beralih di antara mereka. |
| 3 | Beralih Tampilan Dari Tab Bar Tab tunggal dapat digunakan untuk beralih di antara tampilan dengan navigasi dan tata letaknya sendiri. |
| 4 | Tab Animasi Anda dapat menggunakan transisi sederhana (animasi) untuk berpindah tab. |
| 5 | Tab yang Dapat Digesek Anda dapat membuat tab yang dapat digeser dengan transisi sederhana menggunakan kelas tab-swipeable-wrap untuk tab tersebut. |
| 6 | Tab Acara JavaScript Peristiwa JavaScript dapat digunakan saat Anda bekerja dengan kode JavaScript untuk tab. |
| 7 | Tampilkan Tab Menggunakan JavaScript Anda dapat beralih atau menampilkan tab menggunakan metode JavaScript. |
Deskripsi
Penggeser gesek adalah penggeser sentuh paling kuat dan modern dan hadir di Framework7 dengan banyak fitur.
Tata letak HTML berikut menunjukkan penggeser gesek -
<!-- Container class for slider -->
<div class = "swiper-container">
<!-- Wrapper class for slider -->
<div class = "swiper-wrapper">
<!-- Slides -->
<div class = "swiper-slide">Slide 1</div>
<div class = "swiper-slide">Slide 2</div>
<div class = "swiper-slide">Slide 3</div>
... other slides ...
</div>
<!-- Define pagination, if it is required -->
<div class = "swiper-pagination"></div>
</div>Kelas berikut digunakan untuk slider swiper -
swiper-container - Ini adalah elemen yang diperlukan untuk wadah slider utama dan digunakan untuk slide dan paginasi.
Swiper-wrapper - Ini adalah elemen yang diperlukan untuk slide pembungkus tambahan.
swiper-slide - Ini adalah elemen slide tunggal dan dapat berisi HTML apa pun di dalamnya.
swiper-pagination - Ini opsional untuk poin pagination dan dibuat secara otomatis.
Anda dapat menginisialisasi swiper dengan JavaScript menggunakan metode terkait -
myApp.swiper(swiperContainer,parameters)ATAU
new Swiper(swiperContainer, parameters)Kedua metode tersebut digunakan untuk menginisialisasi slider dengan opsi.
Metode yang diberikan di atas berisi parameter berikut -
swiperContainer- Ini adalah HTMLElement atau string dari wadah penyapu dan diperlukan.
parameters - Ini adalah elemen opsional yang berisi objek dengan parameter swiper.
Misalnya -
var mySwiper = app.swiper('.swiper-container', {
speed: 400,
spaceBetween: 100
});Dimungkinkan untuk mengakses instance swiper dan properti swiper dari wadah slider memiliki elemen HTML berikut -
var mySwiper = $$('.swiper-container')[0].swiper;
// Here you can use all slider methods like:
mySwiper.slideNext();Anda dapat melihat berbagai cara dan jenis swiper di tabel berikut -
| S.No | Jenis & Deskripsi Swiper |
|---|---|
| 1 | Swiper Default Dengan Pagination Ini adalah penggeser sentuh modern dan gesekan gesek secara horizontal, secara default. |
| 2 | Penyapu Vertikal Yang ini juga berfungsi sebagai swiper default tetapi menggesek secara vertikal. |
| 3 | Dengan Spasi Antar Slides Swiper ini digunakan untuk memberi jarak antara dua slide. |
| 4 | Beberapa Swiper Gesek ini menggunakan lebih dari satu gesekan pada satu halaman. |
| 5 | Swiper Bersarang Ini adalah kombinasi slide vertikal dan horizontal. |
| 6 | Kontrol Kustom Ini digunakan untuk kontrol khusus untuk memilih atau menggesek slide apa pun. |
| 7 | Pemuatan Lambat Ini dapat digunakan untuk file multimedia, yang membutuhkan waktu untuk memuat. |
Deskripsi
Browser Foto mirip dengan komponen browser foto iOS untuk menampilkan kumpulan gambar, yang dapat diperbesar dan digeser. Untuk menggeser antar gambar, browser foto menggunakan Swiper Slider .
Tabel berikut menunjukkan jenis browser foto yang digunakan dalam framework7 -
| S.No | Jenis & Deskripsi browser foto |
|---|---|
| 1 | Buat Instance Browser Foto Browser foto dapat dibuat dan diinisialisasi hanya menggunakan JavaScript. |
| 2 | Parameter Browser Foto Framework7 menyediakan daftar parameter yang digunakan dengan browser foto. |
| 3 | Metode & Properti Browser Foto Anda akan mendapatkan variabel instance yang diinisialisasi untuk menggunakan metode dan properti browser foto setelah Anda menginisialisasi browser foto. |
| 4 | Foto Array Selama inisialisasi browser foto, Anda perlu melewatkan array dengan foto / video dalam parameter foto . |
| 5 | Template Peramban Foto Framework7 memberi Anda banyak templat browser foto, yang dapat Anda berikan pada inisialisasi browser foto. |
Deskripsi
Pelengkapan otomatis adalah komponen yang ramah seluler dan dioptimalkan untuk sentuhan dari Framework7, yang dapat berupa dropdown atau berdiri sendiri. Anda dapat membuat dan menginisialisasi instance Autocomplete dengan menggunakan metode JavaScript -
myApp.autocomplete(parameters)Di mana parameter diperlukan, objek yang digunakan untuk menginisialisasi instance Autocomplete.
Parameter Pelengkapan Otomatis
Tabel berikut mencantumkan parameter Autocomplete yang tersedia di Framework7 -
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | openIn Ini mendefinisikan cara membuka Autocomplete yang dapat digunakan sebagai dropdown, popup atau halaman. |
tali | halaman |
| 2 | source Ini menggunakan contoh pelengkapan otomatis, kueri penelusuran, dan fungsi render untuk mengirimkan item yang cocok dengan larik. |
fungsi (pelengkapan otomatis, kueri, render) | - |
| 3 | valueProperty Ini menentukan nilai item dari kunci objek item yang cocok. |
tali | Indo |
| 4 | limit Ini menampilkan jumlah item yang terbatas di pelengkapan otomatis per kueri. |
jumlah | - |
| 5 | preloader Prapemuat dapat digunakan untuk menentukan tata letak pelengkapan otomatis dengan menyetelnya ke true. |
boolean | Salah |
| 6 | preloaderColor Ini menentukan warna prapemuat. Secara default, warnanya "hitam". |
tali | - |
| 7 | value Mendefinisikan array dengan nilai default yang dipilih. |
Himpunan | - |
| 8 | textProperty Ini menentukan nilai item dari kunci objek item yang cocok, yang dapat digunakan sebagai judul opsi yang ditampilkan. |
tali | teks |
Parameter Pelengkapan Otomatis Mandiri
Tabel berikut mencantumkan parameter Autocomplete Mandiri yang tersedia di Framework7 -
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | opener Ini adalah string atau parameter elemen HTML, yang akan membuka halaman pelengkapan otomatis mandiri. |
string atau HTMLElement | - |
| 2 | popupCloseText Ini digunakan untuk menutup popup pelengkapan otomatis. |
tali | 'Menutup' |
| 3 | backText Ini menyediakan tautan balik ketika pelengkapan otomatis dibuka sebagai halaman. |
tali | 'Kembali' |
| 4 | pageTitle Ini menentukan judul halaman pelengkapan otomatis. |
tali | - |
| 5 | searchbarPlaceholderText Ini menentukan teks placeholder bilah pencarian. |
tali | 'Cari' |
| 6 | searchbarCancelText Ini mendefinisikan teks tombol batal bilah pencarian. |
tali | 'membatalkan' |
| 7 | notFoundText Ini menampilkan teks ketika tidak ada elemen yang cocok ditemukan. |
tali | 'Tidak ada yang ditemukan' |
| 8 | multiple Ini memungkinkan untuk memilih beberapa pilihan dengan mengaturnya ke true. |
boolean | Salah |
| 9 | navbarTheme Ini menentukan tema warna untuk navbar. |
tali | - |
| 10 | backOnSelect Saat pengguna memilih nilai, pelengkapan otomatis akan ditutup dengan menyetelnya ke true. |
boolean | Salah |
| 11 | formTheme Ini menentukan tema warna untuk formulir. |
tali | - |
Parameter Pelengkapan Otomatis Dropdown
Tabel berikut mencantumkan parameter Dropdown Autocomplete yang tersedia di Framework7 -
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | input Ini adalah string atau elemen HTML yang digunakan untuk input teks. |
string atau HTMLElement | - |
| 2 | dropdownPlaceholderText Ini menentukan teks placeholder dropdown. |
tali | - |
| 3 | updateInputValueOnSelect Anda dapat memperbarui nilai input pada select dengan menyetelnya ke true. |
boolean | benar |
| 4 | expandInput Anda dapat memperluas masukan teks dalam Tampilan Daftar untuk membuat layar penuh lebar selama tarik-turun terlihat dengan menyetel masukan item ke true. |
boolean | Salah |
Fungsi Panggilan Balik Pelengkapan Otomatis
Tabel di bawah ini mencantumkan parameter Dropdown Autocomplete yang tersedia di Framework7 -
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | onChange Setiap kali nilai pelengkapan otomatis diubah, fungsi panggilan balik ini akan dijalankan. |
fungsi (pelengkapan otomatis, nilai) | - |
| 2 | onOpen Setiap kali pelengkapan otomatis dibuka, fungsi panggilan balik ini akan dijalankan. |
fungsi (pelengkapan otomatis) | - |
| 3 | onClose Setiap kali pelengkapan otomatis ditutup, fungsi panggilan balik ini akan dijalankan. |
fungsi (pelengkapan otomatis) | - |
Template Pelengkapan Otomatis
Tabel berikut mencantumkan parameter Dropdown Autocomplete yang tersedia di Framework7 -
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | navbarTemplate Ini adalah template navbar pelengkapan otomatis mandiri. |
tali | - |
| 2 | itemTemplate Ini adalah item formulir template7 mandiri. |
tali | - |
| 3 | dropdownTemplate Ini adalah template dropdown template7. |
tali | - |
| 4 | dropdownItemTemplate Ini adalah item daftar dropdown template7. |
tali | - |
| 5 | dropdownPlaceholderTemplate Ini adalah item placeholder dropdown template7. |
tali | - |
Template default
Berikut adalah cuplikan kode template default untuk parameter template yang ditentukan di atas -
navbarTemplate
<div class = "navbar {{#if navbarTheme}}theme-{{navbarTheme}}{{/if}}">
<div class = "navbar-inner">
<div class = "left sliding">
{{#if material}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}} icon-only">
<i class = "icon icon-back"></i>
</a>
{{else}}
<a href = "#" class = "link {{#if inPopup}}close-popup{{else}}back{{/if}}">
<i class = "icon icon-back"></i>
{{#if inPopup}}
<span>{{popupCloseText}}</span>
{{else}}
<span>{{backText}}</span>
{{/if}}
</a>
{{/if}}
</div>
<div class = "center sliding">{{pageTitle}}</div>
{{#if preloader}}
<div class = "right">
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
</div>
</div>
{{/if}}
</div>
</div>itemTemplate
<li>
<label class = "label-{{inputType}} item-content">
<input type = "{{inputType}}" name = "{{inputName}}" value = "{{value}}" {{#if selected}}checked{{/if}}>
{{#if material}}
<div class = "item-media">
<i class = "icon icon-form-{{inputType}}"></i>
</div>
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{else}}
{{#if checkbox}}
<div class = "item-media">
<i class = "icon icon-form-checkbox"></i>
</div>
{{/if}}
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
{{/if}}
</label>
</li>dropdownTemplate
<div class = "autocomplete-dropdown">
<div class = "autocomplete-dropdown-inner">
<div class = "list-block">
<ul></ul>
</div>
</div>
{{#if preloader}}
<div class = "autocomplete-preloader preloader
{{#if preloaderColor}}
preloader-{{preloaderColor}}
{{/if}}">
{{#if material}}
{{materialPreloaderHtml}}
{{/if}}
</div>
{{/if}}
</div>dropdownItemTemplate
<li>
<label class = "{{#unless placeholder}}label-radio{{/unless}} item-content" data-value = "{{value}}">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>dropdownPlaceholderTemplate
<li class = "autocomplete-dropdown-placeholder">
<div class = "item-content">
<div class = "item-inner">
<div class = "item-title">{{text}}</div>
</div>
</label>
</li>Metode Pelengkapan Otomatis
Tabel berikut menentukan metode Autocomplete yang tersedia di Framework7 -
| S.No | Metode & Deskripsi |
|---|---|
| 1 | myAutocomplete.params Mendefinisikan parameter inisialisasi yang diteruskan dengan objek. |
| 2 | myAutocomplete.value Ini mendefinisikan array dengan nilai-nilai yang dipilih. |
| 3 | myAutocomplete.opened Ini membuka Autocomplete jika disetel ke true. |
| 4 | myAutocomplete.dropdown Ini menentukan contoh dropdown Pelengkapan Otomatis. |
| 5 | myAutocomplete.popup Ini menentukan contoh popup Pelengkapan Otomatis. |
| 6 | myAutocomplete.page Ini menentukan contoh halaman Pelengkapan Otomatis. |
| 7 | myAutocomplete.pageData Ini mendefinisikan data halaman Autocomplete. |
| 8 | myAutocomplete.searchbar Ini mendefinisikan contoh bilah pencarian Pelengkapan Otomatis. |
Properti Pelengkapan Otomatis
Tabel berikut menentukan metode Autocomplete yang tersedia di Framework7 -
| S.No | Properti & Deskripsi |
|---|---|
| 1 | myAutocomplete.open() Ini membuka Autocomplete, yang dapat digunakan sebagai dropdown, popup atau halaman. |
| 2 | myAutocomplete.close() Ini menutup Pelengkapan Otomatis. |
| 3 | myAutocomplete.showPreloader() Ini menunjukkan prapemuat Autocomplete. |
| 4 | myAutocomplete.hidePreloader() Ini menyembunyikan prapemuat Autocomplete. |
| 5 | myAutocomplete.destroy() Ini merusak instance prapemuat Autocomplete dan menghapus semua acara. |
Contoh
Contoh berikut menunjukkan penggunaan parameter pelengkapan otomatis yang bersembunyi di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Autocomplete</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Autcomplete</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block-title">Simple Dropdown Autocomplete</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Input Expand</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-expand">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With All Values</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-all">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Dropdown With Placeholder</div>
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-title label">Country</div>
<div class = "item-input">
<input type = "text" placeholder = "Country" id = "autocomplete-dropdown-placeholder">
</div>
</li>
</ul>
</div>
<div class = "content-block-title">Simple Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Popup Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-popup" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Country</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
<div class = "content-block-title">Multiple Values Standalone Autocomplete</div>
<div class = "list-block">
<ul>
<li>
<a href = "#" id = "autocomplete-standalone-multiple" class = "item-link item-content autocomplete-opener">
<input type = "hidden">
<div class = "item-inner">
<div class = "item-title">Favorite Countries</div>
<div class = "item-after"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7; var mainView = myApp.addView('.view-main'); // Countries data array var countries = ('India Africa Australia NewZealand England WestIndies Scotland Zimbabwe Srilanka Bangladesh').split(' '); // Simple Dropdown var autocompleteDropdownSimple = myApp.autocomplete ({ input: '#autocomplete-dropdown', openIn: 'dropdown', source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Dropdown with input expand var autocompleteDropdownExpand = myApp.autocomplete ({ input: '#autocomplete-dropdown-expand', openIn: 'dropdown', expandInput: true, // expandInput used as item-input in List View will be expanded to full screen wide //during dropdown source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // Find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Dropdown with all values var autocompleteDropdownAll = myApp.autocomplete ({ input: '#autocomplete-dropdown-all', openIn: 'dropdown', source: function (autocomplete, query, render) { var results = []; // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Dropdown with placeholder var autocompleteDropdownPlaceholder = myApp.autocomplete ({ input: '#autocomplete-dropdown-placeholder', openIn: 'dropdown', dropdownPlaceholderText: 'Type as "India"', source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); } }); // Simple Standalone var autocompleteStandaloneSimple = myApp.autocomplete ({ openIn: 'page', //open in page opener: $$('#autocomplete-standalone'), //link that opens autocomplete
backOnSelect: true, //go back after we select something
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0)
results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone').find('.item-after').text(value[0]); // You can add item value to input value $$('#autocomplete-standalone').find('input').val(value[0]);
}
});
// Standalone Popup
var autocompleteStandalonePopup = myApp.autocomplete ({
openIn: 'popup', // Opens the Autocomplete in page
opener: $$('#autocomplete-standalone-popup'), // It will open standalone autocomplete popup backOnSelect: true, //After selecting item, then go back to page source: function (autocomplete, query, render) { var results = []; if (query.length === 0) { render(results); return; } // You can find matched items for (var i = 0; i < countries.length; i++) { if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]); } // Display the items by passing array with result items render(results); }, onChange: function (autocomplete, value) { // Here add the item text value to item-after $$('#autocomplete-standalone-popup').find('.item-after').text(value[0]);
// You can add item value to input value
$$('#autocomplete-standalone-popup').find('input').val(value[0]); } }); // Multiple Standalone var autocompleteStandaloneMultiple = myApp.autocomplete ({ openIn: 'page', //Opens the Autocomplete in page opener: $$('#autocomplete-standalone-multiple'), //link that opens autocomplete
multiple: true, //Allow multiple values
source: function (autocomplete, query, render) {
var results = [];
if (query.length === 0) {
render(results);
return;
}
// You can find matched items
for (var i = 0; i < countries.length; i++) {
if (countries[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(countries[i]);
}
// Display the items by passing array with result items
render(results);
},
onChange: function (autocomplete, value) {
// Here add the item text value to item-after
$$('#autocomplete-standalone-multiple').find('.item-after').text(value.join(', ')); // You can add item value to input value $$('#autocomplete-standalone-multiple').find('input').val(value.join(', '));
}
});
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai autocomplete.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/autocomplete.html dan hasilnya ditampilkan seperti di bawah ini.
Contoh ini menyediakan nilai pelengkapan otomatis dalam tarik-turun sederhana, tarik-turun dengan semua nilai, tarik-turun dengan placeholder, pelengkapan otomatis mandiri, dll.
Deskripsi
Alat pilih terlihat seperti alat pilih asli iOS dan merupakan komponen yang kuat yang memungkinkan Anda untuk memilih nilai apa pun dari daftar dan juga digunakan untuk membuat alat pilih hamparan khusus. Anda dapat menggunakan Picker sebagai komponen sebaris atau sebagai hamparan. Alat pilih overlay akan secara otomatis diubah menjadi Popover di tablet (iPad).
Dengan menggunakan metode App berikut, Anda dapat membuat dan menginisialisasi metode JavaScript -
myApp.picker(parameters)Di mana parameter adalah objek yang diperlukan, digunakan untuk menginisialisasi instance picker dan itu adalah metode yang diperlukan.
Parameter Alat Pilih
Tabel berikut menentukan parameter yang tersedia di alat pilih -
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | container String dengan pemilih CSS atau HTMLElement digunakan untuk menghasilkan HTML Picker untuk alat pilih sebaris. |
string atau HTMLElement | - |
| 2 | input Elemen input terkait ditempatkan dengan string dengan pemilih CSS atau HTMLElement. |
string atau HTMLElement | - |
| 3 | scrollToInput Ini digunakan untuk menggulir viewport (konten halaman) input, setiap kali picker dibuka. |
boolean | benar |
| 4 | inputReadOnly Digunakan untuk menyetel atribut "hanya-baca" pada masukan yang ditentukan. |
boolean | benar |
| 5 | convertToPopover Ini digunakan untuk mengubah modal pemilih menjadi Popover di layar besar seperti iPad. |
boolean | benar |
| 6 | onlyOnPopover Anda dapat membuka alat pilih di Popover dengan mengaktifkannya. |
boolean | benar |
| 7 | cssClass Untuk modal pemilih, Anda dapat menggunakan nama kelas CSS tambahan. |
tali | - |
| 8 | closeByOutsideClick Anda dapat menutup alat pilih dengan mengklik di luar alat pilih atau elemen masukan dengan mengaktifkan metode. |
boolean | Salah |
| 9 | toolbar Ini digunakan untuk mengaktifkan toolbar modal picker. |
boolean | benar |
| 10 | toolbarCloseText Digunakan untuk tombol toolbar Selesai / Tutup. |
tali | 'Selesai' |
| 11 | toolbarTemplate Ini adalah Template HTML toolbar, secara default adalah string HTML dengan template berikut - |
tali | - |
Parameter Alat Pilih Khusus
Tabel berikut mencantumkan parameter alat pilih khusus yang tersedia -
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | rotateEffect Ini memungkinkan efek rotasi 3D di picker. |
boolean | Salah |
| 2 | momentumRatio Saat Anda melepaskan alat pilih setelah sentuhan dan gerakan cepat, ini menghasilkan lebih banyak momentum. |
jumlah | 7 |
| 3 | updateValuesOnMomentum Digunakan untuk memperbarui pemetik dan nilai input selama momentum. |
boolean | Salah |
| 4 | updateValuesOnTouchmove Digunakan untuk memperbarui alat pilih dan nilai input selama gerakan sentuh. |
boolean | benar |
| 5 | value Array memiliki nilai awal dan juga setiap item array mewakili nilai kolom terkait. |
Himpunan | - |
| 6 | formatValue Fungsi ini digunakan untuk memformat nilai masukan, dan harus mengembalikan nilai string baru / yang diformat. The nilai-nilai dan displayValues adalah array kolom terkait. |
fungsi (p, nilai, displayValues) | - |
| 7 | cols Setiap item array mewakili sebuah objek dengan parameter kolom. |
Himpunan | - |
Callback Parameter Pemilih
Tabel berikut menunjukkan daftar fungsi panggilan balik yang tersedia di alat pilih -
| S.No | Callback & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | onChange Fungsi callback akan dijalankan setiap kali nilai picker berubah dan nilai serta displayValues adalah array dari kolom terkait. |
fungsi (p, nilai, displayValues) | - |
| 2 | onOpen Fungsi callback akan dijalankan setiap kali picker dibuka. |
fungsi (p) | - |
| 3 | onClose Fungsi callback akan dijalankan setiap kali picker ditutup. |
fungsi (p) | - |
Parameter Kolom
Pada saat konfigurasi Picker, kita perlu melewatkan parameter cols . Ini direpresentasikan sebagai array, di mana setiap item adalah objek dengan parameter kolom -
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | values Anda dapat menentukan nilai kolom string dengan larik. |
Himpunan | - |
| 2 | displayValues Ini memiliki array dengan nilai kolom string dan itu akan menampilkan nilai dari parameter nilai , Jika tidak ditentukan. |
Himpunan | - |
| 3 | cssClass Nama kelas CSS yang digunakan untuk menyetel pada penampung HTML kolom. |
tali | - |
| 4 | textAlign Ini digunakan untuk mengatur perataan teks dari nilai kolom dan bisa jadi "kiri", "tengah" atau "kanan" . |
tali | - |
| 5 | width Lebar dihitung secara otomatis, secara default. Jika Anda perlu memperbaiki lebar kolom di picker dengan kolom dependen yang harus dalam px . |
jumlah | - |
| 6 | divider Ini digunakan untuk kolom yang seharusnya menjadi pembagi visual, tidak memiliki nilai apa pun. |
boolean | Salah |
| 7 | content Ini digunakan untuk menentukan kolom pembagi (pembagi: true) dengan konten kolom. |
tali | - |
Parameter Panggilan Balik Kolom
| S.No | Callback & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | onChange Kapanpun nilai kolom akan berubah pada saat itu fungsi callback akan dijalankan. The nilai dan displayValue mewakili kolom saat nilai dan displayValue . |
fungsi (p, nilai, displayValue) | - |
Properti Picker
Variabel Picker memiliki banyak properti yang diberikan dalam tabel berikut -
| S.No | Properti & Deskripsi |
|---|---|
| 1 | myPicker.params Anda dapat menginisialisasi parameter yang diteruskan dengan objek. |
| 2 | myPicker.value Nilai yang dipilih untuk setiap kolom diwakili oleh larik item. |
| 3 | myPicker.displayValue Nilai tampilan yang dipilih untuk setiap kolom diwakili oleh larik item. |
| 4 | myPicker.opened Saat alat pilih dibuka, ini disetel ke nilai sebenarnya . |
| 5 | myPicker.inline Saat alat pilih sebaris, ini disetel ke nilai sebenarnya . |
| 6 | myPicker.cols Kolom Picker memiliki metode dan propertinya sendiri. |
| 7 | myPicker.container Instance Dom7 digunakan untuk penampung HTML. |
Metode Pemetik
Variabel picker memiliki metode yang membantu, yang diberikan dalam tabel berikut -
| S.No | Metode & Deskripsi |
|---|---|
| 1 | myPicker.setValue(values, duration) Gunakan untuk menyetel nilai alat pilih baru. Nilainya berada dalam array dimana setiap item mewakili nilai untuk setiap kolom. durasi - Ini adalah durasi transisi dalam ms. |
| 2 | myPicker.open() Gunakan untuk membuka Picker. |
| 3 | myPicker.close() Gunakan untuk menutup Picker. |
| 4 | myPicker.destroy() Gunakan untuk menghancurkan instance Picker dan menghapus semua acara. |
Properti Kolom
Setiap kolom dalam array myPicker.cols juga memiliki properti yang berguna, yang diberikan dalam tabel berikut -
//Get first column
var col = myPicker.cols[0];| S.No | Properti & Deskripsi |
|---|---|
| 1 | col.container Anda dapat membuat sebuah instance dengan container HTML kolom. |
| 2 | col.items Anda dapat membuat instance dengan elemen HTML item kolom. |
| 3 | col.value Digunakan untuk memilih nilai kolom saat ini. |
| 4 | col.displayValue Digunakan untuk memilih nilai kolom tampilan saat ini. |
| 5 | col.activeIndex Berikan nomor indeks saat ini, yang dipilih / item aktif. |
Metode Kolom
Metode kolom yang berguna diberikan dalam tabel berikut -
| S.No | Metode & Deskripsi |
|---|---|
| 1 | col.setValue(value, duration) Digunakan untuk menetapkan nilai baru untuk kolom saat ini. The nilai harus menjadi nilai baru, dan durasi adalah durasi transisi yang diberikan dalam ms. |
| 2 | col.replaceValues(values, displayValues) Digunakan untuk mengganti nilai kolom dan displayValues ​​dengan yang baru. |
Ini digunakan untuk mengakses instance Picker dari penampung HTML-nya, setiap kali Anda menginisialisasi Picker sebagai inline Picker.
var myPicker = $$('.picker-inline')[0].f7Picker;Ada berbagai jenis Alat Pilih seperti yang ditentukan dalam tabel berikut -
| S.No | Jenis & Deskripsi Tab |
|---|---|
| 1 | Picker Dengan Nilai Tunggal Ini adalah komponen yang kuat yang memungkinkan Anda memilih nilai apa pun dari daftar. |
| 2 | Dua Nilai dan Efek Rotasi 3D Di pemilih, Anda dapat menggunakan untuk efek rotasi 3D. |
| 3 | Nilai Dependen Nilai bergantung satu sama lain untuk elemen tertentu. |
| 4 | Toolbar Kustom Anda dapat menggunakan satu atau lebih alat pilih pada satu halaman untuk menyesuaikan. |
| 5 | Alat Pilih Inline / Tanggal-waktu Anda dapat memilih jumlah nilai dalam pemilih inline. Seperti tanggal memiliki tanggal, bulan, tahun dan waktu memiliki jam, menit, detik. |
Deskripsi
Komponen Kalender memungkinkan Anda menangani tanggal dengan mudah dan dapat digunakan sebagai komponen inline atau overlay. Kalender overlay akan diubah menjadi popover di tablet secara otomatis.
Kalender dapat dibuat dan diinisialisasi hanya dengan menggunakan JavaScript. Anda perlu menggunakan metode Aplikasi terkait seperti yang ditunjukkan di bawah ini -
myApp.calendar(parameters)- Metode ini mengembalikan contoh kalender yang diinisialisasi. Ini menerima objek sebagai paramaters.
Tabel berikut menunjukkan penggunaan kalender di Framework7 -
| S.No | Penggunaan & Deskripsi Kalender |
|---|---|
| 1 | Parameter Kalender Framework7 menyediakan daftar parameter yang digunakan dengan kalender. |
| 2 | Metode & Properti Kalender Anda akan mendapatkan variabel instance yang diinisialisasi untuk menggunakan metode dan properti kalender, setelah Anda menginisialisasi kalender. |
| 3 | Akses ke Contoh Kalender Anda dapat mengakses contoh kalender dari penampung HTML-nya ketika Anda menginisialisasi kalender sebagai sebaris. |
Deskripsi
Ini adalah komponen khusus yang digunakan untuk menyegarkan (memuat ulang) konten halaman dengan menariknya.
Kode berikut menunjukkan cara menyegarkan konten halaman -
<div class = "page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
<!-- Default pull to refresh layer-->
<div class = "pull-to-refresh-layer">
<div class = "preloader"></div>
<div class = "pull-to-refresh-arrow"></div>
</div>
<!-- usual content below -->
<div class = "list-block">
...
</div>
</div>Kelas-kelas berikut digunakan dalam penyegaran -
page-content- Memiliki kelas tarik-untuk-menyegarkan-konten tambahan dan diperlukan untuk mengaktifkan tarik untuk menyegarkan.
pull-to-refresh-layer- Ini adalah lapisan tersembunyi, yang digunakan untuk menarik untuk menyegarkan elemen visual dan itu hanya prapemuat dan panah.
data-ptr-distance = "55" - Ini adalah atribut tambahan yang memungkinkan Anda menyetel jarak pemicu 'tarik untuk menyegarkan' khusus dan nilai defaultnya adalah 44 piksel.
Tarik Untuk Menyegarkan Acara
Di 'Tarik untuk Menyegarkan' ada beberapa peristiwa JavaScript, yang diberikan dalam tabel berikut -
| S.No | Deskripsi acara | Target |
|---|---|---|
| 1 | pullstart Ini akan dipicu setiap kali Anda mulai menarik untuk menyegarkan konten. |
Tarik Untuk Menyegarkan konten. |
| 2 | pullmove Ini dipicu saat Anda menarik untuk menyegarkan konten. |
Tarik Untuk Menyegarkan konten. |
| 3 | pullend Ini akan dipicu setiap kali Anda melepaskan tarikan untuk menyegarkan konten. |
Tarik Untuk Menyegarkan konten. |
| 4 | refresh Peristiwa ini akan dipicu saat tarikan untuk menyegarkan masuk ke status "menyegarkan" . |
Tarik Untuk Menyegarkan konten. |
| 5 | refreshdone Ini akan dipicu setelah di-refresh dan kembali ke keadaan awal. Ini akan dilakukan setelah memanggil metode pullToRefreshDone . |
Tarik Untuk Menyegarkan konten. |
Ada metode App yang dapat digunakan dengan Pull to Refresh.
| S.No | Metode & Deskripsi Aplikasi |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) Ini digunakan untuk mengatur ulang konten tarik-untuk-menyegarkan . |
| 2 | myApp.pullToRefreshTrigger(ptrContent) Ini digunakan untuk memicu penyegaran pada tarikan tertentu untuk menyegarkan konten . |
| 3 | myApp.destroyPullToRefresh(ptrContent) Ini digunakan untuk menghancurkan / menonaktifkan tarikan untuk menyegarkan pada tarikan tertentu untuk menyegarkan konten . |
| 4 | myApp.initPullToRefresh(ptrContent) Ini digunakan untuk menginisialisasi / mengaktifkan tarik untuk menyegarkan konten . |
Di mana ptrContent digunakan untuk HTMLElement atau string untuk menarik-untuk-menyegarkan-konten untuk mengatur ulang / memicu atau menonaktifkan / mengaktifkan.
Contoh
Contoh berikut menunjukkan penggunaan komponen penyegaran yang memulai penyegaran konten halaman -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Pull To Refresh</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
</head>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Pull To Refresh</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">apple</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">strawberry</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Mango</div>
</div>
</div>
</li>
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Dummy Content
var fruits = ['mango', 'orange', 'watermelon', 'banana'];
// Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
// Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + fruit + '</div>' +
'</div>' + '</div>' + '</li>';
// Prepend new list element
ptrContent.find('ul').prepend(itemHTML);
// When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
</script>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai pull_to_refresh.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/pull_to_refresh.html dan hasilnya ditampilkan seperti di bawah ini.
Saat pengguna menarik ke bawah, halaman akan disegarkan dengan konten.
Deskripsi
Gulir Tak Terbatas memungkinkan Anda untuk memuat konten tambahan dan melakukan tindakan yang diperlukan saat halaman mendekati bagian bawah.
Tata letak HTML berikut menunjukkan gulir tak terbatas -
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>Tata letak di atas berisi kelas-kelas berikut -
page-content infinite-scroll - Ini digunakan untuk wadah gulir tak terbatas.
data-distance - Atribut ini memungkinkan Anda untuk mengonfigurasi jarak dari bagian bawah halaman (dalam px) untuk memicu peristiwa scroll tak terbatas dan nilai defaultnya adalah 50px.
Jika Anda ingin menggunakan scroll tak terbatas di bagian atas halaman, Anda perlu menambahkan kelas "scroll-top tanpa batas" ke "konten halaman" -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>Acara Gulir Tak Terbatas
infinite- Digunakan untuk memicu saat gulir halaman mencapai jarak tertentu ke bawah. Ini akan menjadi target oleh div class = "page-content infinite-scroll" .
Ada dua metode Aplikasi yang dapat digunakan dengan wadah gulir tak terbatas -
Untuk menambahkan pemroses acara gulir tak terbatas ke penampung HTML yang ditentukan, gunakan metode berikut -
myApp.attachInfiniteScroll(container)Anda dapat menghapus pemroses kejadian gulir tak terbatas dari penampung HTML yang ditentukan dengan menggunakan metode berikut -
myApp.detachInfiniteScroll(container)Di mana parameter diperlukan, opsi digunakan sebagai HTMLElement atau string untuk wadah gulir tak terbatas.
Contoh
Contoh berikut menunjukkan gulir tak terbatas yang memuat konten tambahan saat gulir laman mendekati bagian bawah -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>infinite_scroll</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center sliding">Infinite Scroll</div>
<div class = "right"> </div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "home" class = "page">
<div class = "page-content infinite-scroll">
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 1</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 2</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 3</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 4</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 5</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 6</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 7</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 8</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 9</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 10</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 11</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 12</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 13</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 14</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 15</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 16</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 17</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 18</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 19</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 20</div>
</div>
</li>
</ul>
</div>
<div class = "infinite-scroll-preloader">
<div class = "preloader"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
.infinite-scroll-preloader {
margin-top:-20px;
margin-bottom:10px;
text-align:center;
}
.infinite-scroll-preloader .preloader {
width:34px;
height:34px;
}
</style>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Loading flag
var loading = false;
// Last loaded index
var lastIndex = $$('.list-block li').length; // Max items to load var maxItems = 60; // Append items per load var itemsPerLoad = 20; // Attach 'infinite' event handler $$('.infinite-scroll').on('infinite', function () {
// Exit, if loading in progress
if (loading) return;
// Set loading flag
loading = true;
// Emulate 1s loading
setTimeout(function () {
// Reset loading flag
loading = false;
if (lastIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
myApp.detachInfiniteScroll($$('.infinite-scroll')); // Remove preloader $$('.infinite-scroll-preloader').remove();
return;
}
// Generate new items HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">
Item ' + i + '
</div>
</div>
</li>';
}
// Append new items
$$('.list-block ul').append(html); // Update last loaded index lastIndex = $$('.list-block li').length;
}, 1000);
});
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai infinite_scroll.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/infinite_scroll.html dan hasilnya ditampilkan seperti di bawah ini.
Contoh ini memungkinkan pemuatan konten tambahan saat gulir halaman Anda mencapai jarak tertentu ke bawah.
Deskripsi
Pesan merupakan komponen dari Framework7, yang memberikan visualisasi komentar dan sistem pesan dalam aplikasi.
Tata Letak Pesan
Framework7 memiliki struktur tata letak pesan berikut -
<div class = "page">
<div class = "page-content messages-content">
<div class = "messages">
<!-- Defines the date stamp -->
<div class = "messages-date">Monday, Apr 26 <span>10:30</span></div>
<!-- Displays the sent message and by default, it will be in green color on right side -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">Hello</div>
</div>
<!-- Displays the another sent message -->
<div class = "message message-sent">
<!-- Define the text with bubble type -->
<div class = "message-text">How are you?</div>
</div>
<!-- Displays the received message and by default, it will be in grey color on left side -->
<div class = "message message-with-avatar message-received">
<!-- Provides sender name -->
<div class = "message-name">Smith</div>
<!-- Define the text with bubble type -->
<div class = "message-text">I am fine, thanks</div>
<!-- Defines the another date stamp -->
<div class = "messages-date">Tuesday, April 28 <span>11:16</span></div>
</div>
</div>
</div>Tata letak berisi kelas-kelas berikut di berbagai area -
Tata Letak Halaman Pesan
Tabel berikut menunjukkan kelas tata letak halaman pesan dengan deskripsi.
| S.No | Kelas & Deskripsi |
|---|---|
| 1 | messages-content Ini adalah kelas tambahan yang diperlukan yang ditambahkan ke "konten halaman" dan digunakan untuk pembungkus pesan. |
| 2 | messages Ini adalah elemen yang diperlukan untuk gelembung pesan. |
| 3 | messages-date Ini menggunakan wadah cap tanggal untuk menampilkan tanggal dan waktu pesan dikirim atau diterima. |
| 4 | message Ini adalah satu pesan yang akan ditampilkan. |
Bagian Dalam Pesan Tunggal
Tabel berikut menunjukkan kelas bagian dalam pesan sederhana dengan deskripsi.
| S.No | Kelas & Deskripsi |
|---|---|
| 1 | message-name Ini memberikan nama pengirim. |
| 2 | message-text Tentukan teks dengan tipe gelembung. |
| 3 | message-avatar Ini menentukan avatar pengirim. |
| 4 | message-label Ini menentukan label teks di bawah gelembung. |
Kelas tambahan untuk Single Message Container
Tabel berikut menunjukkan kelas tambahan untuk deskripsi wadah pesan tunggal.
| S.No | Kelas & Deskripsi |
|---|---|
| 1 | message-sent Ini menentukan bahwa pesan dikirim oleh pengguna dan ditampilkan dengan warna latar belakang hijau di sisi kanan. |
| 2 | message-received Ini digunakan untuk menampilkan pesan tunggal yang menunjukkan bahwa, pesan tersebut telah diterima oleh pengguna dan tetap berada di sisi kiri dengan warna latar abu-abu. |
| 3 | message-pic Ini adalah kelas tambahan untuk menampilkan gambar dengan satu pesan. |
| 4 | message-with-avatar Ini adalah kelas tambahan untuk menampilkan satu pesan (diterima atau dikirim) dengan avatar. |
| 5 | message-with-tail Anda dapat menambahkan bubble tail untuk satu pesan (diterima atau dikirim). |
Kelas Tambahan yang Tersedia untuk Pesan Tunggal
Tabel berikut menunjukkan kelas yang tersedia untuk satu pesan dengan deskripsi.
| S.No | Kelas & Deskripsi |
|---|---|
| 1 | message-hide-name Ini adalah kelas tambahan untuk menyembunyikan nama pesan untuk satu pesan (diterima atau dikirim). |
| 2 | message-hide-avatar Ini adalah kelas tambahan untuk menyembunyikan avatar pesan untuk satu pesan (diterima atau dikirim). |
| 3 | message-hide-label Ini adalah kelas tambahan untuk menyembunyikan label pesan untuk satu pesan (diterima atau dikirim). |
| 4 | message-last Anda dapat menggunakan kelas ini untuk menunjukkan pesan terakhir yang diterima atau dikirim dalam percakapan saat ini oleh satu pengirim untuk satu pesan (diterima atau dikirim). |
| 5 | message-first Anda dapat menggunakan kelas ini untuk menunjukkan pesan pertama yang diterima atau dikirim pertama dalam percakapan saat ini oleh satu pengirim untuk satu pesan (diterima atau dikirim). |
Menginisialisasi Pesan dengan JavaScript
Anda dapat menginisialisasi pesan dengan JavaScript dengan menggunakan metode berikut -
myApp.messages(messagesContainer, parameters)Metode ini membutuhkan dua opsi -
messagesContainer - Ini adalah elemen atau string HTML wajib yang menyertakan elemen HTML penampung pesan.
parameters - Ini menentukan objek dengan parameter pesan.
Parameter Pesan
Tabel berikut menunjukkan parameter pesan dengan deskripsi.
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | autoLayout Itu menambahkan kelas tambahan yang diperlukan untuk setiap pesan dengan mengaktifkannya. |
boolean | benar |
| 2 | newMessagesFirst Anda dapat menampilkan pesan di atas daripada menampilkan di bawah dengan mengaktifkannya. |
boolean | Salah |
| 3 | messages Ini menampilkan array pesan di mana setiap pesan harus direpresentasikan sebagai objek dengan parameter pesan. |
Himpunan | - |
| 4 | messageTemplate Ini menampilkan template pesan tunggal. |
tali | - |
Properti Pesan
Tabel berikut menunjukkan properti pesan dengan deskripsi.
| S.No | Deskripsi properti |
|---|---|
| 1 | myMessages.params Anda dapat menginisialisasi parameter yang diteruskan dengan objek. |
| 2 | myMessages.container Mendefinisikan elemen DOM7 dengan wadah HTML bilah pesan. |
Metode Pesan
Tabel berikut menunjukkan metode pesan dengan deskripsi.
| S.No | Metode & Deskripsi |
|---|---|
| 1 | myMessages.addMessage(messageParameters, method, animate); Pesan dapat ditambahkan ke awal atau akhir dengan menggunakan parameter metode. Ini memiliki parameter berikut -
|
| 2 | myMessages.appendMessage(messageParameters, animate); Ini menambahkan pesan ke akhir wadah pesan. |
| 3 | myMessages.prependMessage(messageParameters, animate); Ini menambahkan pesan ke awal wadah pesan. |
| 4 | myMessages.addMessages(messages, method, animate); Anda dapat menambahkan beberapa pesan sekaligus. Ini memiliki parameter berikut -
|
| 5 | myMessages.removeMessage(message); Ini digunakan untuk menghapus pesan. Ini memiliki parameter berikut -
|
| 6 | myMessages.removeMessages(messages); Anda dapat menghapus beberapa pesan. Ini memiliki parameter berikut -
|
| 7 | myMessages.scrollMessages(); Anda dapat menggulir pesan dari atas ke bawah dan sebaliknya tergantung pada parameter pertama dari pesan baru. |
| 8 | myMessages.layout(); Tata letak otomatis dapat diterapkan ke pesan. |
| 9 | myMessages.clean(); Ini digunakan untuk membersihkan pesan. |
| 10 | myMessages.destroy(); Ini digunakan untuk menghancurkan pesan. |
Parameter Pesan Tunggal
Tabel berikut menunjukkan parameter untuk satu pesan dengan deskripsi.
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | text Ini mendefinisikan teks pesan, yang bisa menjadi string HTML. |
tali | - |
| 2 | name Ini menentukan nama pengirim. |
tali | - |
| 3 | avatar Ini menentukan string URL avatar pengirim. |
tali | - |
| 4 | time Ini menentukan string waktu dari pesan seperti '9:45 AM', '18: 35 '. |
tali | - |
| 5 | type Ini memberikan jenis pesan apakah itu bisa dikirim atau diterima pesan. |
tali | terkirim |
| 6 | label Ini mendefinisikan label pesan. |
tali | - |
| 7 | day Ini memberikan string hari dari pesan seperti 'minggu', 'senin', 'kemarin' dll. |
tali | - |
Menginisialisasi Pesan dengan HTML
Anda dapat menginisialisasi pesan dengan HTML tanpa JavaScript dengan menggunakan kelas messages-init tambahan ke pesan dan menggunakan atribut data- untuk meneruskan parameter yang diperlukan seperti yang ditunjukkan dalam cuplikan kode yang diberikan di bawah ini -
...
<div class = "page-content messages-content">
<!-- Initialize the messages using additional "messages-init" class-->
<div class = "messages messages-init" data-auto-layout = "true" data-new-messages-first = "false">
...
</div>
</div>
...Contoh
Contoh berikut menunjukkan penggunaan pesan di Framework7 -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Messages</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed toolbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Messages</div>
<div class = "right"> </div>
</div>
</div>
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea><a href = "#" class = "link">Send</a>
</div>
</div>
<div class = "page-content messages-content">
<div class = "messages">
<div class = "messages-date">Friday, Apr 26 <span>10:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Hello</div>
</div>
<div class = "message message-sent">
<div class = "message-text">Happy Birthday</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Thank you</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
<div class = "messages-date">Saturday, Apr 27 <span>9:30</span></div>
<div class = "message message-sent">
<div class = "message-text">Good Morning...</div>
</div>
<div class = "message message-sent">
<div class = "message-text"><img src = "/framework7/images/gm.jpg"></div>
<div class = "message-label">Delivered</div>
</div>
<div class = "message message-received">
<div class = "message-name">Smith</div>
<div class = "message-text">Very Good Morning...</div>
<div style = "background-image:url(/framework7/images/person.png)" class = "message-avatar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var $$ = Dom7; // It indicates conversation flag var conversationStarted = false; // Here initiliaze the messages var myMessages = myApp.messages('.messages', { autoLayout:true }); // Initiliaze the messagebar var myMessagebar = myApp.messagebar('.messagebar'); // Displays the text after clicking the button $$('.messagebar .link').on('click', function () {
// specifies the message text
var messageText = myMessagebar.value().trim();
// If there is no message, then exit from there
if (messageText.length === 0) return;
// Specifies the empty messagebar
myMessagebar.clear()
// Defines the random message type
var messageType = (['sent', 'received'])[Math.round(Math.random())];
// Provides the avatar and name for the received message
var avatar, name;
if(messageType === 'received') {
name = 'Smith';
}
// It adds the message
myMessages.addMessage ({
// It provides the message text
text: messageText,
// It displays the random message type
type: messageType,
// Specifies the avatar and name of the sender
avatar: avatar,
name: name,
// Displays the day, date and time of the message
day: !conversationStarted ? 'Today' : false,
time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
})
// Here you can update the conversation flag
conversationStarted = true;
});
</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai messages.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/messages.html dan hasilnya ditampilkan seperti di bawah ini.
Saat Anda mengetik pesan ke dalam kotak pesan dan mengklik tombol Kirim, ini menentukan bahwa pesan Anda telah terkirim dan ditampilkan dengan warna latar belakang hijau di sisi kanan.
Pesan yang Anda terima, muncul di sisi kiri dengan latar belakang abu-abu bersama dengan nama pengirim.
Deskripsi
Framework7 menyediakan toolbar khusus yang dapat diubah ukurannya untuk bekerja dengan sistem pesan dalam aplikasi.
Kode berikut menunjukkan tata letak bilah pesan -
<div clas = "toolbar messagebar">
<div clas = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" clas = "link">Send</a>
</div>
</div>Di bilah pesan, bagian dalam "halaman" sangat penting dan berada di sebelah kanan "konten-pesan" -
<div class = "page toolbar-fixed">
<!-- messagebar -->
<div class = "toolbar messagebar">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>
<!-- messages-content -->
<div class = "page-content messages-content">
<div class = "messages">
... messages
</div>
</div>
</div>Anda dapat menggunakan metode berikut untuk menginisialisasi bilah pesan dengan JavaScript -
myApp.messagesbar(messagesbarContainer, parameters)Metode ini memiliki dua opsi -
messagesbarContainer - Ini adalah elemen atau string HTML wajib yang menyertakan elemen HTML kontainer bilah pesan.
parameters - Ini menentukan objek dengan parameter bilah pesan.
Misalnya -
var myMessagebar = app.messagebar('.messagebar', {
maxHeight: 200
});Parameter Bilah Pesan
maxHeight- Digunakan untuk mengatur tinggi maksimum textarea dan akan diubah ukurannya tergantung pada jumlah teksnya. Jenis parameternya adalah angka dan nilai defaultnya adalah null .
Properti Messagebar
Tabel berikut menunjukkan properti bilah pesan -
| S.No | Properti & Deskripsi |
|---|---|
| 1 | myMessagebar.params Anda dapat menentukan objek dengan parameter inisialisasi yang diteruskan. |
| 2 | myMessagebar.container Anda dapat menentukan elemen dom7 dengan elemen HTML penampung pesan. |
| 3 | myMessagebar.textarea Anda dapat menentukan elemen dom7 dengan elemen HTML textarea bilah pesan. |
Metode Messagebar
Tabel berikut menunjukkan metode bilah pesan -
| S.No | Metode & Deskripsi |
|---|---|
| 1 | myMessagebar.value(newValue); Ini menetapkan nilai textarea messagebar / teks dan mengembalikan nilai textarea messagebar, jika newValue tidak ditentukan. |
| 2 | myMessagebar.clear(); Ini membersihkan textarea dan memperbarui / mengatur ulang ukurannya. |
| 3 | myMessagebar.destroy(); Ini menghancurkan contoh bilah pesan. |
Inisialisasi Messagebar dengan HTML
Anda dapat menginisialisasi bilah pesan menggunakan HTML tanpa metode dan properti JavaScript dengan menambahkan kelas messagebar-init ke .messagebar dan Anda dapat meneruskan parameter yang diperlukan menggunakan atribut data- .
Kode berikut menentukan inisialisasi bilah pesan dengan HTML -
<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
<div class = "toolbar-inner">
<textarea placeholder = "Message"></textarea>
<a href = "#" class = "link">Send</a>
</div>
</div>Akses ke Instance Messagebar
Dimungkinkan untuk mengakses contoh bilah pesan, jika Anda menginisialisasinya dengan menggunakan HTML; ini dicapai dengan menggunakan properti bilah pesan f7 dari elemen penampungnya.
var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');Anda dapat melihat contoh Bilah Pesan, yang dijelaskan di tautan ini
Deskripsi
Notifikasi digunakan untuk menampilkan pesan yang diperlukan, yang muncul seperti notifikasi Push (atau Lokal) iOS.
Tabel berikut menunjukkan penggunaan notifikasi secara detail -
| S.No | Penggunaan & Deskripsi notifikasi |
|---|---|
| 1 | Pemberitahuan JavaScript API Pemberitahuan juga dapat ditambahkan atau ditutup dengan JavaScript dengan menggunakan metode aplikasi terkait. |
| 2 | Tata Letak Notifikasi Pemberitahuan Framework7 akan ditambahkan dengan menggunakan JavaScript. |
| 3 | Contoh iOS Framework7 memungkinkan Anda untuk menggunakan berbagai jenis pemberitahuan dalam tata letak iOS Anda. |
| 4 | Contoh Bahan Pemberitahuan Framework7 juga dapat digunakan dalam tata letak material. |
Deskripsi
Pemuatan lambat menunda proses pemuatan gambar Anda pada halaman tertentu. Pemuatan lambat meningkatkan kinerja pengguliran, mempercepat pemuatan halaman, dan menghemat lalu lintas.
Elemen dan gambar pemuatan lambat harus berada di dalam <div class = "page-content"> yang dapat digulir agar berfungsi dengan benar.
Tabel berikut menunjukkan penggunaan lazy load -
| S.No | Penggunaan & Deskripsi pemuatan malas |
|---|---|
| 1 | Pemakaian Pemuatan lambat dapat diterapkan ke gambar, gambar latar belakang, dan dengan efek fade-in. |
| 2 | Init Lazy Load Secara Manual Setelah menginisialisasi halaman, jika Anda menambahkan gambar lazy load secara manual, maka lazy load tidak akan berfungsi dan Anda perlu menggunakan metode untuk memulainya. |
Hal ini dimungkinkan untuk memicu pemuatan gambar secara manual dengan menggunakan malas acara pada malas gambar / elemen seperti gambar di bawah -
$$('img.lazy').trigger('lazy');
$$('div.lazy').trigger('lazy');Contoh
Contoh berikut menunjukkan penggunaan lazy loading di Framework7 -
<!DOCTYPE html>
<html class = "with-statusbar-overlay">
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Lazy Load</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "pages">
<div data-page = "home" class = "page navbar-fixed">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center">Lazy Load</div>
<div class = "right"> </div>
</div>
</div>
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
<p> <img data-src = "/framework7/images/pic4.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic5.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/background.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic6.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt.</p>
<p> <img data-src = "/framework7/images/pic7.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<p> <img data-src = "/framework7/images/pic8.jpg"
width = "100%" class = "lazy lazy-fadeIn"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent laoreet nisl eget neque blandit lobortis. Sed sagittis risus
id vestibulum finibus. Cras vestibulum sem et massa hendrerit maximus.
Vestibulum suscipit tristique iaculis. Nam vitae risus non eros auctor
tincidunt quis vel nulla. Sed volutpat, libero ac blandit vehicula, est
sem gravida lectus, sed imperdiet sapien risus ut neque.</p>
<p><b>Using as background image:</b></p>
<div data-background = "/framework7/images/pic7.jpg"
style = "background: #aaa; height:60vw; background-size-cover"
class = "lazy lazy-fadeIn">
</div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>var myApp = new Framework7();</script>
</body>
</html>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai framework7_lazy_load.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/framework7_lazy_load.html dan hasilnya ditampilkan seperti di bawah ini.
Contoh ini menentukan pemuatan lambat gambar di mana gambar akan dimuat di halaman saat Anda menggulirnya ke bawah.
Deskripsi
Framework7 menyediakan tema warna yang berbeda untuk aplikasi Anda.
Tema warna menyediakan berbagai jenis warna tema yang digunakan untuk bekerja dengan aplikasi dengan lancar seperti yang ditentukan dalam tabel di bawah -
| S.No | Jenis & Deskripsi Tema |
|---|---|
| 1 | Warna Tema iOS Anda dapat menggunakan 10 tema warna iOS default yang berbeda untuk aplikasi tersebut. |
| 2 | Warna Tema Material Framework7 menyediakan 22 tema warna material default yang berbeda untuk aplikasi. |
Menerapkan Tema Warna
Framework7 memungkinkan Anda untuk menerapkan tema warna pada elemen yang berbeda seperti halaman, blok daftar, navbar, tombol-baris dll dengan menggunakan kelas tema- [warna] ke elemen induk.
Contoh
...
</body>
<div class = "page theme-gray">
...
</div>
<div class = "list-block theme-blue">
...
</div>
<div class = "navbar theme-green">
...
</div>
<div class = "buttons-row theme-red">
...
</div>Tema Tata Letak
Anda dapat menggunakan tema tata letak default untuk aplikasi Anda dengan menggunakan dua tema putih dan gelap . Tema dapat diterapkan dengan menggunakan kelas layout- [theme] ke elemen induk.
Contoh
...
</body>
<div class = "navbar layout-white">
...
</div>
<div class = "buttons-row layout-dark">
...
</div>Kelas Helper
Framework7 menyediakan kelas pembantu tambahan, yang dapat digunakan di luar atau tanpa tema seperti yang tercantum di bawah ini -
color-[color] - Dapat digunakan untuk mengubah warna teks blok atau warna tombol, tautan, ikon, dll.
bg-[color] - Ini mengatur warna latar belakang yang telah ditentukan pada blok atau elemen.
border-[color] - Ini mengatur warna perbatasan yang telah ditentukan pada blok atau elemen.
Deskripsi
Garis rambut adalah kelas yang menambahkan batas 1px di sekitar gambar dengan menggunakan kelas batas. Dengan rilis 1.x, garis rambut merevisi kerja dengan : setelah dan : sebelum elemen semu alih-alih menggunakan batas CSS.
Garis rambut berisi aturan berikut -
:after- Elemen semu ini digunakan untuk garis rambut bawah dan kanan .
:before- Elemen semu ini digunakan untuk garis rambut atas dan kiri .
Cuplikan kode berikut menunjukkan penggunaan elemen : after .
.navbar:after {
background-color: red;
}Potongan kode berikut menghapus bilah alat garis rambut bawah -
.navbar:after {
display:none;
}
.toolbar:before {
display:none;
}kelas "tanpa batas"
Garis rambut akan dihapus dengan menggunakan kelas tanpa batas dan didukung di Navbar, bilah alat, kartu, dan elemennya.
Kode berikut digunakan untuk menghilangkan garis rambut dari navbar -
<div class = "navbar no-border">
...
</div>Deskripsi
Template7 adalah mesin JavaScript yang ringan dan mengutamakan seluler, yang mewakili Ajax dan halaman dinamis sebagai template Template7 dengan konteks tertentu dan tidak memerlukan skrip tambahan. Template7 dikaitkan dengan Framework7 sebagai default, mesin template ringan, yang bekerja lebih cepat untuk aplikasi.
Performa
Proses kompilasi string ke fungsi JS adalah segmen paling lambat dari template7. Karenanya, Anda tidak perlu mengkompilasi template berkali-kali, cukup sekali saja.
//Here initialize the app
var myApp = new Framework7();
// After initializing compile templates on app
var searchTemplate = $('script#search-template').html();
var compiledSearchTemplate = Template7.compile(searchTemplate);
var listTemplate = $('script#list-template').html();
var compiledListTemplate = Template7.compile(listTemplate);
// Execute the compiled templates with required context using onPageInit() method
myApp.onPageInit('search', function (page) {
// Execute the compiled templates with required content
var html = compiledSearchTemplate({/*...some data...*/});
// Do stuff with html
});Template7 adalah mesin template ringan yang digunakan sebagai pustaka mandiri tanpa Framework7. File Template7 dapat diinstal dengan dua cara -
Anda dapat mendownload dari repositori github Template7 .
Anda dapat menginstalnya menggunakan perintah berikut melalui Bower -
Atau
bower install template7Deskripsi
Dalam Template7 Anda dapat mengkompilasi template Anda secara otomatis dengan menentukan atribut khusus dalam tag <script>.
Kode berikut menunjukkan tata letak kompilasi otomatis -
<script type = "text/template7" id = "myTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
</script>Anda dapat menggunakan atribut berikut untuk menginisialisasi kompilasi otomatis -
type = "text/template7" - Ini digunakan untuk memberi tahu Template7 untuk melakukan kompilasi otomatis dan ini adalah jenis skrip yang diperlukan.
id = "myTemplate" - Templat dapat diakses melalui id dan merupakan id templat yang diperlukan.
Untuk kompilasi otomatis, Anda perlu mengaktifkan inisialisasi aplikasi dengan meneruskan parameter berikut -
var myApp = new Framework7 ({
//It is used to compile templates on app init in Framework7
precompileTemplates: true,
});Template7.templates / myApp.templates
Template yang dikompilasi secara otomatis dapat diakses sebagai properti Template7.templates setelah menginisialisasi aplikasi. Ini juga dikenal sebagai myApp.templates di mana myApp adalah instance aplikasi yang diinisialisasi.
Anda dapat menggunakan template berikut di file index.html kami -
<script type = "text/template7" id = "personTemplate">
<p>Hello, my name is {{name}} and i am {{age}} years old</p>
<p>I work as {{position}} at {{company}}</p>
</script>
<script type = "text/template7" id = "carTemplate">
<p>I have a great car, it is {{vendor}} {{model}}, made in {{year}} year.</p>
<p>It has {{power}} hp engine with {{speed}} km/h maximum speed.</p>
</script>Anda juga dapat mengakses template di JavaScript setelah inisialisasi aplikasi -
var myApp = new Framework7 ({
//Tell Framework7 to compile templates on app init
precompileTemplates: true
});
// Render person template to HTML, its template is already compiled and accessible as
//Template7.templates.personTemplate
var personHTML = Template7.templates.personTemplate ({
name: 'King Amit',
age: 27,
position: 'Developer',
company: 'AngularJs'
});
// Compile car template to HTML, its template is already compiled and accessible as
//Template7.templates.carTemplate
var carHTML = Template7.templates.carTemplate({
vendor: 'Honda',
model: 'city',
power: 1200hp,
speed: 300
});Deskripsi
Template7 adalah mesin template JavaScript yang memprioritaskan seluler dengan sintaks seperti handlebars.js . Ini adalah mesin templat default yang sangat ringan dan sangat cepat di Framework7.
Pertama, kita perlu meneruskan parameter berikut pada inisialisasi aplikasi yang menjadikan semua halaman Ajax dan dinamis sebagai template Template7 -
var myApp = new Framework7 ({
template7Pages: true // enable Template7 rendering for Ajax and Dynamic pages
});| S.No | Penggunaan & Deskripsi Halaman Template7 |
|---|---|
| 1 | Template / Data Halaman Anda dapat meneruskan data / konteks yang diperlukan untuk halaman tertentu dengan menentukan semua data halaman dalam parameter template7Data , yang dikirim saat menginisialisasi Aplikasi. |
| 2 | Meneruskan Konteks Kustom Framework7 memungkinkan Anda untuk meneruskan konteks kustom ke halaman dinamis atau Ajax yang dimuat. |
| 3 | Muat Template Secara Langsung Anda dapat merender dan memuat template dengan cepat sebagai halaman dinamis. |
| 4 | Kueri URL Jika Anda menggunakan Template7 untuk merender halaman Ajax, konteksnya akan selalu diperluas dengan properti khusus url_query . |
Contoh
Contoh berikut menyediakan tautan, yang menampilkan informasi pengguna seperti detail pengguna, suka pengguna, dll. Saat Anda mengklik tautan tersebut.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Framework7</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Template7 Pages</div>
</div>
</div>
<div class = "pages navbar-through toolbar-through">
<div data-page = "index" class = "page">
<div class = "page-content">
<div class = "list-block">
<ul>
<li>
//plain data objects allow to pass custom context to loaded page using 'data-context-name' attribute
<a href = "#" data-template = "about" data-context-name = "about" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'About'
<div class = "item-title">About</div>
</div>
</a>
</li>
<li>
//a context name for this link we pass context path from template7Data root
<a href = "/framework7/src/likes.html" class = "item-link item-content">
<div class = "item-inner">
//provides link as 'Likes'
<div class = "item-title">Likes</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/template7" id = "about">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">About Me</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "about" class = "page">
<div class = "page-content">
<div class = "content-block">
<div class = "content-block-inner">
//displays the details of the user by using the 'my-app.js' file
<p>Hello, i am <b>{{firstname}} {{lastname}}</b>,
<b>{{age}}</b> years old and working as
<b>{{position}}</b> at <b>{{company}}</b>.</p>
</div>
</div>
</div>
</div>
</div>
</script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script type = "text/javascript"
src = "/framework7/src/js/my-app.js">
</script>
</body>
</html>aplikasi-saya.js
// Initialize your app
var myApp = new Framework7 ({
animateNavBackIcon: true,
// Enable templates auto precompilation
precompileTemplates: true,
// Enabled rendering pages using Template7
template7Pages: true,
// Specify Template7 data for pages
template7Data: {
//provides the url for different page with data-page = "likes"
'url:likes.html': {
likes: [
{
title: 'Nelson Mandela',
description: 'Champion of Freedom'
},
{
title: 'Srinivasa Ramanujan',
description: 'The Man Who Knew Infinity'
},
{
title: 'James Cameron',
description: 'Famous Filmmaker'
}
]
},
about: {
firstname: 'William ',
lastname: 'Root',
age: 27,
position: 'Developer',
company: 'TechShell',
}
}
});
// Add main View
var mainView = myApp.addView('.view-main', {
// Enable dynamic Navbar
dynamicNavbar: true
});like.html
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left sliding">
<a href = "#" class = "back link"> <i class = "icon icon-back"></i><span>Back</span></a>
</div>
<div class = "center sliding">Likes</div>
<div class = "right">
<a href = "#" class = "link icon-only open-panel"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "likes" class = "page">
<div class = "page-content">
<div class = "content-block-title">My Likes</div>
<div class = "list-block media-list">
//iterate through likes
<ul>
{{#each likes}}
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title-row">
//displays the title and description by using the 'my-app.js' file
<div class = "item-title">{{title}}</div>
</div>
<div class = "item-subtitle">{{description}}</div>
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai index.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/index.html dan hasilnya ditampilkan seperti di bawah ini.
Contoh menyediakan tautan, yang menampilkan informasi pengguna seperti detail pengguna, suka pengguna ketika Anda mengklik tautan tersebut.
Deskripsi
Saat Anda mengetuk tautan dan tombol, mereka disorot. Ini dilakukan oleh keadaan aktif di Framework7.
- Ini berperilaku seperti aplikasi asli, tidak seperti aplikasi web ..
- Ini memiliki perpustakaan klik Cepat built-in dan itu harus diaktifkan.
- The aktif-negara kelas adalah sama dengan CSS : aktif pemilih.
- Status aktif diaktifkan dengan menambahkan kelas watch-active-state ke elemen <html> .
Kode berikut digunakan untuk status aktif dalam gaya CSS -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}Kode berikut menunjukkan kompatibilitas fallback, ketika status Aktif atau Klik cepat dinonaktifkan -
/* Usual state */
.my-button {
color: red;
}
/* Active/tapped state */
.my-button.active-state {
color: blue;
}
/* Fallback, when active state is disabled */
html:not(.watch-active-state) .my-button:active {
color: blue;
}Deskripsi
Peristiwa Ketuk tahan digunakan untuk memicu (mengaktifkan) setelah berkelanjutan dan menyelesaikan acara sentuh sehingga hanya itu yang disebut acara ketuk tahan . The Tab Tahan adalah built-inFast Clicks Perpustakaan.
Parameter berikut digunakan untuk menonaktifkan atau mengaktifkan dan dikonfigurasi secara default -
| S.No | Parameter & Deskripsi | Tipe | Default |
|---|---|---|---|
| 1 | tapHold Untuk mengaktifkan peristiwa ketuk tahan saat disetel ke true. |
boolean | Salah |
| 2 | tapHoldDelay Ini menentukan durasi menahan ketukan sebelum memicu acara taphold pada elemen target. |
jumlah | 750 |
| 3 | tapHoldPreventClicks Acara tap tahan tidak akan diaktifkan setelah mengklik acara tersebut. |
boolean | benar |
Kode berikut digunakan untuk mengaktifkan acara ketuk tahan -
var myApp = new Framework7 ({
tapHold: true //enable tap hold events
});
var $$ = Dom7;
$$('.some-link').on('taphold', function () {
myApp.alert('Tap hold fired!');
});Deskripsi
Touch Ripple adalah efek yang hanya didukung dalam tema material Framework7. Secara default, ini diaktifkan di tema material dan Anda bisa menonaktifkannya dengan menggunakan parameter materialRipple: false .
Elemen Riak
Anda dapat mengaktifkan elemen riak untuk mencocokkan beberapa pemilih CSS seperti -
- ripple
- a.link
- a.item-link
- .button
- .tab-link
- .label-radio
- .label-checkbox dll.
Ini ditentukan dalam parameter materialRippleElements . Anda perlu mengaktifkan touch ripple, menambahkan pemilih elemen ke parameter materialRippleElements untuk menggunakan efek riak, atau cukup gunakan kelas riak .
Warna Gelombang Riak
Warna riak dapat diubah pada elemen dengan menambahkan kelas riak- [color] ke elemen.
Misalnya -
<a href = "#" class = "button ripple-orange">Ripple Button</a>atau Anda dapat menentukan warna gelombang riak dengan menggunakan CSS seperti yang ditunjukkan di bawah ini -
.button .ripple-wave {
background-color: #FFFF00;
}Nonaktifkan Elemen Ripple
Anda bisa menonaktifkan ripple untuk beberapa elemen tertentu dengan menambahkan kelas tanpa-riak ke elemen tersebut. Misalnya -
<a href = "#" class = "button no-ripple">Ripple Button</a>