Bootstrap 3 Singkat: Fitur JavaScript yang Diubah

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Ketika berhubungan dengan JavaScript di BS3, tidak banyak yang berubah; sebagian besar perubahan yang telah kita lihat sejauh ini adalah berkisar pada CSS dan bagian komponen. Ada alasan untuk ini.

Sebagian besar fungsi JavaScript BS2 (dan dalam hal ini, BS3) datang dalam bentuk atribut data. Dalam sebagian besar kasus, kita sudah melihat bagaimana menggunakannya di berbagai bagian dari komponen, yang hanya benar-benar menyisakan sedikit yang khusus untuk JavaScript.

Oleh karena itu, dalam tutorial ini, saya akan hanya akan sedikit menunjukkan sebagian dari apa yang tersedia, dan tidak akan ada deskripsi lain di tempat lain dalam seri ini, yang menunjukkan contoh singkat tentang cara menggunakan API yang tersedia.

Fasilitas JS yang tersedia di BS2 dan BS3 sangat bisa dikembangkan, dan bahkan pada serangkaian penuh tutorial mungkin tidak akan bisa mencakup segala sesuatunya. Oleh karena itu sangat saya sarankan untuk pergi ke situs Bootstrap dan membaca pada bagian JavaScript.

Modals

Hal pertama yang orang sebutkan ketika subjek JavaScript muncul di Bootstrap adalah kotak modal dialog—dan itu adalah sebuah kejutan kecil.

Kotak modal pada BS3 adalah salah satu yang termudah (dan terkaya) implementasinya yang terlihat di banyak framework HTML5 browser modern.

Menggunakannya mudah, tetapi sayangnya, memerlukan cukup banyak markup.

Kode berikut memberikan contoh yang sangat dasar:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Show Modal Dialog
</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">Modal Body</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Some Action</button>
      </div>
    </div>
  </div>
</div>

Modal example produced by sample — Contoh modal yang diproduksi oleh sampel

Untuk menampilkan modal, pertama Anda harus memiliki target pemicu. Dalam contoh di atas, adalah tombol Show Modal Dialog. Agar pemicu aksi bekerja harus memiliki toggle dan target data atribut yang diberikan, dan toggle harus memiliki nilai "modal" untuk menunjukkan bahwa ini adalah target modal dialog. Target harus memiliki ID selector dari <div> terluar yang ditugaskan untuk itu.

Dalam contoh ini, <div> terluar memiliki ID="myModal" di dalamnya, yang berarti data atribut untuk target harus #myModal sebagai nilainya.

Pemicu Anda tidak harus sebuah tombol; bisa apa pun yang dapat menerima (atau diatur untuk menerima) mouse klik, selama toggle dan atribut data target disediakan.

Setelah kita masuk ke modal itu sendiri, Anda akan melihat struktur bersarang <div> yang cukup dalam. Karena struktur ini, dianjurkan Anda membuat dan menempatkan definisi dialog modal Anda sedekat mungkin dengan permulaan body; Jika tidak, maka akan ada kemungkinan dapat menyebabkan masalah tata letak komponen lainnya dan struktur HTML yang tidak Anda antisipasi.

Anda juga akan melihat sekali lagi, ada tema umum untuk menandai hal-hal yang membuat ramah untuk screen readers, dan sekali lagi, saya tidak bisa memaksa lagi: Anda harus membuat setiap usaha untuk memastikan markup Anda ramah kepada alat aksesibilitas sebanyak mungkin.

Modal dimulai dengan <div> luar dan class modal diterapkan kepadanya. Ada opsional, Anda juga dapat menambahkan fade, yang akan memberikan transisi halus yang bagus pada modal ketika menampilkan dan menyembunyikan. Bagian luar <div> ini harus menjadi dimana Anda menetapkan Z-Order dan hal lain dalam cara penyesuaian modal global yang ingin Anda buat.

