Fungsi Tampilkan Lebih Banyak dan Tampilkan Lebih Sedikit dapat berguna di situs web yang berisi banyak teks, seperti situs web berita dan majalah yang berisi banyak artikel dalam satu halaman. Ini dapat membantu perancang halaman web untuk memberikan kebebasan kepada pengguna untuk membaca lebih banyak atau lebih sedikit teks sesuai kebutuhan. Show
Mendekati. Jumlah konten yang ditampilkan dapat diubah dengan mengklik tombol. Alih-alih menampilkan paragraf lengkap di halaman web, awalnya hanya beberapa bagian teks yang ditampilkan dan sebuah tombol ditambahkan yang menampilkan lebih banyak teks. Jumlah teks yang harus ditampilkan setelah dan sebelum mereka mengklik tombol dapat ditentukan oleh pengembang Contoh. Pendekatan di atas dapat diimplementasikan dengan menggunakan kondisi if-else sederhana yang memeriksa status teks saat ini dan menampilkan atau menyembunyikannya berdasarkan itu. Contoh di bawah menggambarkan metode ini Tutorial Javascript dan JQuery cara menambahkan "baca lebih lanjut" dan "baca lebih sedikit" di akhir teks setelah sejumlah karakter tertentuBagaimana cara menambahkan tombol Read More/Read Less di sebelah elemen HTML yang terlalu panjangTutorial ini akan membawa Anda melalui cara menampilkan sejumlah baris tertentu dari elemen HTML dan menyembunyikan sisanya, kemudian kita akan melihat cara membaca elemen "Read More" yang dapat diklik di akhir teks untuk menampilkan/ Tantangannya di sini adalah, saya ingin agar bagian teks selalu terlihat dan menampilkan teks ".. baca lebih lanjut" setelahnya, pada akhirnya, saat teks terlihat sepenuhnya, saya ingin menambahkan elemen baru yang disebut "baca lebih sedikit" . Saya ingin menerapkan logika ini ke elemen HTML apa pun hanya dengan menambahkan kelas CSS ke dalamnya. Saya juga ingin memiliki kemungkinan untuk memutuskan berapa banyak karakter teks yang ingin saya tampilkan sebelum menyembunyikan bagian kedua Pertama-tama, saya memerlukan kelas CSS untuk mengenali elemen HTML yang ingin saya mainkan, katakanlah kelas CSS akan menjadi '. add-read-more', awalnya, saya ingin mendeteksi apakah teks ditampilkan sepenuhnya atau jika ada bagian dari teks yang disembunyikan, jadi saya akan menambahkan kelas CSS lain ke elemen HTML yang disebut ". tampilkan-kurang-konten“. Sekarang saya bisa mendapatkan teks HTML melalui JQuery dan saya memeriksa apakah teksnya cukup panjang, misalnya, saya akan memeriksa apakah teksnya lebih dari 300 karakter, jika teksnya kurang dari 300 karakter saya tidak akan mengubah apa pun Now I just need to add the “read more/read less” section at the end of the visible text, I will use an HTML to do that, this HTML element will contain the two buttons “read more” and “read less”. The last thing to do is create a JQuery function that detected the click on the “read more/read less” section and it will open or close the second part of the text. Berikut adalah seluruh kode logika Javascript yang dijelaskan di atas jQuery(function ($) {
function AddReadMore() {
//This limit you can set after how much characters you want to show Read More.
var carLmt = 300;
// Text to show when text is collapsed
var readMoreTxt = " ...read more";
// Text to show when text is expanded
var readLessTxt = " read less";
//Traverse all selectors with this class and manipulate HTML part to show Read More
$(".add-read-more").each(function () {
if ($(this).find(".first-section").length)
return;
var allstr = $(this).text();
if (allstr.length > carLmt) {
var firstSet = allstr.substring(0, carLmt);
var secdHalf = allstr.substring(carLmt, allstr.length);
var strtoadd = firstSet + "<span class='second-section'>" + secdHalf + "</span><span class='read-more' title='Click to Show More'>" + readMoreTxt + "</span><span class='read-less' title='Click to Show Less'>" + readLessTxt + "</span>";
$(this).html(strtoadd);
}
});
//Read More and Read Less Click Event binding
$(document).on("click", ".read-more,.read-less", function () {
$(this).closest(".add-read-more").toggleClass("show-less-content show-more-content");
});
}
AddReadMore();
});Untuk membuat kode sedikit lebih standar, saya akan menggunakan variabel untuk mengatur jumlah karakter dan Teks untuk ditampilkan saat teks diciutkan/diperluas. Silakan lihat variabel yang disebut "carLmt, readMoreTxt, readLessTxt" pada kode di atas Sekarang saya akan memasukkan CSS ke dalam kode, berikut adalah gayanya .add-read-more.show-less-content .second-section,
.add-read-more.show-less-content .read-less {
display: none;
}
.add-read-more.show-more-content .read-more {
display: none;
}
.add-read-more .read-more,
.add-read-more .read-less {
font-weight: bold;
margin-left: 2px;
color: blue;
cursor: pointer;
}_Hal terakhir yang harus dilakukan adalah menambahkan kelas CSS tersebut ke elemen yang ingin kita ubah, berikut adalah kode HTML untuk itu
Dan ini semua yang saya pikirkan, inilah hasilnya Lorem Ipsum hanyalah teks tiruan dari industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500-an, ketika seorang pencetak yang tidak dikenal mengambil kumpulan teks dan mengacaknya untuk membuat buku contoh huruf. Itu bertahan tidak hanya selama lima abad, tetapi juga lompatan ke pengaturan huruf elektronik, yang pada dasarnya tetap tidak berubah. Itu dipopulerkan pada tahun 1960-an dengan dirilisnya lembaran Letraset yang berisi bagian-bagian Lorem Ipsum, dan baru-baru ini dengan perangkat lunak desktop publishing seperti Aldus PageMaker termasuk versi Lorem Ipsum. Itu bertahan tidak hanya selama lima abad, tetapi juga lompatan ke pengaturan huruf elektronik, yang pada dasarnya tetap tidak berubah. Itu dipopulerkan pada tahun 1960-an dengan dirilisnya lembaran Letraset yang berisi bagian-bagian Lorem Ipsum, dan baru-baru ini dengan perangkat lunak desktop publishing seperti Aldus PageMaker termasuk versi Lorem Ipsum Untuk melihat seluruh kode beraksi, silakan lihat tugas ini di CodePen di tautan ini. https. // kodepen. io/webmarcello8080/pen/oNGmGWL Cara menambahkan tautan "Baca Selengkapnya" ke elemen HTML dengan animasi slideJquery menyediakan serangkaian fungsi untuk menganimasikan, menggeser masuk, menggeser keluar elemen HTML tertentu, jadi kita tidak perlu membuat animasi dari awal, dalam kode saya akan menggunakan metode “animate” untuk membuat slide Hal pertama yang harus dilakukan dalam kasus ini adalah mengurangi tinggi teks jika teks lebih panjang dari jumlah piksel tertentu, misalnya, katakanlah saya ingin teks saya maksimal 200px. Saya mendapatkan elemen HTML berdasarkan kelas (saya akan menggunakan kelas 'slide-read-more'), saya memeriksa apakah tinggi elemen lebih besar dari 200px, jika elemen terlalu panjang saya akan mengatur tinggi teks menjadi 200px, Untuk mendapatkan ketinggian teks saat ini saya akan menggunakan fungsi JQuery. innerHeight() yang mendapatkan tinggi bagian dalam yang dihitung saat ini (termasuk padding tetapi bukan batas) untuk elemen pertama dalam set elemen yang cocok atau setel tinggi bagian dalam dari setiap elemen yang cocok. Ini dokumentasinya Kemudian saya akan membuat fungsi JQuery berdasarkan klik '. geser-baca-lebih-tombol'. Ketika tombol diklik, saya centang tinggi 'slide-read-more', jika teksnya 200px saya hapus tinggi 200px yang sebelumnya saya tambahkan dan saya jalankan animate untuk menampilkan animasi slide. Jika teks lebih panjang dari 200px, saya akan mengatur tinggi teks menjadi 200px dan saya menjalankan fungsi animate jQuery(function ($) {
// resize the slide-read-more Div
var box = $(".slide-read-more");
var minimumHeight = 200; // max height in pixels
var initialHeight = box.innerHeight();
// reduce the text if it's longer than 200px
if (initialHeight > minimumHeight) {
box.css('height', minimumHeight);
$(".read-more-button").show();
}
SliderReadMore();
function SliderReadMore() {
$(".slide-read-more-button").on('click', function () {
// get current height
var currentHeight = box.innerHeight();
// get height with auto applied
var autoHeight = box.css('height', 'auto').innerHeight();
// reset height and revert to original if current and auto are equal
var newHeight = (currentHeight | 0) === (autoHeight | 0) ? minimumHeight : autoHeight;
box.css('height', currentHeight).animate({
height: (newHeight)
})
$('html, body').animate({
scrollTop: box.offset().top
});
$(".slide-read-more-button").toggle();
});
}
});Untuk menjaga kode saya sedikit lebih standar, saya menetapkan beberapa variabel, minimumHeight berisi jumlah piksel awal teks, box adalah elemen JQuery (atau elemen) dengan kelas 'slide-read-more', currentHeight Sekarang saya hanya perlu menambahkan beberapa CSS untuk menyembunyikan teks tambahan yang tidak ingin saya tampilkan dan untuk menata tombol 'Read More'. Ini kode CSSnya .slide-read-more{
overflow:hidden;
}
.slide-read-more-button{
cursor: pointer;
text-align: right;
margin-top: 8px;
color: #488A8A;
display: none;
}_Berikut adalah contoh cara menggunakan kode yang dijelaskan di atas <p class="slide-read-more"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> <div class="slide-read-more-button read-more-button">Read More</div> <div class="slide-read-more-button">Read Less</div> Dan inilah hasil akhirnya Lorem Ipsum hanyalah teks tiruan dari industri percetakan dan penyusunan huruf. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500-an, ketika seorang pencetak yang tidak dikenal mengambil kumpulan teks dan mengacaknya untuk membuat buku contoh huruf. Itu bertahan tidak hanya selama lima abad, tetapi juga lompatan ke pengaturan huruf elektronik, yang pada dasarnya tetap tidak berubah. Itu dipopulerkan pada tahun 1960-an dengan dirilisnya lembaran Letraset yang berisi bagian-bagian Lorem Ipsum, dan baru-baru ini dengan perangkat lunak desktop publishing seperti Aldus PageMaker termasuk versi Lorem Ipsum Baca selengkapnya Baca Lebih Sedikit Seperti biasa, saya telah membuat contoh kode di codepen, jadi Anda bisa bermain-main dengannya, ini linknya 6 komentar
Klik untuk Meninggalkan KomentarKomentar * Nama * Email * Situs web Simpan nama, email, dan situs web saya di browser ini untuk komentar saya berikutnya
Kamu mungkin suka Marcello PerriCara mengubah kursor mouse ke bentuk CSS apa pun di Javascript Tutorial Pemecahan Masalah Blog Tutorial ini akan menunjukkan kepada Anda bagaimana mengubah kursor situs web Anda ke bentuk CSS apa pun dan mengubah bentuk saat mengarahkan kursor pada elemen HTML tertentu. Saya telah melihat banyak tutorial online tentang mengubah kursor HTML menjadi ikon SVG atau ikon PGN. Dalam kasus saya, saya ingin mengubah […] 15 Oktober 2022 Baca selengkapnyaPlugin Marcello PerriWoocommerce – kelola jumlah keranjang Min Max dan jumlah Min Max di halaman pembayaran Plugin Blog Woocommerce Min Max Checkout adalah plugin yang memperluas e-commerce Woocommerce Anda untuk memberi Anda kemungkinan untuk mengatur jumlah pembayaran minimum atau maksimum atau untuk mengatur jumlah pesanan minimum atau maksimum pada keranjang atau halaman pembayaran. Dengan Woocommerce Min Max Checkout Anda juga dapat mengatur […] 12 Februari 2022 Baca selengkapnyaMarcello PerriApa itu “Gagal memuat sumber daya. bersih. ERR_BLOCKED_BY_CLIENT” dan cara memperbaikinya Pemecahan Masalah Blog Hari ini kami mencoba menganalisis kesalahan yang muncul di inspektur browser dan itu agak rumit untuk diperbaiki dan kami mencoba memahami apa yang menyebabkan kesalahan tersebut, kesalahan tersebut disebut “Gagal memuat sumber daya. bersih. ERR_BLOCKED_BY_CLIENT“. Error ini selalu diikuti dengan URL, URL ini adalah link yang […] |
Baca lebih lanjut baca lebih sedikit javascript
Pos Terkait
Copyright © 2024 apacode Inc.
