PROGRAMMING
javascript
- ページャーを作る（簡易版）
- ページャーを作る 4/4
(クロスブラウザ対策)
(ページャー表示用メソッド)
(ページャーの使い方) - ページャーを作る 3/4
(イベント登録) - ページャーを作る 2/4
(スタイルの設定) - ページャーを作る 1/4
(ページャー用関数を準備)
(各要素を生成) - 自作カレンダーを作る 6/6
(11.～14.各種メソッド)
(15.簡単な使い方) - 自作カレンダーを作る 5/6
(09.祝休日の判定)
(10.閏年の判定) - 自作カレンダーを作る 4/6
(08.イベントの設定) - 自作カレンダーを作る 3/6
(07.スタイルの設定) - 自作カレンダーを作る 2/6
(05.カレンダーのマスのみ作成)
(06.各マスへ年月・日付を埋め込み) - 自作カレンダーを作る 1/6
(01.カレンダーの基を準備)
(02.各月の日数や年月日の区切り文字)
(03.前月・次月指定時の処理)
(04.前月・次月部分の年月を算出) - JS-Image-Resizerを使って画像を高画質で縮小
- ファイルを作成しローカルに保存
- モーダルウィンドウをクラス化
- ストップウォッチを作る
- XMLHttpRequest Lebel2を試してみる
- jQuery：Tableで親・子・兄弟要素を取得
- 文字列をセパレータ文字で分割し配列で返す関数
- forループのカウンタを使用している関数の定義
- クロージャの使いどころ
- JSONPでクロスドメイン
- AjaxでJSON形式のデータを扱う
- jsファイルからjsファイルを呼び出す
- jQuery：モーダルウィンドウを作ってみる
CSS
- フォルダ構成をCSSで見やすくする
- シンタックスハイライトPrismのカスタマイズ
- リスト(li)を中央に配置する
- ブロックレベル要素全体をリンクにする
- 実践と点線の交わり部分のギザギザをすっきりさせる
PHP
Java
- IntelliJ.Gradle.JavaFX(6) プラグイン org.beryx.jlink を使ってみる
- IntelliJ.Gradle.JavaFX(5) NSISでインストーラーを作る
- IntelliJ.Gradle.JavaFX(4) exewrapで実行可能jarをexe化する
- IntelliJ.Gradle.JavaFX(3) Jlink でカスタム JRE を作る
- IntelliJ.Gradle.JavaFX(2) すべての依存対象を含んだ Fatjar を作る
- IntelliJ.Gradle.JavaFX(1) アプリケーションを作る
- javaのコンパイルと実行
- イメージを回転する
- Exif情報を簡単に取得できるライブラリ
- 高画質で画像縮小
- JDBCによるデータベース操作
ページャーを作る 3/4
「ページャーを作る」の 3ページ目です。
ページャーを作る 1/4
1. ページャー用関数を準備
2. プロパティやメソッドの追加（各要素を生成）
ページャーを作る 2/4
3. プロパティやメソッドの追加（スタイルの設定）
ページャーを作る 3/4
4. プロパティやメソッドの追加（イベント登録）
ページャーを作る 4/4
5. プロパティやメソッドの追加（イベントのクロスブラウザ対策）
6. プロパティやメソッドの追加（ページャー表示用メソッド）
7. ページャーの使い方
MkenPagerのダウンロード(mkenPager.js)
mkenPager.zip
4.プロパティやメソッドの追加（イベント登録）
いよいよ難関のイベントです。この部分に何日もかかってしまいました。
setEvent: function(){
// イベントのthisはインスタンスではなくイベントの発生元を指すので
// インスタンスは一旦ローカル変数に代入して使用する
var self = this;
var lastIdx = Math.floor(self.totalRow / self.viewCount);
// ページ番号用リストの最後のIndex
if(lastIdx > 9){lastIdx = 9;}
// 現在選択されているページ番号用リスト(0～9)
var currentIdx = 0;
// 現在選択されているページ番号
var currentPageNum = 1;
var prev = document.getElementById(this.tagId + 'Prev');
var next = document.getElementById(this.tagId + 'Next');
var minus = document.getElementById(this.tagId + 'Minus');
var plus = document.getElementById(this.tagId + 'Plus');
var pageNumGroup = document.getElementById(this.tagId + "PageNumGroup");
var nodes = pageNumGroup.childNodes;
// ページ番号クリック **********
for(var i = 0; i < nodes.length; i++){
this.addListener(nodes[i], "click", function(){
// クリックされたインデックスを取得
var count = 0;
var node = this;
// 直前の兄弟がある限りカウンターを増やすことで自分が何番目かがわかる
while(node.previousSibling) {
++count;
node = node.previousSibling;
}
var oldIdx = currentIdx; // 直前のliインデックス
currentIdx = count;
// 先頭ページの場合、中央のページ番号部分を先頭ページ側に寄せる
if(currentIdx == 0){
for(var j = 1; j <= 8; j++){
nodes[j].childNodes[0].nodeValue = j + 1;
}
}
// 最終ページの場合、中央のページ番号部分を最終ページ側に寄せる
if(currentIdx == 9){
var k = 8;
for(var j = 1; j <= 8; j++){
nodes[j].childNodes[0].nodeValue = self.lastPageNum - k;
k--;
}
}
// ページ番号のstyleを元に戻す
defaultPageStyle(nodes[oldIdx]);
// クリックされたページ番号のstyleを変える
newPageStyle(this);
// 現在のページ番号を取得
getPageNum(this);
// 先頭データ行番号を取得
getTopRowNum();
// ボタンスタイル変更
btnStyle(prev, 0);
btnStyle(next, lastIdx);
});
}
// 前へボタンクリック **********
this.addListener(prev, 'click', function(){
if(currentIdx == 0){ // 先頭ページなら何もしない
return;
}else{
// ページ番号のstyleを元に戻す
defaultPageStyle(nodes[currentIdx]);
// 最初と2番目リストのページ差が2ページ以上ある場合は
// 最初と最後を除いた中央部のリストのページ番号を減らす
if((currentIdx == 1) && ((currentPageNum - 1) >= 2)){
for(var i = 1; i <= 8; i++){
var pageNum = Number(nodes[i].childNodes[0].nodeValue);
nodes[i].childNodes[0].nodeValue = pageNum - 1;
}
}else{
// インデックスを減らす
currentIdx--;
}
// ページ番号の新スタイル
newPageStyle(nodes[currentIdx]);
// 現在のページ番号を取得
getPageNum(nodes[currentIdx]);
// 先頭データ行番号を取得
getTopRowNum();
}
// ボタンスタイル変更
btnStyle(prev, 0);
next.style.cursor = "pointer";
next.style.opacity = 1;
// プラスマイナスのカーソル変更
plusMinusStyle();
});
// 次へボタンクリック **********
this.addListener(next, 'click', function(){
if(currentIdx == lastIdx){ // 最終ページなら何もしない
return;
}else{
// ページ番号のstyleを元に戻す
defaultPageStyle(nodes[currentIdx]);
// 最初と最後を除いたリストのページ番号を増やす
//（最後とその前のリストのページ差が2ページ以上の場合）
if((currentIdx == 8) && ((self.lastPageNum - currentPageNum) >= 2)){
for(var i = 1; i <= 8; i++){
var pageNum = Number(nodes[i].childNodes[0].nodeValue);
nodes[i].childNodes[0].nodeValue = pageNum + 1;
}
}else{
// インデックスを増やす
currentIdx++;
}
// ページ番号の新スタイル
newPageStyle(nodes[currentIdx]);
// 現在のページ番号を取得
getPageNum(nodes[currentIdx]);
// 先頭データ行番号を取得
getTopRowNum();
}
// ボタンスタイル変更
btnStyle(next, lastIdx);
prev.style.cursor = "pointer";
prev.style.opacity = 1;
// プラスマイナスのカーソル変更
plusMinusStyle();
});
// マイナスボタンクリック **********
this.addListener(minus, 'click', function(){
var node1Val = Number(nodes[1].childNodes[0].nodeValue);
// 2番目のページ番号から10を差し引いた結果が2ページ未満の場合
if((node1Val - 10) < 2){
// 3ページから11ページならば中央部のページ番号を1ページ側にずらす
if(node1Val > 2 && node1Val < (2 + 10)){
for(var i = 1; i <= 8; i++){
var pageNum = Number(nodes[i].childNodes[0].nodeValue);
nodes[i].childNodes[0].nodeValue = pageNum - (node1Val - 2);
}
// それ以外は何もしない
}else{
return;
}
}else{
// 最初と最後を除いた中央部のリストのページ番号を10づつ減らす
for(var i = 1; i <= 8; i++){
var pageNum = Number(nodes[i].childNodes[0].nodeValue);
nodes[i].childNodes[0].nodeValue = pageNum - 10;
}
}
// 現在のページ番号を取得
getPageNum(nodes[currentIdx]);
// 先頭データ行番号を取得
getTopRowNum();
// プラスマイナスのカーソル変更
plusMinusStyle();
});
// プラスボタンクリック **********
this.addListener(plus, 'click', function(){
var node8Val = Number(nodes[8].childNodes[0].nodeValue);
// ページ数が10に満たない場合
if(lastIdx < 9){
return;
}
// 9番目のページ番号に10を足した結果が最後から１ページ前のページ番号を超える場合
if((node8Val + 10) > (self.lastPageNum - 1)){
// 9番目のページ番号が（最終ページ番号－10）から（最終ページ－2）の間ならば
// 中央部のページ番号を最終ページ側にずらす
if(node8Val >= (self.lastPageNum - 10)
&& node8Val <= (self.lastPageNum -2)){
for(var i = 1; i <= 8; i++){
var pageNum = Number(nodes[i].childNodes[0].nodeValue);
nodes[i].childNodes[0].nodeValue =
pageNum + ((self.lastPageNum - 1) - node8Val);
}
// それ以外は何もしない
}else{
return;
}
}else{
// 最初と最後を除いた中央部のリストのページ番号を10づつ増やす
for(var i = 1; i <= 8; i++){
var pageNum = Number(nodes[i].childNodes[0].nodeValue);
nodes[i].childNodes[0].nodeValue = pageNum + 10;
}
}
// 現在のページ番号を取得
getPageNum(nodes[currentIdx]);
// 先頭データ行番号を取得
getTopRowNum();
// プラスマイナスのカーソル変更
plusMinusStyle();
});
// 関数：既定のページ番号のスタイル
function defaultPageStyle(node) {
node.style.cursor = "pointer";
node.style.backgroundColor = "rgba(130,210,253,0.1)";
}
// 関数：新たに適用するページ番号のスタイル
function newPageStyle(node) {
node.style.cursor = "default";
node.style.backgroundColor = "rgba(130,210,253,0.5)";
}
// 関数：ボタンスタイル変更
function btnStyle(node, nodeIdx) {
if(currentIdx == nodeIdx){
node.style.cursor = "default";
node.style.opacity = 0.5;
}else{
node.style.cursor = "pointer";
node.style.opacity = 1;
}
}
// 関数：プラスマイナスのカーソル変更
function plusMinusStyle(){
var node1 = Number(nodes[1].childNodes[0].nodeValue);
var node8 = Number(nodes[8].childNodes[0].nodeValue);
var node9 = Number(nodes[9].childNodes[0].nodeValue);
if(node1 - 1 == 1){
minus.style.cursor = "default";
}else{
minus.style.cursor = "pointer";
}
if(node9 - node8 == 1){
plus.style.cursor = "default";
}else{
plus.style.cursor = "pointer";
}
}
// 関数：現在のページ番号を取得
function getPageNum(node) {
var txtNode = node.childNodes[0];
currentPageNum = Number(txtNode.nodeValue);
}
// 関数：先頭データ行番号を取得
function getTopRowNum() {
self.currentRow = 1 + (currentPageNum - 1) * self.viewCount;
}
},