<div> berikutnya harus memiliki tambahan class modal-dialog kepadanya. <div> itu kemudian harus segera diikuti oleh <div> ketiga dengan class modal-content yang ditujukan kepadanya. Di dalam <div> ketiga ini di mana Anda benar-benar menempatkan definisi konten modal Anda.

Setelah kerangka konten modal Anda didefinisikan, Anda dapat kemudian menempatkan tiga <div> elemen lebih lanjut dengan kelas berikut: modal-header, modal-body dan modal-footer. Ketiga bagian ini TIDAK boleh saling bersarang, tapi ditambahkan ke markup sejajar satu sama lain, dan digunakan untuk menentukan konten untuk tiga bagian utama dari dialog.

Anda dapat melihat dari contoh kode di atas bahwa kami menyertakan penutup silang, seperti yang kita lakukan pada alert box. Satu-satunya pembeda antara tanda penutupan ini dan yang kita lihat sebelumnya adalah bahwa atribut data dismiss memiliki nilai modal dan bukan alert. Setiap elemen yang dapat diklik yang ditempatkan dalam markup modal bagian dalam yang memiliki atribut data ini, dengan nilai ini, akan menutup dialog ketika diklik.

Selain ikon tutup, sisa konten modal bagian dalam adalah hanya markup BS3 normal dan CSS. Apapun yang dapat Anda gunakan di tempat lain dapat Anda gunakan di dalam modal, dan jika itu terlalu tinggi untuk layar, Anda akan mendapatkan wadah bagian dalam secara otomatis beralih ke sebuah elemen yang dapat digulirkan.

Ada dua ukuran lebar opsional; ini ditambahkan ke modal-dialog <div> bagian dalam yaitu modal-lg dan modal-sm. Class ukuran besar memperluas lebar modal menjadi setengah dari lebar layar (ideal untuk tabel dan daftar), sedangkan ukuran kecil menyusutkan lebar standarnya kira-kira setengah dari ukuran aslinya (ideal untuk hal-hal seperti pertanyaan ya/tidak).

Anda juga dapat menginisialisasi modal menggunakan API JavaScript dalam mode standar jQuery; jika Anda ingin mengubah perilaku opsi standar, maka satu-satunya cara adalah menggunakan konstruktor JQ.

$('#myModal').modal({
  backdrop: true/false,
  keyboard: true/false,
  show: true/false,
  remote: 'path to url that returns content'
});

Pilihan yang dapat diubah adalah sebagai berikut:

backdrop: Boolean true atau false untuk menyertakan atau tidak latar belakang gelap transparan pada halaman ketika modal ditampilkan; jika ditetapkan nilai static, maka latar belakang akan ditampilkan tetapi TIDAK menutup modal ketika diklik, seperti halnya jika menggunakan true.
keyboard: Boolean true atau false; memungkinkan atau tidak memungkinkan tombol escape untuk menutup modal.
show: Boolean true atau false, secara otomatis menampilkan dialog atau tidak sesaat setelah sudah diinisialisasi.
remote: String yang berisi url untuk mendapatkan konten bagian dalam untuk tubuh dialog; jika disertakan, dialog akan meminta url untuk memasok potongan HTML untuk digunakan dalam tubuh modal.

Ada juga sejumlah cara yang difungsikan untuk beberapa tindakan, tetapi mereka berada di luar cakupan tutorial ini.

Tabs

Jika Anda ingat, kembali di bagian navigasi dasar, saya menyebutkan bahwa komponen tab dapat diubah dengan tambahan markup untuk benar-benar menangani pergantian panel konten untuk Anda.

Untuk melakukan mark-up dari sekelompok tab yang berubah secara otomatis menggunakan JavaScript, pertama kali Anda perlu membuat <ul> dengan cara yang sama seperti yang ditunjukkan di bagian komponen navigasi. <ul> ini harus memiliki elemen <a> yang berada di dalam masing-masing elemen <li>, dengan setiap href menunjuk ke id dari masing-masing <div> terkait yang mengatur panel tab. Anda juga perlu untuk memastikan bahwa setiap tautan memiliki atribut data toggle padanya dan nilainya diatur ke tab.

Setelah Anda membuat set navigasi, Anda perlu untuk membuat <div> luar dan menetapkan class tab-content untuknya. Di dalam <div> ini, Anda perlu untuk membuat beberapa <div> sejajar yang terpisah, masing-masing dengan class tab-pane dan atribut id sesuai dengan tab terkait dalam set navigasi. Opsional, Anda juga dapat menambahkan fade in untuk memudarkan tab ketika mereka berganti, dan active untuk menandai tab yang saat ini telah ditampilkan.

Kode berikut memperlihatkan sebuah contoh dari ini:

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">
    <h1>We self-actualize, we believe, we are reborn</h1>
    <p>By refining, we live ...</p>
  </div>
  <div class="tab-pane" id="tab2">
    <h1>We exist as four-dimensional superstructures</h1>
    <p>Today, science tells us that the ...</p>
  </div>
  <div class="tab-pane" id="tab3">
    <h1>The goal of morphogenetic fields is to plant ...</h1>
    <p>You and I are life forms of the quantum soup ...</p>
  </div>
</div>

Tab set produced by code sample — Set tab yang dihasilkan oleh contoh kode

Tab control tidak memiliki konstruktor yang mengambil pilihan seperti modal, tetapi memiliki panggilan API sehingga Anda dapat memberitahu tab mana untuk ditampilkan secara pemrograman. Untuk melakukan ini, Anda hanya perlu menggunakan jQuery untuk memilih selector yang sesuai, dan kemudian memanggil tab('show') kepadanya. Ketika hal ini dilakukan, tab Anda secara otomatis akan membuat tab yang direferensikan yang dipilih. Sama dengan modal (dan lainnya), ada acara yang tersedia untuk memberitahu Anda ketika hal-hal berubah; rincian dan parameter masing-masing panggilan dapat ditemukan di dokumentasi BS3.

Tooltips dan Popovers

Semua orang suka tooltips—tag pop-up kecil sederhana yang dapat digunakan untuk bantuan dan tugas deskriptif sederhana lainnya.

Menggunakan tooltip di BS3 sangatlah mudah. Cukup menetapkan atribut data toggle dengan nilai tooltip pada setiap elemen HTML standar yang Anda inginkan untuk menampilkan tooltipnya. Untuk menentukan teks tooltip, tambahkan atribut title yang berisi teks yang diinginkan, dan opsional, menambahkan atribut data yang disebut placement yang bernilai left, top, bottom atau right yang diperlukan, tergantung pada arah mana Anda ingin tooltip ditunjukkan.

Kode berikut akan membuat tombol sederhana dengan tooltip di atasnya:

1	<button id="mybutton" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="I am a tooltip!!">The button with a tooltip</button>

Ada satu pengecualian kecil yang berlaku untuk tooltips, yang tidak berlaku pada elemen lain: Anda perlu menginisialisasi tooltips sendiri. Anda dapat menambahkan berbagai pilihan mereka kepadanya di saat yang sama (mirip dengan modal), tetapi Anda HARUS menginisialisasi mereka, atau tooltips tidak akan muncul.

Untuk menginisialisasi tombol yang ditampilkan dalam contoh sebelumnya, tempatkan baris JavaScript berikut di suatu tempat di halaman Anda sehingga dijalankan ketika DOM sudah siap dan tombol telah dibuat:

1	$('#mybutton').tooltip();

Itu adalah sepenuhnya terserah bagaimana Anda memilih masing-masing tombol. Anda bisa, misalnya, memilih mereka semua melalui jenis elemen mereka, tetapi Anda harus memanggil tooltip() pada setiap unsur yang memiliki tooltip terpasang.

Jika semuanya bekerja seperti yang diharapkan, Anda seharusnya melihat sesuatu seperti ini:

