Saya yakin bahwa bukan hanya saya saja yang menginginkan fitur Modal (kotak dialog) di Twitter Bootstrap 3 bisa digeser letaknya maupun diperbesar ukuran jendelanya. Banyak Web Developer yang sudah lama berharap agar kotak dialog Modal di Twitter Bootstrap memiliki kemampuan tadi. Tapi sayang, sampai dengan versi 3.3.4 hari ini, Twitter Bootstrap belum memiliki kemampuan itu. Padahal, Aplikasi Web yang dihasilkan oleh PHPMaker pun sudah lama menggunakan CSS Framework yang satu ini.
Penasaran akan hal ini, akhirnya dalam dua hari terakhir ini saya bereksperimen untuk mengoptimalkan penggunaan AlertifyJS di Aplikasi Web yang dihasilkan oleh PHPMaker. Cukup menantang memang, apalagi sejak mengetahui fitur-fiturnya yang sangat powerful dan flexible. Tidak hanya itu saja, pengalaman mengintegrasikan Javascript Framework (begitu kata web-nya) yang satu ini ke dalam Masino Extensions pun sangat mengasyikkan.
Beberapa perbandingan antara kotak dialog Modal di Twitter Bootstrap 3 dan AlertifyJS dapat saya jelaskan sebagai berikut.
Pertama, kalau di Modal bawaan Twitter Bootstrap 3, semua konten akan ditampilkan di atas permukaan kotak dialog itu sendiri. Akibatnya jika kontennya lebih banyak dari yang bisa ditampilkan dalam satu layar, akan muncul scroll di jendela browser. Pengguna harus melakukan scroll melalui browser. Sedangkan jika menggunakan AlertifyJS, maka kita dapat membuat supaya scroll ditampilkan di sisi kotak dialog, dan bukan di browser. Hal ini tentu saja lebih nyaman bagi Pengguna, karena tinggi jendela kotak dialog masih lebih kecil dari tinggi jendela browser.
Kedua, kalau di Modal bawaan Twitter Bootstrap 3, jendela dialog tidak dapat digeser, sehingga jika seandainya kita menampilkan lebih dari satu Modal, maka akan terlihat menumpuk di satu titik posisi yang sama. Ini tentu saja terlihat kurang profesional, karena kita harus menutup kotak dialog yang satu agar dapat melihat kotak dialog yang lainnya. Solusinya, maka di AlertifyJS dapat diatasi dengan membuat kotak dialog yang dapat digeser, sehingga antara kotak dialog yang satu dengan lainnya bisa tetap ditampilkan, dan Pengguna dapat membuat kotak dialog tertentu yang diinginkan berada paling atas secara bergantian. Keren, kan? 🙂
Untuk kondisi yang kedua tadi, saya pun jadi teringat kembali dengan kotak dialog milik YUI (Yahoo User Interface) yang pernah digunakan oleh PHPMaker versi 9 dan sebelumnya, di mana di YUI kotak dialog-nya bisa digeser dan ditampilkan lebih dari satu, tanpa harus menutup kotak dialog yang dibuka sebelumnya. Meskipun demikian, tentu ada perbedaan antara AlertifyJS dengan kotak dialog bawaan YUI. Kalau AlertifyJS memiliki kemampuan untuk membuat posisi kotak dialog manapun yang berada di posisi paling atas secara bergantian, sedangkan kalau di YUI tidak bisa. Selain itu, AlertifyJS sifatnya responsif di perangkat mobile seperti Handphone atau Tablet, sedangkan YUI tidak.
Puji Tuhan, hari ini saya sudah berhasil menerapkan AlertifyJS untuk menampilkan kotak dialog Help Online, Terms and Conditions, maupun About Us di Aplikasi Web yang dihasilkan oleh PHPMaker. Kalau dua hari yang lalu saya sudah berhasil menerapkannya untuk menampilkan kotak dialog hanya sebatas untuk Alert dan Confirm, maka hari ini saya berhasil mengembangkannya lagi menggantikan kotak dialog Modal bawaan Twitter Bootstrap 3 untuk ketiga fungsi kotak dialog di atas tadi.
Berikut ini beberapa fitur yang sudah dibuktikan oleh kotak dialog AlertifyJS di Aplikasi Web yang dihasilkan oleh PHPMaker:
- Bisa digeser, dengan menyeret pada bagian header/title-nya.
- Bisa dilengketkan (Pin) atau dilepas lengketannya (Unpin), dengan mengklik icon Pin atau Unpin di bagian header/title-nya.
- Bisa di-maximize dan di-restore, dengan mengklik icon Maximize atau Restore di bagian header/title-nya.
- Bisa di-resize, dengan menyeret pojok sebelah kanan bawah dari jendela kotak dialog-nya ke arah luar atau dalam.
- Mobile responsive, artinya jika sebelumnya ukuran kotak dialog-nya sudah berubah maupun letaknya pun sudah berubah dari letak semula, ketika jendela browser di-resize, maka ukuran kotak dialog dan posisinya akan otomatis menyesuaikan dengan ukuran jendela browser. Artinya, analog dari kemampuan ini bisa ditampilkan dengan nyaman di perangkat mobile (HP, Tablet, IPhone, dsb).
- Transition Effects, ada beberapa pilihan efek transisi pemunculannya di layar, yaitu: pulse, slide, zoom, fade, flipx, dan flipy.
Semua fitur di atas sudah berhasil dibungkus dalam Masino Extensions. Jika Anda sudah menjadi Member, maka bisa men-download-nya melalui situs I Love PHPMaker. Pastikan Anda sudah men-download ulang semua Extensions untuk PHPMaker yang terakhir saya perbarui hari ini. Supaya lebih aman, download ulang semua file Masino Extensions untuk PHPMaker versi 11.
Dengan diterapkannya fitur ini di Aplikasi Web yang dihasilkan oleh PHPMaker, maka semakin naik kelas pula Aplikasi Web yang Anda bikin dengan menggunakan PHPMaker. Tampilannya pun cantik, enak dan nyaman dilihat, serta sangat responsif dengan aksi dari Pengguna maupun ketika diakses dari perangkat yang lebar layarnya sempit. Kita sebagai Web Developer bahkan dapat menerapkannya di semua Aplikasi Web yang dihasilkan oleh PHPMaker dengan sangat mudah, cepat, dan lagi-lagi… menyenangkan! 🙂
Penasaran ingin melihat demonya? Silahkan klik di sini. Klik icon Tanda Tanya (?) untuk menampilkan jendela dialog Help Online, klik juga link Terms and Conditions, dan About Us untuk mencoba tiga jendela kotak dialog AlertifyJS ditampilkan. Cobalah bermain-main dengan menggeser, me-resize, me-maximize/restore, dan mengubah posisi jendela dialog berada pada posisi paling atas.
Menutup tulisan ini dan berharap dapat membantu para Web Developer yang sedang mencari-cari fitur seperti ini, berikut beberapa kata kunci untuk menerapkan Kotak Dialog yang memiliki kemampuan untuk digeser, diubah ukuran jendelanya, dilengketkan, dan diperbesar jendelanya:
– twitter bootstrap 3 modal yang bisa digeser
– twitter bootstrap 3 modal yang bisa diperbesar
– twitter bootstrap 3 modal yang bisa lengket
– twitter bootstrap 3 modal draggable
– twitter bootstrap 3 modal position
– twitter bootstrap 3 modal resizable
– twitter bootstrap 3 modal pin/unpin
Semoga bermanfaat, yaaaa… PHPMaker, gitu lho! 😀
Tinggalkan Balasan