Menghapus item daftar
Follow @X_increms
Ditulis ulang Oleh: Alfians Increms Januari, 2023
Aplikasi: Perkebunan - Pertambangan - HTI - HPH Sistem Integrasi
Gesek Menghapus item daftar (Swipe to delete list item)
Plugin ini sangat ringan dan responsif yang berfungsi menghapus suatu item daftar dengan cara mengeser atau mengesek ke kiri maupun kekanan pada perangkat keras, di situs ini diberikan contohnya agar bisa langsung dipraktekkan.
#Apikasi_Perkebunan #Hutan_Tanaman_Industri
Perlu diketahui bahwa Demo ini menunjukkan bagaimana dapat menghapus item daftar dengan menggesek ke kiri atau ke kanan dengan mouse atau layar sentuh pada perangkat keras komputer maupun smartphone. Sedangkan untuk perangkat tanpa layar sentuh ada tombol hapus. Demo ini juga berisi popup konfirmasi bergaya kustom, agar lebih jelasnya dapat dilihat pada contoh dibawah ini dengan mengklik tombol yang telah disediakan.
Bila sudah melihat contohnya dengan mengklik tombol diatas yakni pada Buka Contoh Hapus List, maka bisa melihat skrip dibawah ini, dalam hal ini menggunakan pustaka JQuery Mobile, silahkan kunjungi situs resminya bila ingin mempelajarinya.
Skrip untuk Javascript sebagai berikut :
<script>
$(document).on("pagecreate", "#demo-page", function() {
// Usapkan untuk menghapus item daftar
$(document).on("swipeleft swiperight", "#list li", function(event) {
var listitem = $(this),
// Ini adalah nama kelas yang digunakan untuk transisi CSS
dir = event.type === "swipeleft" ? "left" : "right",
// Periksa apakah browser mendukung transformasi (3D) transisi CSS
transition = $.support.cssTransform3d ? dir : false;
confirmAndDelete(listitem, transition);
});
// Jika bukan perangkat sentuh seperti dekstop dan lainnya kecuali mobile dan laptop sentuh
if (!$.mobile.support.touch) {
// Menghapus kelas yang digunakan untuk menyembunyikan tombol hapus pada perangkat sentuh
$("#list").removeClass("touch");
// Klik hapus tombol split untuk menghapus item daftar
$(".delete").on("click", function() {
var listitem = $(this).parent("li");
confirmAndDelete(listitem);
});
}
function confirmAndDelete(listitem, transition) {
// Sorot item daftar yang akan dihapus
listitem.children(".ui-btn").addClass("ui-btn-active");
// Suntikkan topik dalam popup konfirmasi setelah menghapus topik yang disuntikkan sebelumnya
$("#confirm .topic").remove();
listitem.find(".topic").clone().insertAfter("#question");
// Show the confirmation popup
$("#confirm").popup("open");
// Proceed when the user confirms
$("#confirm #yes").on("click", function() {
// Remove with a transition
if (transition) {
listitem
// Menambahkan kelas untuk arah transisi
.addClass(transition)
// Ketika transisi selesai ...
.on("webkitTransitionEnd transitionend otransitionend", function() {
// Item daftar akan dihapus
listitem.remove();
// ...the list will be refreshed and the temporary class for border styling removed
$("#list").listview("refresh").find(".border-bottom").removeClass("border-bottom");
})
// Selama transisi, tombol sebelumnya mendapatkan batas bawah
.prev("li").children("a").addClass("border-bottom")
// Menghapus sorotan
.end().end().children(".ui-btn").removeClass("ui-btn-active");
}
// Jika bukan perangkat sentuh atau transisi CSS tidak didukung, cukup hapus item daftar dan refresh daftar
else {
listitem.remove();
$("#list").listview("refresh");
}
});
// Hapus status aktif dan lepaskan ikatan saat tombol batal diklik
$("#confirm #cancel").on("click", function() {
listitem.children(".ui-btn").removeClass("ui-btn-active");
$("#confirm #yes").off();
});
}
});
</script>
Adapun untuk skrip CSS dan HTMLnya merupakan suatu Opsional atau pilihan yakni ingin digunakan ataupun tidak karena bukan suatu hal yang persis seperti ini pada contoh yang ada dibawah ini :
<style>
/* Transisi kiri */
li.left {
-webkit-transition: -webkit-transform 250ms ease;
-webkit-transform: translateX(-100%);
-moz-transition: -moz-transform 250ms ease;
-moz-transform: translateX(-100%);
-o-transition: -o-transform 250ms ease;
-o-transform: translateX(-100%);
transition: transform 250ms ease;
transform: translateX(-100%);
}
/* Transisi kanan */
li.right {
-webkit-transition: -webkit-transform 250ms ease;
-webkit-transform: translateX(100%);
-moz-transition: -moz-transform 250ms ease;
-moz-transform: translateX(100%);
-o-transition: -o-transform 250ms ease;
-o-transform: translateX(100%);
transition: transform 250ms ease;
transform: translateX(100%);
}
/* Batas bawah untuk tombol sebelumnya selama transisi */
li.left a.ui-btn,
li.right a.ui-btn {
border-top-width: 0;
border-left-width: 1px;
border-right-width: 1px;
}
li a.ui-btn.border-bottom {
border-bottom-width: 1px;
}
/* Hide the delete button on touch devices */
ul.touch li.ui-li-has-alt a.delete {
display: none;
}
ul.touch li.ui-li-has-alt a.ui-btn {
margin-right: 0;
}
/* Gaya untuk popup */
#confirm p {
text-align: center;
font-size: inherit;
margin-bottom: .75em;
}
</style>
Adapun untuk skrip HTML seperti dibawah ini, namun bersifat optional.
<div data-role="page" id="demo-page" data-title="Menghapus Notifikasi Pesan">
<div data-role="header" data-position="fixed" data-theme="b">
<h1>Inbox</h1>
<a href="#demo-intro" data-rel="back" data-icon="carat-l" data-iconpos="notext">Back</a>
<a href="#" onclick="window.location.reload()" data-icon="back" data-iconpos="notext">Refresh</a>
</div>
<div role="main" class="ui-content">
<ul id="list" class="touch" data-role="listview" data-icon="false" data-split-icon="delete">
<li>
<a href="#demo-mail">
<h3>Staff X-Bootcamp</h3>
<p class="topic"><strong>Re: Besok membahas Flutter ya</strong></p>
<p>Oke, siaaaap jam 20:00 malam, saya akan menunggu </p>
<p class="ui-li-aside"><strong>4:48</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>xflash.co.id</h3>
<p class="topic"><strong>Aplikasi X-flash</strong></p>
<p>Pengembangan sedang dilakukan secara bertahap mengikuti era atau zamannya saat ini</p>
<p class="ui-li-aside"><strong>4:37</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Raja Herbal Sambal</h3>
<p class="topic"><strong>Re: Beli Raja Herbal Sambal Rasa Cumi ya</strong></p>
<p>Oke, Silahkan login dulu atau order online di info.herbal.rajaperkasa.net ya</p>
<p class="ui-li-aside"><strong>3:24</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>Rajaperkasa.net</h3>
<p class="topic"><strong>Teh Herbal Perkasa</strong></p>
<p>Mengatasi penyakit Ginjal, Gangguan kencing, Serviks dan Asam Urat, Khasiat dan kualitas bermutu tinggi.</p>
<p class="ui-li-aside"><strong>2:52</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>baliho.info.xflash.co.id</h3>
<p class="topic"><strong>Link Request</strong></p>
<p>Bagi yang ingin memesan Baliho dengan segala ukuran silahkan kunjungi situs resmi baliho.info.xflash.co.id</p>
<p class="ui-li-aside"><strong>05:24</strong>PM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
<li>
<a href="#demo-mail">
<h3>rajaperkasa.net</h3>
<p class="topic"><strong>Minyak Herbal Raja Perkasa</strong></p>
<p>Minyak Herbal Raja Perkasa mampu mengatasi Ejakulasi Dini, Lemah Syahwat, Loyo dan dapat membesarkan serta memperkuat, keras dan Panjang.</p>
<p class="ui-li-aside"><strong>11:24</strong>AM</p>
</a>
<a href="#" class="delete">Delete</a>
</li>
</ul>
</div>
<div id="confirm" class="ui-content" data-role="popup" data-theme="a">
<p id="question">Apakah dirimu yakin Menghapus diriku:</p>
<div class="ui-grid-a">
<div class="ui-block-a">
<a id="yes" class="ui-btn ui-corner-all ui-mini ui-btn-a" data-rel="back">Ya</a>
</div>
<div class="ui-block-b">
<a id="cancel" class="ui-btn ui-corner-all ui-mini ui-btn-a" data-rel="back">Batal</a>
</div>
</div>
</div>
</div>
Silahkan baca juga : Tentang atau Mengenal Pupuk organik atau baca juga : Cara Pembuatan Pupuk Organik
- Cara memperbanyak Bakteri EM
- Membuat Pupuk Kandang dengan Stardec dan Orgadec
- Cara membuat pupuk hijau padat dan cair
- Bagaimana cara membuat pupuk kompos lubang dan kompos skala dapur
- Cara Membuat Expert Advisors (EA) atau Robot MT5
- Cara membuat Robot Trading (EA) dengan Mudah & Profitable
- "Cara membuat Pupuk Organik Cair" dan juga artikel : "Cara membuat Pupuk Cair Suplemen hewan ternak dan ikan, udang tambak"
Input Data Tanpa Refresh Dengan Database MYSQL
Perhatikan setiap warna yang diberikan, karena kata-kata itu akan saling berhubungan atau dikenal dengan INTEGRASI jika sudah jadi maka menjadi INTEGRITED, Para penggunanya menjadi INTEGRITER (Integrity), Kata setiap warna yang diberikan selalu berhubungan dengan skrip selanjutnya
Input Data Tanpa Refresh Dengan Radio button
Kita Melanjutkan dari Input data tanpa refresh dengan database MySQL I yang sudah kita bahas sebelumnya, maka kita melanjutkan pembahasan ini walaupun tidak jauh berbeda hanya perbedaan pada pilihan kelamin, yang sebelumnya menggunakan type input, sekarang menggunakan type Radio button atau Checkbox kita pilih salah satunya saja,
Input Data Tanpa Refresh Dengan Checkbox
Ini hanya penambahan saja dari Input data tanpa refresh dengan database MySQL dan Input data tanpa refresh dengan database MySQL II yang sudah kita bahas sebelumnya, yakni sebelumnya menggunakan type input, dan type Radio button maka sekarang menggunakan Checkbox. Seperti biasa membuat database, atau bisa juga menggunakan database yang sudah ada
