ホームページ >ウェブフロントエンド >jsチュートリアル >jquery Webカレンダー表示制御calendar3.1の使い方を詳しく解説
jquery Webカレンダー表示制御calendar3.1の使い方を詳しく解説
- 高洛峰オリジナル
- 2016-12-05 14:30:241518ブラウズ
カレンダー コントロールに関しては、多くの試みを行い、シンプルで使いやすいカレンダー コントロールの開発に取り組んできました。このコントロールを参照して、1 行の js コードでカレンダーを作成してみます。パラメーターを追加すると、豊富な外観と機能を備えたカレンダーをカスタマイズできます。 Calendar 3.1 は、私にとって最初は満足している製品です。
カレンダーには 2 つの一般的なシナリオがあります。たとえば、特定の場所に日付を入力する必要がある場合、入力ボックスをクリックすると日付を選択するためのカレンダーが表示されます。カレンダーは、通常、装飾のためにページのどこかに表示されます。これまでのエッセイではすべて 1 番目のタイプのカレンダーを紹介してきましたが、今日紹介する Calendar 3.1 は 2 番目のタイプのカレンダーです
最初に見るのはもちろん効果です。まずすっぴんの写真を見てください。
その後、呼び出しプロセスでいくつかのパラメータを指定することで、より美しいカレンダーを定義できます。これは単なるデモンストレーションです。赤と緑の色を使用した最後の写真:
領域の幅が狭い場合。 200px を超えると、カレンダーを正常に表示できないというメッセージが表示されます:
このコントロールの使用方法を見てみましょう。
まず、いつものようにjqueryライブラリとcalendar-3.1-jsを参照し、幅>=200pxのdivを準備します。このdivのIDがtestの場合、高さは1つだけです。文 Calendar_init($("#test ")); は div 内のカレンダーを表示します。コードは次のとおりです。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Calendar 3.1</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/calendar-3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
calendar_init($("#test"));//在id=test的DIV中显示日历
});
</script>
<style>
#test {
width:200px;
height:auto;
overflow:hidden;
border:solid 1px;
margin-bottom:20px;
}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
上記は、プレーン メイクアップ エフェクトのコードです。それでも UI をカスタマイズしたい場合は、calendar_init() を呼び出すときに 2 番目のパラメータを追加できます。厚化粧の写真のコードは次のとおりです。
calendar_init($("#test"),{
title_color:"yellow",
title_bg_color:"red",
day_color:"brown",
day_bg_color:"green",
date_bg_color:"pink",
date_color:"blue",
date_active_color:"red"
});
Calendar_init 関数の 2 番目のパラメーターはオプションで、型はキーと値のペアを含むオブジェクトです。次の表に、その意味と選択を示します。このパラメータの各キー 値:
Calendar_init 関数の最初のパラメータは必須であり、カレンダーがどのコンテナに表示されるかを示すために使用されます。コンテナの幅が 200px 未満の場合、上の 3 番目の図のエラー メッセージが表示されます。