ソースコード download_jquery を使用した jQuery に基づく月選択プラグインの実装

これは年と月を選択できる jQuery ベースの月選択プラグインで、ページ上の任意の要素をクリックしてポップアップの年と月の選択パネルをトリガーするように設定できます。入力ボックスは、選択フォームを設定せずにクエリで広く使用されます。

エフェクト表示 ソースコードダウンロード

HTML

まず、monthpicker プラグインに関連する 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

次のステップは非常に簡単です。プラグインを呼び出しましょう。

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

コードからわかるように、パラメーター years は配列であり、パラメーター topOffset はポップアップをトリガーするパネルと現在の要素の間のオフセット距離です。 onMonthSelect は、月を選択した後のコールバック関数です。 Web ページを実行し、リンクまたは入力ボックスをクリックすると、年と月の選択パネルが表示され、選択するとパネルが消え、選択した年と月がリンクまたは入力ボックスに表示されます。ポップアップ パネルの月のスタイルに関しては、jquery.monthpicker.css の CSS を変更して、最高の視覚効果を得ることができます。