Ticker

6/recent/ticker-posts

Membuat Read More Dengan jQuery Expander Plugin

Desember 27, 2016
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..

 
Unknown

Diposting oleh Unknown

Posting Komentar

0 Komentar