Membuat Read More Dengan jQuery Expander Plugin - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Membuat Read More Dengan jQuery Expander Plugin, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Javascript Dan JQuery, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Read More Dengan jQuery Expander Plugin
link : Membuat Read More Dengan jQuery Expander Plugin

Baca juga


Membuat Read More Dengan jQuery Expander Plugin

Pada kesempatan kali ini kita akan membuat Read More untuk suatu tulisan atau artikel. Untuk membuat read more pada kesempatan kali ini kita akan menggunakan plugin jQuery yaitu jQuery Expand. Plugin ini berfungsi untuk menyembunyikan dan menampilkan sebagian text, jadi user hanya bisa melihat sebagian text nya saja.

Pertama-tama kita harus download plugin jQuery Expander pada link jquery.expander.js, setelah itu masukan plugin tersebut ke dalam tag HTML. Berikut contoh pembuatan read more dan penggunaan plugin jQuery Expander,



HTML
<div class="readmore">
<p>Bootstrap merupakan framework HTML, CSS dan javascript untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik pada beberapa device seperti PC / desktop, tablet ataupun mobile. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis. Bootstrap merupakan salah satu framework yang paling populer di kalangan web developer. pada saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat.Sebelum kita mulai membangun sebuah desain web menggunakan bootstrap, terlebih dahulu kita harus install bootstrapnya <p>
</div>

JQuery
<script type="text/javascript">
$(document).ready(function () {
    $(".readmore").expander({
          slicePoint : 30,
          expandText: 'More',
          userCollapseText : 'Less'
    });
});
</script>

Script Keseluruhan
<html>
<head><title>Membuat Read More</title></head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-expander/1.7.0/jquery.expander.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $(".readmore").expander({
          slicePoint : 30,
          expandText: 'More',
          userCollapseText : 'Less'
    });
});
</script>
<body>
<div class="readmore">
<p>Bootstrap merupakan framework HTML, CSS dan javascript untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik pada beberapa device seperti PC / desktop, tablet ataupun mobile. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis. Bootstrap merupakan salah satu framework yang paling populer di kalangan web developer. pada saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat.Sebelum kita mulai membangun sebuah desain web menggunakan bootstrap, terlebih dahulu kita harus install bootstrapnya <p>
</div>
</body>
</html>


Untuk melihat hasilnya bisa lihat di link Berikut


Semoga bermanfaat..

 


Demikianlah Artikel Membuat Read More Dengan jQuery Expander Plugin

Sekianlah artikel Membuat Read More Dengan jQuery Expander Plugin kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Read More Dengan jQuery Expander Plugin dengan alamat link https://dev-create.blogspot.com/2016/12/membuat-read-more-dengan-jquery.html