Button with accompanying tooltip — Tombol disertai tooltip

Yang dekat di belakang tooltip adalah popover, dan seperti tooltip, harus diinisialisasi secara manual dengan panggilan popover(). Perbedaan utama antara popover dan tooltip adalah bahwa popovers dapat menyimpan konten yang lebih daripada tooltip.

Tooltip biasanya hanya memiliki satu baris teks, sederhana, sedangkan popover lebih besar dan dapat berisi beberapa elemen HTML, mulai dari paragraf ke tombol dan gambar.

Perbedaan kedua adalah bahwa elemen harus diklik sebelum menampilkan popover, sedangkan tooltip otomatis berdasarkan hover.

Anda membuat popover dengan cara yang hampir sama dengan sebuah tooltip, kecuali bahwa konten popup ditentukan dalam atribut data yang disebut content, dan atribut title yang digunakan untuk memberikan area judul mini popover (mirip dengan cara area header digunakan pada komponen panel). Kode berikut memperlihatkan bagaimana mendefinisikan popover sederhana:

<button id="mybutton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="I am the pop over contents, and I'm awesome." title="Popover Title">

  I am a button with a pop over

</button>

Sama dengan tooltip, di suatu tempat di start-up dokumen Anda, Anda juga perlu untuk memastikan Anda menginisialisasi komponen menggunakan sesuatu seperti:

1	$('#mybutton').popover();

Juga seperti tooltip, Anda dapat menambahkan sebuah obyek dengan pilihan di sini. Ada banyak tersedia, jadi sekali lagi, saya mendorong Anda untuk membaca dokumentasi BS3 untuk mempelajari semuanya.

Jika semuanya bekerja, Anda seharusnya dapat menampilkan halaman Anda dan melihat ini:

BS3 button with a popover attached — Tombol BS3 dengan popover terpasang

Collapsible Panels

Sayangnya, salah satu hal yang dihapus di BS3, adalah komponen accordion siap pakai. Namun, sebagai gantinya, adalah sesuatu yang lebih baik: collapsible panel.

Menggunakan panel ini, masih semudah membuat accordion standar, tetapi mereka sekarang secara terpisah juga bisa digunakan, komponen yang berdiri sendiri, yang memungkinkan Anda untuk melakukan hal-hal seperti membuat area informasi yang terlipat, toolbar, dan banyak lagi.

Satu hal yang perlu dicatat, bagaimanapun: jika Anda melakukan pembangunan kustom, Anda juga harus memastikan bahwa Anda menyertakan plugin JavaScript transition helper. Dokumentasi BS3 memiliki lebih banyak informasi yang Anda butuhkan jika Anda melakukan pembangunan kustom.

Untuk membuat accordion dari collapsible panels, Anda hanya perlu membuat <div> luar dengan class panel-group dan memberikannya id. Kemudian, di dalam itu, Anda memerlukan serangkaian tag <div> ditandai seperti yang ditunjukkan sebelumnya di bagian komponen panel, dengan setiap div panel yang menjadi satu panel mandiri.

Setelah Anda meletakkan panel Anda, Anda hanya perlu menambahkan panel-title di dalam panel-header. Header ini harus berisi tag <a> dengan dua data atribut yang ditetapkan: satu disebut data-toggle, dan satu disebut data-parent.

Atribut toggle harus memiliki nilai collapse, dan atribut induk harus mengandung id dari <div> luar yang memegang kelompok panel, dan href dengan id target tubuh panel yang harus menjadi objek dari collapse. Masing-masing panel target harus memiliki class panel-collapse dan collapse yang ditugaskan kepada mereka.

Kode berikut memperlihatkan bagaimana untuk mencapai hal ini:

