Pelaksanaan pemalam pemilihan bulan berdasarkan jQuery dengan kod sumber download_jquery

WBOY
Lepaskan: 2016-05-16 15:23:01
asal
1383 orang telah melayarinya

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> 
Salin selepas log masuk

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"> 
Salin selepas log masuk

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 
}) 
}); 
Salin selepas log masuk

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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan