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：モーダルウィンドウを作ってみる
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によるデータベース操作
Kotlin
ページャーを作る 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";
}
},