Server Rendi: jQuery

Showing posts with label jQuery. Show all posts

Thursday, December 10, 2015

jQuery - Membuat Bootstrap Show/Hide Password

Rendi Rizki 12/10/2015 12:04:00 AM Comment

Show/Hide Password berguna bagi para user untuk mengecek kembali password mereka agar tidak terjadi kesalahan dalam melakukan login.

Disini kita akan mencoba cara mudah untuk membuat bootstrap show/hide password menggunakan jQuery.

Pertama buat form sederhana terlebih dahulu

<label>Username:</label>
<div class="form-group">
 <input type='text' class="form-control" placeholder="Username" />
</div>
<label>Password:</label>
<div class="form-group">
 <input type="password" class="form-control pass" placeholder="Password" />
</div>
<p><label><input id="showhide" type="checkbox"> Show password</label></p>
<div class="form-group">
 <button type="button" class="btn btn-primary btn-block">Login</button>
</div>

Lalu masukan syntax jQuery di atas tag </body>

$(function(){
 $("#showhide").click(function(){
  if($(".pass").attr('type')=='password'){
   $(".pass").attr('type','text');
  }else{
   $(".pass").attr('type','password');
  }
 });
});

Jangan lupa masukan css dan js Bootstrapnya. Jika belum punya bisa download Bootstrap.

(Baca juga: jQuery - Membuat Animasi Auto Typing (Effect))

DEMO

Terima kasih
Enjoy your day !

Wednesday, December 9, 2015

jQuery

jQuery - Membuat Animasi Auto Typing (Effect)

Rendi Rizki 12/09/2015 06:40:00 AM Comment

Contoh 1

Code

<p class="example1"></p>
$('.example1').typeIt({
whatToType: "The quick brown fox jumps over the lazy dog.",
typeSpeed: 100
});

Contoh 2

Code

<p class="example2"></p>
$('.example2').typeIt({
whatToType: [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"The quick brown fox jumps over the lazy dog."
],
typeSpeed: 100
});

Contoh 3

Code

<p class="example3"></p>
$('.example3').typeIt({
whatToType: [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"The quick brown fox jumps over the lazy dog."
],
typeSpeed: 100,
breakLines: false
});

(Baca juga: jQuery - Membuat Bootstrap Datetimepicker)

Setting
whatToType : String yang ingin anda ketik
typeSpeed : Kecepatan
lifeLike : Kecepatan konstan atau tidak teratur
showCursor : Kursor berkedip saat mengetik
breakLines : Dihapus atau tidak
breakWait : Waktu antara mengetik.
delayStart : Waktu sebelum dimulai mengetik

DOWNLOAD

Source : jQuery TypeIt

Terima kasih
Enjoy your day !

Thursday, November 26, 2015

jQuery

jQuery - Mengubah Format Bahasa Bootstrap Datetimepicker

Rendi Rizki 11/26/2015 04:52:00 AM Comment

Sangat mudah untuk mengubah format bahasa Bootstrap Datetimepicker, kita cukup menambahkan beberapa baris kode yang telah disediakan.
Jika kita belum tahu cara membuat atau memasang Bootstrap Datetimepicker, bisa lihat artikel sebelumnya DISINI.

1. Mencari bahasa yang akan kita gunakan.
List Bahasa : DISINI
Setelah kita memilih bahasa, tinggal kita masukan atau tambahkan ke dalam codingan kita.
Untuk bahasa Indonesia

Untuk bahasa Jerman

Untuk bahasa Rusia

Tambahkan kode di atas setelah bootstrap-datetimepicker.min.js atau moment.min.js

2. Selanjutnya kita tambahkan kode di bawah ke dalam javascript nya.

locale: 'id',

Seperti ini

$(function () {
 $('#datetimepicker').datetimepicker({
  format: 'DD MMMM YYYY HH:mm',
  locale: 'id', //Contoh Bahasa Indonesia
 });
});

3. Selesai, kita tinggal menjalankan nya.
4. Hasil

Bahasa Indonesia

jQuery Bootstrap Datetimepicker Indonesian Language

Bahasa Jerman

Bahasa Rusia

jQuery Bootstrap Datetimepicker Russian Language

DOWNLOAD

DEMO

Terima kasih
Enjoy your day !

Wednesday, November 25, 2015

jQuery

jQuery - Membuat Bootstrap Datetimepicker

Rendi Rizki 11/25/2015 07:17:00 AM 3 Comments

Dalam pembuatan website pasti kita membutuhkan Datetimepicker untuk misalnya memilih tanggal lahir, memilih tanggal pemesanan, memilih waktu jam masuk dan masih banyak lagi.

Disini kita akan coba cara membuat atau memasang Bootstrap Datetimepicker di website kita.

Instalasi

1. Copy kode css di dalam tag <head>....</head>

2. Copy kode javascript tepat di atas tag </body>

3. Copy kode html tepat di bawah tag <body>
- Untuk Datetimepicker

<label>Date Time Picker:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>

- Untuk Datepicker

<label>Date Picker:</label>
<div class="form-group">
<div class='input-group date' id='datepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>

- Untuk Timepicker

<label>Time Picker:</label>
<div class="form-group">
<div class='input-group date' id='timepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>

4. Kode setelah di gabungkan.

<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Datetimepicker</title>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
 </head>
 <body>
  <div class="container">
   <div> 
    <div style="padding-top: 25px;">
     <center><h1>jQuery Datetimepicker</h1></center>
    </div>
    <br />
    <div class="row">
     <div class='col-sm-4'>
     </div>
     <!-- DATETIMEPICKER -->
     <div class='col-sm-4'>
      <label>Date Time Picker:</label>
      <div class="form-group">
       <div class='input-group date' id='datetimepicker'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
        </span>
       </div>
      </div>
      
      <label>Date Picker:</label>
      <div class="form-group">
       <div class='input-group date' id='datepicker'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
        </span>
       </div>
      </div>
      
      <label>Time Picker:</label>
      <div class="form-group">
       <div class='input-group date' id='timepicker'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
         <span class="glyphicon glyphicon-calendar"></span>
        </span>
       </div>
      </div>
     </div>
     <!-- DATETIMEPICKER -->
     <div class='col-sm-4'>
     </div>
    </div>
   </div>
  </div>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.15.35/js/bootstrap-datetimepicker.min.js"></script>
  <script type="text/javascript">
   $(function () {
    $('#datetimepicker').datetimepicker({
     format: 'DD MMMM YYYY HH:mm',
                });
    
    $('#datepicker').datetimepicker({
     format: 'DD MMMM YYYY',
    });
    
    $('#timepicker').datetimepicker({
     format: 'HH:mm'
    });
   });
  </script>
 </body>
</html>

5. Hasil

DOWNLOAD

DEMO

Terima kasih
Enjoy your day !