Input Mask Plugin dengan Jquery

Ini adalah plugin masukan texfiled untuk javascript library jQuery. Hal ini memungkinkan pengguna untuk lebih mudah masuk masukan di mana Anda ingin mereka untuk memasukkan data dalam format tertentu (tanggal, nomor telepon, dll). Telah diuji di Internet Explorer, Firefox, Safari dan Chrome.A masker didefinisikan oleh format terdiri dari literal masked. Setiap karakter tidak dalam daftar definisi di bawah ini dianggap masker harfiah. Literal mask akan otomatis masuk bagi pengguna saat mengetik dan tidak akan dapat dihilangkan dengan oleh user. berikut adalah karakter yang didukung:

• Merupakan karakter alfa (A-Z, a-z)
• Merupakan karakter numerik (0-9)
• Merupakan karakter alfanumerik (AZ, az,0-9) 

Oke langsung kita bahas masbro... hehhee

Pertama, meliputi input jQuery dan masked  file javascript.

Selanjutnya, memanggil fungsi masker untuk 

Filed-filed yang ingin dipakai

jQuery(function($){
   $("#date").mask("99/99/9999");
   $("#phone").mask("(999) 999-9999");
   $("#tin").mask("99-9999999");
   $("#ssn").mask("999-99-9999");
});
Opsional, jika Anda tidak puas dengan underscore ('_') 

karakter sebagai placeholder, Anda mungkin melewatkan  

argumen opsional dengan metode maskedinput.

jQuery(function($){
   $("#product").mask("99/99/9999",{placeholder:" "});
});

Pilihan, jika anda ingin menjalankan fungsi sekali masker  

telah selesai, Anda dapat menentukan fungsi yang sebagai 

argumen opsional untuk metode 

maskedinput.

jQuery(function($){ $("#product").mask("99/99/9999",{completed:function() {alert("You typed the following: "+this.val());}}); });

Anda sekarang dapat menyediakan definisi Anda sendiri masker. 

jQuery(function($){
   $.mask.definitions['~']='[+-]';
   $("#eyescript").mask("~9.99 ~9.99 999");
});

Anda dapat memiliki bagian dari masker Anda menjadi opsional. 

Apa pun terdaftar setelah '?' dalam topeng dianggap input pengguna  

opsional.Contoh umum untuk ini adalah nomor telepon + perpanjangan 

opsional. 

jQuery(function($){
   $("#phone").mask("(999) 999-9999? x99999");
}); 

Demo : Input Mask Plugin

 

Read More

Membuat Widget Cuaca dengan Jquery

Membuat widget cuaca dengan php dan jquery, ini judul materi tutorial yang akan saya sajikan dalam tutorial web kali ini, oke langsung saja, pernah anda melihat widget-widget cuaca yang ada di blog maupun di web-web yang anda kunjungi, biasanya tersdia plugin-plugin atau widget yang disediakan devloper atau pengembang web untuk mendapatkan widget cuaca atau lebih dikenal dengan widget weather, kali ini saya akan mengajak membuat widget sederhana dengan menggunakan jquery plugin.

Pertama masukan liblary jQuery dan zWeatherFeed.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zweatherfeed.min.js" type="text/javascript"></script> 

Tambahkan tag DIV di mana Anda ingin feed cuaca untuk menampilkan dan memberikan ID. Tidak perlu untuk menentukan kelas, ini akan ditambahkan.
<div id="test"></div>

Sekarang tambahkan script untuk memanggil plugin zWeatherFeed dengan berbagai lokasi di ID (ID untuk menemukan lokasi kunjungi halaman Yahoo! Weather dan pilih lokasi kemudian klik pada RSS, ID lokasi adalah pada akhir alamat URL yaitu IDXX0054 untuk Tanjung Karang, Bandar Lampung).

Contoh kita mendapatkan cuaca untuk Tanjung Karang,Jakarta, Palembang Bandung dan Surabaya.  
Catatan: plugin membatasi lokasi untuk maksimal 10.

<script type="text/javascript">
$(document).ready(function () {
  $('#test').weatherfeed(['IDXX0054','IDXX0007','IDXX0022','IDXX0036','IDXX0052']);
});
</script>

HTML and CSS Styling

Plugin mengembalikan HTML berikut dan kelas styling. Catatan: 'weatherFeed' kelas secara otomatis ditambahkan ke elemen pengguna

<div id="test" class="weatherFeed">
  <div class="weatherItem odd">
    <div class="weatherCity">... (city) ...</div>
    <div class="weatherTemp">... (temperature) ...</div>
    <div class="weatherDesc">... (condition) ...</div>
    <div class="weatherRange">... (high/low) ...</div>
    <div class="weatherWind">... (wind) ...</div>
    <div class="weatherLink">
      <a>... (link) ...<a></div>
    </div>
  </div>
  <div class="weatherItem even">
    ...
  </div>
</div>  

Bagaimana mudah bukan membuat widget dengan jquery dengan memanfaatkan yahoo weather.
Demo:
Widget Standart
Widget Dengan Auto Scroling

Read More

Aplikasi Pembelian dan Penjualan dengan Visual Foxpro

Berikut adalah aplikasi pembelian dan penjualan yang dibuat oleh visual foxpro, mungkin ini adalah program sederhana yang telah dibuat, semoga aplikasi pembelian ini dapat dikembangkan lebih baik lagi.

Adapun form yang ada di aplikasi ini :

• Form Pelanggan
• Form Penjualan
• Form Stok
• dll

 

Read More