ホームページ > ウェブフロントエンド > jsチュートリアル > ソースコード download_jquery を使用した jQuery に基づく月選択プラグインの実装

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

WBOY
リリース: 2016-05-16 15:23:01
オリジナル
1401 人が閲覧しました

これは年と月を選択できる 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 を変更して、最高の視覚効果を得ることができます。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート