jQuery にリンクされたカレンダーの実装 code_jquery

レンダリングを見てみましょう

1. まず機能について説明します:

1. 「OK」をクリックしてカレンダーを表示します
2.もう一度クリックして非表示にするか、DOM からこのカレンダーを削除します。このように手順1と2を繰り返します。
3. カレンダーに現在の月の日付 (毎日が何日か) を表示します。
4. 左側のカレンダーを曜日に対応させます。


2. HTML の構造について話しましょう。
1. 上の青いのは、当月、前月、翌月を表示する DIV です。
2. 次の日付と週はテーブル構造を使用してデータを保存します。曜日は thead に格納され、日付は tbody に格納されます。


3. 関数展開分析:
3.1. 最初の 2 つの関数
JQUERY でトグルを使用したことを思い出します。それは簡単に解決できます。

3.2. カレンダーに今月の日付の数を表示させますか?
日付に関係するので、オブジェクト Deta が思い浮かびます。このオブジェクトでは、特定の年、特定の日、特定の月、特定の日、特定の曜日を取得または設定できます。ただし、今月の日数を直接取得することはできません。 ?何をするか？
したがって、私たちは判断することしかできません。当月の値に基づきます。日数を変数に保存してみましょう。 (オブジェクトによって取得される現在の月は 1 である必要があります。これは 0 から計算されます)。
たとえば、現在は 5 月であるため、値 31 が変数に格納されます。つまり、今月は 31 日あります。

3.3. 現在の月の日付を曜日に対応させます。 ?
この問題の解決策は、月の最初の日とそれに対応する曜日を取得することです。以下のような順番で並べることができます。ここでの順序配置について私が理解していることは、日付が TD タグに格納されているため、TBODY 内のこれらの TD のインデックスがすべて配置されているため、その TD に数値 1 を挿入し、次の数値 2 が後の TD に挿入されるということです。 。

3.4. 左側のカレンダーを接続します。

ここで注目するのは「関連付け」です。最近「カウントダウン」を書き、今回は「連携カレンダー」を書きましたが、連携ドロップダウン メニューなどの「連携ドロップダウン メニュー」を思い出しました。地方と都市のメニュー; これらにはすべて「リンク」が含まれます。
要約すると、「リンク」する必要があるものには「ポイント」 (ここではそう呼んでおきます) が必要です。作るべきことは必ずこの点に関連するものであり、この点をこのように変更すると、この点に関連する他のものも変更され、「リンク」の効果が得られます。

たとえば、最後の「カウントダウン」の「ポイント」は、現在時刻と設定された将来の時刻の間の「合計ミリ秒数」です。カウントダウンで表示される時、分、秒はすべて「合計ミリ秒」に関係しており、「合計ミリ秒」が変化する限り、時間、分、秒もすべて変化します。 >
このカレンダー連携では、その中の「ポイント」は、現在の日付オブジェクトが作成された後に取得される年と月です。年、月、行き帰りに応じて、右側、つまり来月何を表示するかを設定します。そして、現在取得している年月が変われば、それ以降も当然変化します。それも「つながっている」のです。
もちろん、まだ対処すべき細かい点がいくつかあります。


4. コードが長すぎるため、内部のコンテンツは記事の最後にあるデモからダウンロードできます

コードをコピー コードは次のとおりです:

