Seperti yang sudah kita ketahui, ada begitu banyak fitur antar muka yang canggih sekaligus terlihat profesional di Aplikasi Web yang dihasilkan oleh PHPMaker. Salah satu di antaranya adalah tombol Dropdown yang dapat mengelompokkan beberapa menu atau tombol di dalamnya.
Di samping terlihat profesional, fungsi tombol ini juga bisa menghemat ruang atau space, apalagi jika ada relatif banyak tombol/menu di dalamnya.
Tombol Dropdown ini secara standar akan Anda nikmati setelah Anda mengaktifkan pilihan Use button dropdown for links dari menu tab PHP -> Page Options (Global), lalu men-generate ulang semua file script seperti biasa.
Secara standar, Anda akan melihat style Dropdown di tombol tersebut yang ditandai dengan icon panah segitiga kecil yang menunjuk ke arah bawah. Tombol Dropdown ini berada di sebelah kiri dari setiap Record yang terdapat di tabel pada halaman List. Ketika Pengguna mengklik tombol tadi, maka di bagian bawah akan muncul menu dropdown yang dikelompokkan di dalamnya.
Sayangnya, jika kita menggunakan extension asli bawaan PHPMaker yang bernama ScrollingTable atau MasinoFixedWidthStyle11 (untuk PHPMaker 11) dengan mengaktifkan style TableWidthStyle pada pilihan 100% atau Scroll, maka ketika Pengguna mengklik tombol Dropdown pada beberapa Record terakhir di tabel/halaman itu, maka menu dropdown yang muncul di bawahnya akan tertutup atau terhalang dengan horizontal scroll yang muncul pada tabel itu.
Pengguna tentu saja harus melakukan scroll ke bawah dengan menarik tombol vertical scroll ke arah bawah. Jelas kondisi ini menjadi tidak nyaman bagi mereka. Mengapa? Karena mereka membutuhkan aksi tambahan agar dapat melihat menu dropdown yang berada di bawahnya.
Seharusnya, untuk tombol Dropdown yang terdapat pada beberapa Record terakhir di dalam tabel tadi, style Dropdown itu berganti menjadi style Dropup (panah segitiga kecil arah ke atas). Mengapa? Supaya ketika Pengguna mengkliknya, maka posisi menu dropdown yang tadinya muncul di bagian bawah tombol Dropdown menjadi berada di bagian atas tombol Dropup.
Pertanyaannya adalah, bagaimana cara kita untuk menerapkan hal tersebut? Hehehe… lagi-lagi, bukan PHPMaker namanya jika tidak bisa mengatasi hal ini.
Kita dapat mengakalinya cukup hanya dengan menambahkan kode jQuery berikut pada bagian Startup Script yang terdapat di bawah Client Scripts -> Table-Specific -> List Page (untuk tabel tertentu), atau di bawah Client Scripts -> Global -> Pages with header/footer (untuk seluruh tabel):
$(document).ready(function() { var recperpage = "<?php echo CurrentPage()->RecCnt; ?>"; for ( var i = 0; i <= 3; i++ ) { $('#r' + (recperpage - i) + '_<?php echo CurrentPage()->TableName; ?> .ewButtonDropdown').addClass('dropup'); } });
Jika Anda lihat kode barusan, kita dapat mengoptimalkan property RecCnt milik object Page atau Table untuk mengambil nilai Jumlah Record pada halaman yang sedang aktif, sebagai acuan untuk memproses beberapa Record terakhir di tabel tersebut.
Selanjutnya, kita dapat mengubah style Dropup tadi hanya untuk beberapa Record tertentu saja. Dalam contoh di atas, kita menerapkannya hanya untuk 4 Record terakhir di tabel atau halaman tersebut. Hal ini ditandai dengan bagian loop mulai dari 0, 1, 2, dan 3. Kita cukup menambahkan class yang bernama dropup yang terdapat dalam Bootstrap 3.
Perhatikan juga bahwa kita mengacu kepada ID dari row atau baris dengan format r_<indexrow>_<namatabel> dan juga class pada row tersebut yang bernama ewButtonDropdown.
Dengan cara ini, maka kita sama sekali tidak mengubah kode pada file yang akan dihasilkan oleh PHPMaker. Kita cukup hanya menambahkan sedikit kode jQuery saja dari dalam project PHPMaker, sehingga mudah dipelihara dan dipahami ketika Aplikasi Web ini di waktu mendatang akan dimutahirkan kembali.
Diupdate tanggal 6 Januari 2015: Kode di atas akhirnya sudah ditangani dari dalam extension MasinoHeaderFooter11. Itu artinya, Anda sebagai Web Developer, tidak perlu lagi menambahkan kode tersebut secara manual dari dalam project PHPMaker Anda. Biarkan extension tadi yang menanganinya sendiri.
Luar biasa memang dahsyat sekaligus fleksibelnya PHPMaker bagi Web Developer untuk membangun Aplikasi Web dengan cepat, mudah, dan sangat menyenangkan. Belum ada satupun tools yang dapat menandingi kemampuan PHPMaker di atas! 😀
Tinggalkan Balasan