<div class="panel-group" id="newAccordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#newAccordion" href="#panelOne">
          Consciousness is the richness of truth, and of us
        </a>
      </h4>
    </div>
    <div id="panelOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Aromatherapy may be the solution to what's ...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#newAccordion" href="#panelTwo">
          The planet is radiating four-dimensional superstructures
        </a>
      </h4>
    </div>
    <div id="panelTwo" class="panel-collapse collapse">
      <div class="panel-body">
        It is time to take chi to the next level ...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#newAccordion" href="#panelThree">
          Reality has always been radiating messengers whose souls are opened by stardust
        </a>
      </h4>
    </div>
    <div id="panelThree" class="panel-collapse collapse">
      <div class="panel-body">
        Self-actualization requires exploration ... 
      </div>
    </div>
  </div>
</div>

Accordion replacement produced by sample — Penggantian accordion yang dihasilkan oleh sampel

Seperti yang disebutkan, panel tidak perlu dikelompokkan; mereka dapat digunakan dalam mode tunggal dengan hanya satu elemen sebagai pemicu untuk jadi melipat. Misalnya, jika Anda ingin menutup sebuah panel hanya menggunakan sebuah tombol sederhana, hanya pastikan bahwa tombol Anda memiliki data atribut toggle dengan nilai collapse dan atribut data yang disebut target dengan selector panel target sebagai nilainya.

Carousel

Untuk mengakhiri tutorial ini, plugin JavaScript terakhir yang akan saya perkenalkan adalah carousel yang dirancang baru. BS2 memiliki carousel, tapi seperti accordion, saat ini sudah dihapus dan dibuat sesederhana mungkin untuk menjadikannya lebih mudah digunakan.

Biasanya, plugin carousel digunakan di bagian atas halaman untuk menyediakan sebuah gambar spanduk berputar, dan dalam BS2, ini adalah satu-satunya kegunaan carousel. Namun, dalam BS3, konten apa pun yang dapat ditempatkan di dalam panel carousel yang akan diputar, termasuk gambar, teks, svg, dan banyak lagi.

Kode berikut memperlihatkan contoh dasar bagaimana membangun carousel:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img data-src="holder.js/1140x500/sky" />
      <div class="carousel-caption">
        <h3>You and I are beings of the planet</h3>
        <p>Spacetime is a constant. Will requires exploration</p>
      </div>
    </div>
    <div class="item">
      <img data-src="holder.js/1140x500/vine" />
      <div class="carousel-caption">
      <h3>Nothing is impossible</h3>
        <p>Stardust requires exploration. You and I are storytellers of the cosmos</p>
      </div>
    </div>
    <div class="item">
      <img data-src="holder.js/1140x500/lava" />
      <div class="carousel-caption">
        <h3>You and I are beings of the planet</h3>
        <p>Spacetime is a constant. Will requires exploration</p>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Carousel produced by code sample — Carousel yang dihasilkan oleh contoh kode

Ada beberapa objek JavaScript yang lebih rendah, tetapi kebanyakan dari mereka tidak dapat langsung digunakan oleh pengguna kode normal, dan biasanya hanya digunakan dalam keadaan khusus. Dokumentasi BS3 menutupi segala sesuatu yang saya lewatkan, dan jika Anda ingin menggali sangat dalam ke fasilitas JavaScript yang tersedia, akan sangat dibutuhkan untuk membaca keseluruhan dan pemahaman tentang bagaimana semuanya terhubung bersama-sama.

Satu catatan terakhir: plugin JavaScript BS3 tidak lebih dari jQuery plugin biasa (BS menggunakan jQuery di dalamnya). Yang berarti akan sangat mudah untuk mengambil plugin jQuery favorit Anda dari tempat-tempat seperti unheap.com dan cukup mudah menyesuaikannya agar bekerja dengan BS3. Jangan lupa masih ada sejumlah besar add-on yang sudah tersedia di luar sana, terutama untuk digunakan dengan framework, yang bisa didapatkan hanya dengan menggunakan pencarian Google.

Tutorial ini merupakan sebuah bab dari Bootstrap 3 Singkat, eBook gratis dari tim di Syncfusion.