$(function(){
var nowDate = $(".nowDate"), //左側のカレンダー ボックス
nextDate = $(".nextDate"), // カレンダー右側の Box
lstrTd = "", //左側の日付の DOM 構造 row
rstrTd = "", //右側の日付の DOM 構造 row
lrows = 0, //左側の日付の番号rows
rows = 0, //右側の日付行数
iHtmlNow = "", //左側のカレンダー構造
iHtmlNext = "", //右側のカレンダーの構造
nowTitleDateY = "", // タイトルの年が左側に表示されます
nowTitleDateM = "", // 月が左側に表示されます
nowlastM = "", // 月が左側に表示されます
nextTitleDateY = "", //右側にタイトルの年
nextTitleDateM = "", //右側に表示される月
nextLastM = "", //右側に表示される月
creatbtu = true, //スイッチHTML 構造を 1 回だけ作成する
NumDay = 0, //左側は各月の日数;
rNumDay = 0, //左側は各月の日数; = 0, //左側の現在の月の最初の日が曜日です
rfday = 0 //右側の現在の月の最初の日が曜日です
/ /Create date row
function creatTr(l,r){
}
/*現在の月と来月の日付と年を作成します
* ここには 3 つの状況があります。現在の月は 12 月です。 、現在の月は 11 月、現在の月は 1 月です。
*/
function getTitleDate(){
var odate = new Date()
//現在の月が 12 月の場合、右側の月は 1 月である必要があります
//現在の月が 11 月の場合、右側の月は 1 月である必要があります
/ /現在の月が 1 月の場合、左側の月は次のようになりますDecember
}
/*現在の月の最初の日、それが何曜日であるかを取得します
*最初に、日付オブジェクトを作成した年、月、および日数を設定しますこれらを設定した後、getDay() メソッドを使用して、日付を設定した週数を取得します。
*/
function getfirstD(m1,y1 ,m2,y2){
}
//月のサイズに基づいて日数を取得します。
function getTdDay(m1,y1,m2,y2){
}
//次の年のパラメーターに従って、次の年であるかどうかを判断します。 Runyear です。つまり、両方が満たされる場合は 4 で割り切れますが、100 で割り切れるか、400 で割り切れます。 HMTL 構造体を作成します
function creatHtml(creatbtu){
//現在の月の最初の日が何曜日であるかに応じて、すべての日付を格納するために複数の行を生成します
}
//対応する TD に日付を挿入します
function insertdate(d,t){
// 左側に挿入
// 横に挿入
}
// DOM に挿入
function insertHtml(){
}
//DOM から削除
function delHtml(){
}
//[OK] をクリックしてカレンダーを表示または非表示にします
$(" input[type=button]").toggle(function (){
//OKボタンの連続クリックを防ぐためにこの判定を追加
if(!nowDate.add(nextDate).is(":animated" )&&nowDate.add(nextDate).is(":empty" )){
//タイトルの上にある年と月を取得します
getTitleDate()
//その月の日付を取得します。 left and right
getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
// 左と右の週の最初の曜日を取得します
getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY); >//HTML 構造を作成します
creatHtml();
//構造を DOM に挿入します
insertHtml()
//左右のテーブルに日付を挿入します TD
insertdate(lfday,rfday);
//日付を展開します
nowDate.add (nextDate).slideDown(200);
}
},function(){
//追加連続クリックを防ぐためのこの判断
if(!nowDate.add(nextDate).is(" :animated")){
//カレンダーを折りたたむ
nowDate.add(nextDate).slideUp(200) ;
//DOM からカレンダー構造を削除します
}
})


4.1 このコードは理解できます。コメントを見て構造を確認します。
1. 現在の年と月を取得します (リンクされた「ポイント」)
2. 左側と右側の対応する月の日数を取得します。 > 3. それぞれ曜日に対応する、左側と右側の月の 1 を取得します。
4. 以上で、HTML 構造を作成できます (作成するかどうかを決定する必要があるため)月の日付の配置に従って 5 行または 6 行になります。日付を表示します)
5. 作成した構造を DOM に挿入します
6. 次に、取得した日数、つまり日付番号を対応するテーブルの TD に挿入して、日付を格納します。 🎜>

5. 概要


1. TR を個別の行で処理する必要はなく、tbody 内の td を配列全体として使用し、データをそれ; (数字が表示されるので、ちょうどいいです)

2. 「リンケージ」ルール

3. 大量のデータを挿入するなどは、ループで解決する必要があります。
4．このように大量のデータがある場合は、最初に配列に格納する必要があります (この例では数値が表示されているため、ループ内で変数を直接使用できます。値の場合は、最初に配列に格納する必要があります)
オンライン デモ:
http://demo.jb51.net/js/2012/mycalendar/

デモのダウンロード:
mycalendar_jb51。 rar