Rumah >hujung hadapan web >tutorial js >Pelaksanaan pemalam pemilihan bulan berdasarkan jQuery dengan kod sumber download_jquery

Pelaksanaan pemalam pemilihan bulan berdasarkan jQuery dengan kod sumber download_jquery

WBOY
WBOYasal
2016-05-16 15:23:011440semak imbas

Ini ialah pemalam pemilihan bulan berasaskan jQuery yang boleh memilih tahun dan bulan Anda boleh menetapkan mengklik mana-mana elemen pada halaman untuk mencetuskan panel pemilihan tahun dan bulan timbul kotak input. Ia digunakan secara meluas dalam beberapa bulan tanpa menyediakan borang pilihan.


Paparan kesan Muat turun kod sumber 

HTML

Mula-mula muatkan fail css dan js yang berkaitan dengan pemalam monthpicker Anda boleh memuat turun fail css dan js daripada muat turun kod sumber.

<link rel="stylesheet" type="text/css" href="jquery.monthpicker.css"> 
<script src="jquery.js"></script> 
<script src="jquery.monthpicker.js"></script> 

Kemudian tambah kod berikut di mana anda ingin meletakkan tahun dan bulan Ia boleh menjadi kotak input atau pautan atau mana-mana elemen HTML lain.

<a href="#monthpicker" id="monthpicker"></a> 
<input type="text" class="input" id="monthly"> 

jQuery

Langkah seterusnya adalah sangat mudah, mari hubungi pemalam.

$(function(){ 
$('#monthpicker').monthpicker({ 
years: [2015, 2014, 2013, 2012, 2011], 
topOffset: 6, 
onMonthSelect: function(m, y) { 
console.log('Month: ' + m + ', year: ' + y); 
} 
}); 
$('#monthly').monthpicker({ 
years: [2015, 2014, 2013, 2012, 2011], 
topOffset: 6 
}) 
}); 

Seperti yang dapat dilihat daripada kod, tahun parameter ialah tatasusunan, yang boleh menetapkan tahun Parameter topOffset ialah jarak mengimbangi antara panel yang mencetuskan pop timbul dan elemen semasa. onMonthSelect ialah fungsi panggil balik selepas memilih bulan. Sekarang jalankan halaman web, klik pada pautan atau kotak input, dan panel pemilihan tahun dan bulan akan muncul Selepas memilih, panel hilang, dan tahun dan bulan yang dipilih akan dipaparkan pada pautan atau dalam kotak input. Bagi gaya bulan dalam panel timbul, anda boleh mengubah suai css dalam jquery.monthpicker.css untuk mendapatkan kesan visual yang terbaik.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn