Jquery Plugins, one page website

kemampuan program jquery dapat ditingkatkan lagi dengan adanya plug-ins plug-ins. Plug-ins adalah program tambahan yang dibuat diatas program jquery sehingga dapat mempermudah kita dalam membuat program tanpa kita harus membuat lagi dari awal. contoh yang paling sering kita temui adalah plugins jquery-ui (jquery user interface) misalnya saat user diberi pilihan dalam memberikan input data tanggal, maka secara otomatis akan ditampilkan kotak tanggal sehingga user dapat dengan mudah memilih angkanya, pada bagian ini akan dibahas jquery-ui untuk tanggal dan scrolling page yaitu halaman web yang berganti dengan cara scroll ke bawah

Jquery plugins

reference

  • kemampuan jquery dapat ditingkatkan lagi dengan menggunakan plug-ins yang juga banyak dibuat oleh kalangan open-source
  • untuk melihat lebih detil berbagai macam plugins ini adalah alamat webnya http://plugins.jquery.com/tag/input/

jquery UI

jquery plugin jquery UI

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Prak 6 1 web page</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/jquery-ui.css">
  <link rel="stylesheet" href="css/jquery-ui.theme.css">
  <link rel="stylesheet" href="css/windows.css">
  <link rel="stylesheet" href="prak-6.css">
</head>
<body> 

<section class="window">halaman 1</section>
<section class="window">

  <h3>halaman 2</h3>
  <form action="#">
    <div class="row">
      <div class="col-sm-3">
        Tanggal
      </div>
      <div class="col-sm-2">
        <input type="text" name="text" id="datepicker" class="form-control">
      </div>
    </div>
  </form>
</section>
<section class="window">halaman 3</section>
<section class="window">halaman 4</section>
<section class="window">halaman 5</section>

  <script src="js/jquery-2.2.3.min.js"></script>
  <script src="js/tether.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/windows.js"></script>
  <script src="prak-6.js"></script>
</body>
</html>
  • buat file baru dengan nama prak-6.js dan isi dengan ketikan berikut:
$(document).ready(function(){
  $("#datepicker").datepicker();

  $('.window').windows({
      snapping: true,
      snapSpeed: 500,
      snapInterval: 1100,
      onScroll: function(scrollPos){
          // scrollPos:Number
      },
      onSnapComplete: function($el){
          // after window ($el) snaps into place
      },
      onWindowEnter: function($el){
          // when new window ($el) enters viewport
      }
  });
  alert("Jquery 6 ready");
});

tugas siswa

  • Buat website pribadi 5 section dengan satu scroll page seperti langkah diatas. untuk isi boleh mencari sendiri, misalnya halaman pertama berisi judul web, halaman kedua gambar, halaman ketiga table.