jiichan.com

PROGRAMMING

javascript
CSS
PHP
Java

ページャーを作る 2/4

「ページャーを作る」の 2ページ目です。

  ページャーを作る 1/4   1. ページャー用関数を準備 2. プロパティやメソッドの追加(各要素を生成)
  ページャーを作る 2/4   3. プロパティやメソッドの追加(スタイルの設定)
  ページャーを作る 3/4   4. プロパティやメソッドの追加(イベント登録)
  ページャーを作る 4/4   5. プロパティやメソッドの追加(イベントのクロスブラウザ対策) 6. プロパティやメソッドの追加(ページャー表示用メソッド) 7. ページャーの使い方



MkenPagerのダウンロード(mkenPager.js)
mkenPager.zip

3.プロパティやメソッドの追加(スタイルの設定)

次はスタイルの設定です。長いのでスタイルシートでとも考えましたが、ファイルの扱いも考えコードに埋め込みました。

setStyle: function(){
	// 全体を囲むdiv
	var pager = document.getElementById(this.tagId + 'Pager');
	pager.style.display = "flex";	// floatを使用しない
	pager.style.width = "447px";
	pager.style.height = "36px";
	pager.style.margin = "30px";
	pager.style.border = "1px solid rgba(0,128,128,0.5)";
	pager.style.borderRadius = "15px";
	// 前へボタン
	var prev = document.getElementById(this.tagId + 'Prev');
	prev.style.width = "26px";
	prev.style.height = "26px";
	prev.style.margin = "3px 20px";
	prev.style.borderRadius = "13px";
	prev.style.backgroundColor = "#666666";
	prev.style.cursor = "default";
	prev.style.opacity = 0.5;
	// 前へボタンの三角
	var prevChild = prev.firstChild;
	prevChild.style.width = "0px";
	prevChild.style.height = "0px";
	prevChild.style.borderTop = "6px solid transparent";
	prevChild.style.borderRight = "10px solid #ffffff";
	prevChild.style.borderBottom = "6px solid transparent";
	prevChild.style.borderLeft = "10px solid transparent";
	prevChild.style.margin = "7px 0 0 -3px";
	// 次へボタン
	var next = document.getElementById(this.tagId + 'Next');
	next.style.width = "26px";
	next.style.height = "26px";
	next.style.margin = "3px 20px";
	next.style.borderRadius = "13px";
	next.style.backgroundColor = "#666666";
	next.style.cursor = "pointer";
	// 次へボタンの三角
	var nextChild = next.firstChild;
	nextChild.style.width = "0px";
	nextChild.style.height = "0px";
	nextChild.style.borderTop = "6px solid transparent";
	nextChild.style.borderRight = "10px solid transparent";
	nextChild.style.borderBottom = "6px solid transparent";
	nextChild.style.borderLeft = "10px solid #ffffff";
	nextChild.style.margin = "7px 0 0 9px";
	// マイナスボタン
	var minus = document.getElementById(this.tagId + 'Minus');
	minus.style.width = "23px";
	minus.style.height = "26px";
	minus.style.margin = "4px 0px";
	minus.style.textAlign = "center";
	minus.style.color = "rgba(0,102,153,0.5)";
	minus.style.backgroundColor = "#eee";
	minus.style.fontWeight = "bold";
	minus.style.fontSize = "14px";
	minus.style.border = "1px solid rgba(0,128,128,0.5)";
	minus.style.cursor = "default";
	// プラスボタン
	var plus = document.getElementById(this.tagId + 'Plus');
	plus.style.width = "23px";
	plus.style.height = "26px";
	plus.style.margin = "4px 0px";
	plus.style.textAlign = "center";
	plus.style.color = "rgba(0,102,153,0.5)";
	plus.style.backgroundColor = "#eee";
	plus.style.fontWeight = "bold";
	plus.style.fontSize = "14px";
	plus.style.border = "1px solid rgba(0,128,128,0.5)";
	if(this.lastPageNum < 11){
		plus.style.cursor = "default";
	}else{
		plus.style.cursor = "pointer";
	}
	// 中央部のUL(ページ番号のコンテナ)
	var pageNumGroup = document.getElementById(this.tagId + "PageNumGroup");
	pageNumGroup.style.width = "271px";
	pageNumGroup.style.height = "26px";
	pageNumGroup.style.margin = "4px 0";
	pageNumGroup.style.textAlign = "center";
	pageNumGroup.style.fontSize = "13px";
	// ul内のli (ページ番号部)
	var nodes = pageNumGroup.childNodes;
	for(var i = 0; i < nodes.length; i++){
		nodes[i].style.display = "inline-block";
		nodes[i].style.width = "23px";
		nodes[i].style.height = "26px";
		nodes[i].style.margin = "0 1px";
		nodes[i].style.paddingTop = "1px";
		nodes[i].style.border = "1px solid rgba(0,128,128,0.5)";
		nodes[i].style.color = "#006699";
		if(i === 0){
			nodes[i].style.cursor = "default";
			nodes[i].style.backgroundColor = "rgba(130,210,253,0.5)";
		}else{
			nodes[i].style.cursor = "pointer";
			nodes[i].style.backgroundColor = "rgba(130,210,253,0.1)";
		}
	}
	// 1ページ目と最終ページを外側にずらす
	nodes[0].style.marginRight = "5px";
	nodes[9].style.marginLeft = "5px";
	// ページが無い部分のスタイル
	var nonePage = document.getElementsByClassName(this.tagId + "nonePage");
	for(var i = 0; i < nonePage.length; i++){
		nonePage[i].style.borderColor = "#eeeeee";
		nonePage[i].style.cursor = "default";
	}
},

次のページ