Menjelaskan Tentang Interchange dan Contoh Skrip Coding Interchange HTML Pada Foundation
Interchange
Interchange digunakan untuk membuat konten yang responsive, seperti menampilkan gambar dengan sumber yang berbeda pada setiap ukuran layar yang berbeda. Misalnya pada ukuran layar besar mengambil gambar yang ukuranya besar, sedangkan pada ukuran layar kecil diganti dengan gambar yang ukuranya lebih kecil sehingga tidak membebani perangkat dalam menampilkan gambar.
.jpg)
Interchange merupakan fasilitas foundation yang memerlukan file javascript, sehingga untuk menggunakannya harus memanggil file foundation.min.js atau memanggil secara individu yaitu dengan memanggil file foundation.js dan foundation.interchange.js.
Interchange dibuat dengan menambahkan data attribut data-interchange dengan format sebagai berikut:
<div data-interchange=" [path_file, (media query) ] "></div>
Pada skrip di atas path_file diisi dengan letak file yang dimasukkan ke konten. Sedangkan media_query diisi dengan media query atau diwakili dengan namanya. Daftar media query dan namanya dapat dilihat.
File yang dimasukkan ke dalam konten bisa berupa file HTML atau file gambar. Berikut contoh file yang menggunakan interchange dengan konten berupa gambar,
Skrip interchange.html
<div class="row">
<div class="large-12">
<img data-interchange=" [gambar/small.jpg, (small) ] ,
[gambar/medium.jpg, (medium) ] ,
[gambar/large.jpg, (large) ] ">
<div data-interchange=" [gambar/small.jpg, (small) ] ,
[gambar/medium.jpg, (medium) ] ,
[gambar/large.jpg, (large) ] " class="panel">
Gambar menjadi background jika menggunakan tag div.
</div>
</div>
</div>
Artikel Terkait: Cara Meratakan Text di Foundation!
Post a Comment for "Menjelaskan Tentang Interchange dan Contoh Skrip Coding Interchange HTML Pada Foundation"