欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery實(shí)現(xiàn)選取月份插件附源碼下載

 更新時(shí)間:2015年12月28日 14:06:02   投稿:mrr  
這是一個(gè)基于jQuery的可以選擇年份和月份的月份拾取插件,你可以設(shè)置點(diǎn)擊頁(yè)面上的任意元素觸發(fā)彈出年月選擇面板,可以是一個(gè)鏈接也可以是一個(gè)輸入框,廣泛應(yīng)用于月份查詢,而無(wú)需設(shè)置select表單。

這是一個(gè)基于jQuery的可以選擇年份和月份的月份拾取插件,你可以設(shè)置點(diǎn)擊頁(yè)面上的任意元素觸發(fā)彈出年月選擇面板,可以是一個(gè)鏈接也可以是一個(gè)輸入框,廣泛應(yīng)用于月份查詢,而無(wú)需設(shè)置select表單。


效果展示        源碼下載  

HTML

首先將monthpicker插件相關(guān)的css和js文件載入,大家可以到源碼下載里下載css和js文件。

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

然后在要放置年月的位置加入如下代碼,可以是輸入框可以是鏈接等任意HTML元素。

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

jQuery

接下來(lái)很簡(jiǎn)單,我們來(lái)調(diào)用插件。

$(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 
}) 
}); 

代碼中可以看出,參數(shù)years是一個(gè)數(shù)組,可以設(shè)置年份,參數(shù)topOffset就是觸發(fā)彈出的面板與當(dāng)前元素的偏移距離。onMonthSelect是選擇月份后的回調(diào)函數(shù)。現(xiàn)在運(yùn)行網(wǎng)頁(yè),點(diǎn)擊鏈接或輸入框,會(huì)彈出一個(gè)年月選擇面板,選擇好后,面板消失,并在鏈接上或輸入框內(nèi)顯示所選的年月。至于彈出面板中的月份樣式可以修改jquery.monthpicker.css中的css來(lái)獲取最佳視覺(jué)效果。

相關(guān)文章

最新評(píng)論