SQLの窓

2016年11月22日


1会話・IFRAME(TCPDF)テンプレート : jQuery + Bootstrap(css) + mmenu + Firebase + TCPDF + PHP

デモページ




▼ このプラグインを使用して、ヘッダ部分で条件入力して PDF をその下の IFRAME へ表示するテンプレートです。
かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン

全体の表示部分のテンプレート部分は、jQuery + Bootstrap(css) + mmenu で構成されており、独自の仕様ではありますが、見ればだいたい解るようには作成してあります。

アプリケーション部分

データ部分 : Firebase
PDF部分 : TCPDF
処理部分 : PHP

となっており、Firebase は PHP から直接読み込む必要があるので、Firebase Database REST API を使用しています。

TCPDF は文字列印字部分をユーザ関数化して、昔ながらの印刷用アルゴリズムで出力しています。

TCPDF 関数部分 : print.php
<?php
define ('K_PATH_FONTS', "tcpdf/");
require_once('tcpdf/tcpdf.php');

// ************************************************
//   P or PORTRAIT(縦:既定)
//   L or LANDSCAPE(横))
// ---------------------------
//   pt: ポイント
//   mm: mm(既定)
//   cm: cm
//   in: インチ
// ---------------------------
//   用紙サイズ
// ---------------------------
// boolean $unicode = true
// ---------------------------
// String $encoding = 'UTF-8'
// ---------------------------
// boolean $diskcache = false
// ---------------------------
// PDF/A モード
// ---------------------------
// 
// 全てデフォルトなので $pdf = new TCPDF("L") でもOK
// ************************************************
$pdf = new TCPDF("L");
/*
$pdf = new TCPDF(
	"L",
	"mm",
	"A4",
	true,
	"UTF-8",
	false,
	false
);
*/

// ************************************************
// 設定
// ************************************************
$pdf->setFontSubsetting(false);
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
$pdf->SetAutoPageBreak(false);


// ************************************************
// デバッグ用ログ
// ************************************************
function log_out( $text ) {

	// クリア
	if ( $text == null ) {
		file_put_contents("log.txt","");
		return;
	}

	// 書き込み
	file_put_contents("log.txt", $text . "\n", FILE_APPEND );

}

// ************************************************
//  テキスト印字
// $p は L で左揃え、R で右揃え
// $w : 矩形領域の幅(1だと最低幅) : 右揃えに必要
// $h : 矩形領域の高さ
// http://tcpdf.penlabo.net/method/c/Cell.html
// ************************************************
function user_text( $pdf, $x, $y, $text, $w=1, $h=0, $p="L" ) {

	text( $pdf, $x, $y, $text, $w, $h, $p );

	return $y;

}

// ************************************************
// 位置指定印字
// ※ 改行コードで自動改行
// ※ ページあふれで自動改ページ
// ※ 内部印字位置は保存( 元に戻す )
// ************************************************
function text( $pdf, $x=0, $y=0, $txt='', $w=1, $h=0, $p="L" ) {

	$a = $pdf->GetX();
	$b = $pdf->GetY();

	$hm = $pdf->getPageHeight( );
	$dm = $pdf->getPageDimensions();
	$tm = $dm['tm'];
	$bm = $dm['bm'];

	$txt = str_replace( "\r","", $txt );
	$data = explode("\n", $txt );
	if ( count( $data ) > 1 ) {
		for( $i = 0; $i < count($data); $i++ ) {
			if ( $i == 0 ) {
				$pdf->SetXY( $x, $y );
			}
			else {
				$y += $pdf->getLastH();
				if ( $y >= ( $hm - $tm - $bm ) ) {
					$pdf->AddPage();
					$y = $tm;
				}
				$pdf->SetXY( $x, $y );
			}
			$pdf->Cell($w, $h, $data[$i], 0, 0, $p);
		}
	}
	else {
		$pdf->SetXY( $x, $y );
		$pdf->Cell($w, $h, $txt, 0, 0, $p);
	}
	$y += $pdf->getLastH();

	$pdf->SetXY($a,$b);

}


?>

フォントには、メイリオを使用しています。以下を参照して下さい
TCPDF で非埋め込み型として『メイリオ』を使う手順

フォントファイルは、define ('K_PATH_FONTS', "tcpdf/"); で指定した場所です。
※ MSゴシックとMS明朝も同梱しています。

印刷用アルゴリズム部分
<?php
// ************************************************
// セッションとキャッシュなし
// ************************************************
session_cache_limiter('nocache');
session_start();

// ************************************************
// 印字関数
// ************************************************
require_once("print.php");

log_out(null);
$rh		= 8;	// 行間の距離
$hh		= 40;	// ヘッダーの下の次の印字位置
$rmax	= 15;	// ページ内の最大明細行数
// ************************************************
// フォント
// 第二引数は フォント・スタイル(空文字で標準)
// http://tcpdf.penlabo.net/method/s/SetFont.html
// ************************************************
$pdf->SetFont('meiryo001', '', 14);

$pdf->AddPage();

// ************************************************
// データベース
// ※ パスの先にデータが無い事は考慮していない
// ************************************************
$url = "https://freebase-654b7.firebaseio.com/class.json";
$file = @file_get_contents($url);
if ( $file !== false ) {
	// 連想配列形式で返す
	$result = json_decode( $file, true );

	if ( $result == null ) {
		// テキストのサイズ変更
		$pdf->SetFont('meiryo001', '', 20);
		// テキストの色
		$pdf->SetTextColor(255, 0, 0);
		user_text( $pdf, 10, 10, 'データが存在しません' );
		$pdf->Output("test_output.pdf", "I");
		exit();
	}

}

$url = "https://freebase-654b7.firebaseio.com/refdata/syozoku.json";
$file = @file_get_contents($url);
if ( $file !== false ) {
	$syozoku = json_decode( $file, true );

	// log_out(print_r($syozoku,true));

	if ( $syozoku == null ) {
		$syozoku = json_decode( '{"0001":"営業部第一","0002":"技術開発","0003":"人事部"}', true );
	}
}

// ************************************************
// 印刷用変数
// ************************************************
$counter = 0;	// ページ用カウンタ
$lcount = 0;	// 行数カウンタ
$sum = 0;		// ページ毎合計
$sumall = 0;	// 総合計

// 最初のヘッダーを出力して現在位置(y)を取得
$cur_position = print_header( $pdf );

// ************************************************
// 処理ループ
// ************************************************
foreach( $result as  $key => $obj ) {

	if ( $_GET['fld1'] != '' ) {
		if ( mb_strpos($obj["name"],$_GET['fld1'],0,"utf-8") === false ) {
			continue;
		}
	}

	$lcount++;
	if ( $lcount > $rmax ) {
		$counter++;
		$lcount = 0;
		user_text( $pdf, 108, $cur_position, "ページ計" );
		user_text( $pdf, 138, $cur_position, number_format($sum), 20, 0, "R" );
		$sum = 0;

		// 新しいページ
		$pdf->AddPage();
		$cur_position = print_header( $pdf );
	}

	user_text( $pdf, 10, $cur_position, $obj["code"] );
	user_text( $pdf, 28, $cur_position, $obj["name"] );
	user_text( $pdf, 51, $cur_position, $obj["furi"] );
	user_text( $pdf, 95, $cur_position, $syozoku[$obj["syozoku"]] );
	if ( $obj["sex"] == "0" ) {
		$pdf->Image("man.png", 125+3.2, $cur_position, 5, 5);
	}
	else {
		$pdf->Image("lady.png", 125+3.2, $cur_position, 5, 5);
	}
	user_text( $pdf, 138, $cur_position, number_format($obj["kyuyo"]), 20, 0, "R" );
	$sum += $obj["kyuyo"];
	$sumall += $obj["kyuyo"];

	// 手当ては文字列として設計されているので数値化
	user_text( $pdf, 163, $cur_position, number_format($obj["teate"]+0), 20, 0, "R" );
	user_text( $pdf, 183, $cur_position, $obj["birthday"] );

	$cur_position += $rh;

}

// ************************************************
// 最大行数が、最後の2行が入るように想定されて
// いるので、以下は無条件に出力する
// ************************************************

user_text( $pdf, 108, $cur_position, "ページ計" );
user_text( $pdf, 138, $cur_position, number_format($sum), 20, 0, "R" );

// 次の行
$cur_position += $rh;
user_text( $pdf, 108, $cur_position, "総合計" );
user_text( $pdf, 138, $cur_position, number_format($sumall), 20, 0, "R" );


// ブラウザへ PDF を出力します
$pdf->Output("test_output.pdf", "I");

// デバッグ用
file_put_contents( "../log/global.txt", print_r($GLOBALS, true) );
//file_put_contents( "../log/global.txt", "[_GET]\n".print_r($_GET, true)."\n"."[_POST]\n".print_r($_POST, true)."\n"."[_COOKIE]\n".print_r($_COOKIE, true)."\n"."[_SESSION]\n".print_r($_SESSION, true) );

// ***********************************************
// ヘッダ印字
// ***********************************************
function print_header( $pdf ) {

	global $counter;

	$page_info = $pdf->getPageDimensions();
	$cur_position = $page_info['tm'];	// トップマージン

	user_text( $pdf, 125, $cur_position, "社員一覧表" );
	user_text( $pdf, 224, $cur_position, "ページ :" );
	user_text( $pdf, 250, $cur_position, number_format($counter+1), 5, 0, "R" );

	// 2行
	$cur_position += $GLOBALS['rh'] * 2;
	user_text( $pdf, 10, $cur_position, "コード" );
	user_text( $pdf, 28, $cur_position, "名前" );

	user_text( $pdf, 51, $cur_position, "フリガナ" );
	user_text( $pdf, 95, $cur_position, "所属" );
	user_text( $pdf, 125, $cur_position, "性別" );

	user_text( $pdf, 138, $cur_position, "給与", 20, 0, "R" );
	user_text( $pdf, 163, $cur_position, "手当", 20, 0, "R" );
	user_text( $pdf, 183, $cur_position, "生年月日" );

	$cur_position += $GLOBALS['rh'];

	// 直線のスタイル
	$pdf->SetLineStyle(
		array(
			'width' => 0.4,
			'cap' => 'round',
			'join' => 'round',
			'dash' => 0,
			'color' => array(0xFF,0xC0,0xCB)	// pink
		)
	);
	// 直線
	$pdf->Line(
		$page_info['lm'],	// 左マージン
		$cur_position+1.5,
		$page_info['wk']-$page_info['lm']-$page_info['rm'],	// ページ幅 - 左右マージン
		$cur_position+1.5);
	
	return $GLOBALS['hh'];

}
?>

いろいろなページを構成する定数を元に、ヘッダと明細部分を分けてコントロールするオーソドックスなものです。改ページは、次に印字すべき位置があらかじめ決めた行数を超えた時に処理され、次のページの先頭には必ずヘッダ部分が出力されます。

このサンプルでは、合計部分の行数はあらかじめ想定してあるため、ページ内の明細行数は少なめになっていますが、本来は合計部分も改ページコントロールの対象にする事が昔は多かったですが、合計部分が固定位置となるような、専用の用紙であればこちらに近くなるはずです。

▼ Firebase database データ
https://freebase-654b7.firebaseio.com/class.json



posted by lightbox at 2016-11-22 20:24 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2016年02月02日


jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )

重要

2015/12/1 に検証した結果、解説ページに使用されている jquery.ajax-combobox.js より、GitHub でダウンロードした jquery.ajax-combobox.js のほうが古い事が解りました。古いほうでは、解説ページに書かれている事の半分以上が動作しません。

http://www.usamimi.info/~sutara/ajax-combobox/dist/jquery.ajax-combobox.js をダウンロードする必要があります 
※ UTF-8N です

※ jquery.ajax-combobox.min.js の日付はさらに古いので使え無いものと思われます


最新バージョンに差し替えて、サブ項目のデモを追加しました



ここからは少し前の投稿

デモページ



作者さんの意図では、本来 ajax を使ってサーバー側のデータをリアルタイムに取得する事が目的のようですが、利用するには少し問題が多そうです。サーバー側の解説も無く、クライアント側の解説もそれほど明快なものではありません。

なので、最低限確実に動くサンプルを作成しました。サーバーと連携したい場合は単純に一括で ajax で必要な JSON を取得してから jquery.ajax-combobox に引き渡すといいでしょう。

ダウンロードページ

解説ページ

デモで実行しているコード
	var data = [{"社員コード":"0001","氏名":"浦岡 友也"},{"社員コード":"0002","氏名":"山村 洋代"},{"社員コード":"0003","氏名":"多岡 冬行"},{"社員コード":"0004","氏名":"高田 冬美"},{"社員コード":"0005","氏名":"内高 友之"},{"社員コード":"0006","氏名":"森尾 正也"},{"社員コード":"0007","氏名":"鈴杉 由樹"},{"社員コード":"0008","氏名":"川吉 洋樹"},{"社員コード":"0009","氏名":"村森 友恵"},{"社員コード":"0010","氏名":"杉岡 友一"},{"社員コード":"0011","氏名":"川多 由男"},{"社員コード":"0012","氏名":"杉岡 由樹"},{"社員コード":"0013","氏名":"木川 元男"},{"社員コード":"0014","氏名":"川木 春一"},{"社員コード":"0015","氏名":"中多 克也"},{"社員コード":"0016","氏名":"森村 正恵"},{"社員コード":"0017","氏名":"尾田 雅也"},{"社員コード":"0018","氏名":"松中 輝行"},{"社員コード":"0019","氏名":"野丸 由一"},{"社員コード":"0020","氏名":"松野 友之"},{"社員コード":"0021","氏名":"吉村 春一"},{"社員コード":"0022","氏名":"丸吉 春代"},{"社員コード":"0023","氏名":"松本 洋也"},{"社員コード":"0024","氏名":"尾木 輝男"},{"社員コード":"0025","氏名":"鈴川 春美"},{"社員コード":"0026","氏名":"原中 元美"},{"社員コード":"0027","氏名":"浦村 春一"},{"社員コード":"0028","氏名":"森木 和之"},{"社員コード":"0029","氏名":"多田 友行"},{"社員コード":"0030","氏名":"浦川 冬代"},{"社員コード":"0031","氏名":"岡中 冬之"},{"社員コード":"0032","氏名":"野尾 春男"},{"社員コード":"0033","氏名":"田杉 洋也"},{"社員コード":"0034","氏名":"村高 洋代"},{"社員コード":"0035","氏名":"本原 正也"},{"社員コード":"0036","氏名":"浦多 冬代"},{"社員コード":"0037","氏名":"鈴丸 輝之"},{"社員コード":"0038","氏名":"松高 洋一"},{"社員コード":"0039","氏名":"高松 雅之"},{"社員コード":"0040","氏名":"安村 克恵"},{"社員コード":"0041","氏名":"丸森 雅美"},{"社員コード":"0042","氏名":"中原 冬男"},{"社員コード":"0043","氏名":"原松 春也"},{"社員コード":"0044","氏名":"村松 冬子"},{"社員コード":"0045","氏名":"村松 和子"},{"社員コード":"0046","氏名":"尾内 正樹"},{"社員コード":"0047","氏名":"多松 正樹"},{"社員コード":"0048","氏名":"浦杉 由美"},{"社員コード":"0049","氏名":"原田 春代"},{"社員コード":"0050","氏名":"松丸 正恵"}];

	$('#combo1').css({ "width": "350px" })
	.ajaxComboBox(
		data,
		{
			per_page: 20,
			lang: 'ja',
			button_img: 'ajaxcombobox/dist/btn.png',
			primary_key: '社員コード',
			field: '氏名',
			order_by: [
				'社員コード'
			]
		}
	);
最初に幅を 350px に設定しているのは、これでしか横幅を指定できなかったからです。解説内に幅を狭くするような記述がありますが、コンボボックスそのものでは無いようです。

入力部分は自由に入力が出来、自動的に検索されます。無かった値で送信した場合は、INPUT の name 属性に従って普通に値が送られます。既に存在する値を選んだ場合は、name属性_primary_key にキー部分もセットされます。

入力した値で検索されますが、スペースで区切ると AND 検索になります。オプションで OR 検索に変更する事も可能です

order_by プロパティでは、複数項目が指定可能で、DESC 文字列を使用できます( これについては、解説ページに記述されています )
order_by: [
	'社員コード DESC'
]
キーアクション 入力部分とボタン部分でリストが開いて無い時に下矢印キーを使うとリストが開き、開いている時は、ESC や TAB で閉じます また、開いている時には左右の矢印キーで1ページづつ移動でき、SHIFT+矢印キー で、先頭・最後に移動可能です。 関連する記事 jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造
posted by lightbox at 2016-02-02 16:15 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

jquery.ajax-combobox で JSON をデータに使う場合、複数項目を検索対象にする為の簡単な改造

このプラグインはとても便利です。先週、実際のシステムに実装しましたが、コードと名前と両方で検索したいという要望に合わせて改造しました。

デモページ


オリジナルの説明ではできるような事が書かれていますが、それば付属のデーターベースアクセスを行う PHP を使う必要があるようで、JSON データをクライアントのデータとして持たせて使う場合には動作しませんでした。

▼ jquery.ajax-combobox 利用時の概要

jquery.ajax-combobox(オートコンプリートとドロップダウンリストを組み合わせたコンボボックス) を使用して、入力可能なコンボックス( しかもリストはページャ付き )

このプラグインは、何故か GitHub のコードが古い為、そこからダウンロードしたものは殆どうまく動作せず、解説ページ内で使用している以下の URL からダウンロードする必要があります。

http://www.usamimi.info/~sutara/ajax-combobox/dist/jquery.ajax-combobox.js

さらに、内部に直接日本語が書かれている為、UTF-8 以外のクライアント環境で使用する場合は、SCRIPT 要素に charset 属性を記述する必要があります( charset="utf-8" )

改造場所

1445 行あたりに、『連想配列に対して検索する』とあります。ここの以下の条件が検索している場所です
if (self.option.source[i][self.option.field].match(arr_reg[j])) {
self.option.field は、オプションで指定した field の内容を検索している事を示します。ですから、if の中の条件をコピーして || で繋げて、片方を固定で好きなフィールド名に変更すると正しく動作します

▼ こんな感じです
if (self.option.source[i][self.option.field].match(arr_reg[j])||self.option.source[i]["検索したいフィールド名"].match(arr_reg[j])) {





posted by lightbox at 2016-02-02 16:14 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年12月14日


FileSaver.js と canvas-toBlob.js を使って、canvas で表示されているイメージを保存する

デモページ


FileSaver.js を使って Canvas の保存を行うには、canvas-toBlob.js を読み込んで toBlob メソッドを canvas に対して実行する必要があります。( デモページでは、iframe 側に canvas があるので、iframe 側で canvas-toBlob.js を読み込みます )

デモページでは、canvas は iframe 内にあるので、jQuery を使って $( $("#birds").get(0).contentWindow.document.body ).find("canvas").get(0).toBlob という参照になっています。
※ birds は iframe の id です

保存コード
	$("#getpng").on( "click", function(){
		$( $("#birds").get(0).contentWindow.document.body ).find("canvas").get(0).toBlob(function(blob) {
			saveAs(
				blob
				, "three_fly.png"
			);
		}, "image/png");
	} );


関連する記事

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存



タグ:javascript jquery
posted by lightbox at 2015-12-14 09:00 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年12月10日


ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存

デモページ



ダウンロードは必要ありません。cdnjs でホスティングされています。ただ、使い方がイマイチ解りにくいのが難点でした。GitHub の demo.js を読んで初めて使い方が解ります。

FileSaver.js は saveAs メソッドを提供します

テキストデータをダウンロードするには、ブラウザが一般的に提供する Blob クラスを使う必要があります。そのインスタンスを saveAs メソッドに引き渡して目的が達成されます。( canvas を使って画像も保存できますが、話がややこしくなるのでここでは触れていません )

ソースコード
$(function() {

	$("#getcsv").on( "click", function(){

		var csv = "";

		$("table").find("th").each(function( index ){
			if ( index != 0 ) {
				csv += ",";
			}
			csv += '"' + $(this).text() + '"';
		});
		csv += "\n";

		var cnt = 0;
		$("table").find("tr").each( function(){

			// TH の最初の一行は処理しない )
			if ( cnt > 0 ) {

				$(this).find("td").each(function( col_cnt ){
					if ( col_cnt != 0 ) {
						csv += ",";
					}

					if ( col_cnt == 0 ) {
					// Excel で文字列をそのまま取り込めるように( 例. 0001 を文字列として扱う )
						csv += "=\"" + $(this).text() + "\"";
					}
					else {
						csv += "\"" + $(this).text() + "\"";
					}
				});
				csv += "\n";
			}

			cnt++;

		} );

		// UTF-8 の CSV を化けずに Excel で開く為
		var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
		saveAs(
			new Blob(
				[bom,csv]
				, {type: "text/csv;charset=" + document.characterSet}
			)
			, "syain.csv"
		);

	} );

});

Excel で正しく表示する為に

ブラウザ上のデータは UTF-8 を想定しています。なのでそのまま単純に保存してしまうと、Excel が SHIFT_JIS を想定して読み込むので化けてしまいます。そこで、テキストの先頭に BOM をセットして、UTF-8 である事を Excel に知らせてやる必要があります。

その他、"0001" という文字列をそのまま使えるように、="0001" という形で CSV のフィールドにセットしています。こうした状態で Excel に読み込むと、式の値が文字列であるようになります。Excel としてはかなり特殊な扱いのデータになりますが、Excel として保存してからあらためて .CSV として保存するとフィールドの値は単純な 0001 となります。

Uint8Array



タグ:javascript
posted by lightbox at 2015-12-10 09:00 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年12月05日


クリックしたコンテンツ以外を暗転する jQuery TOOLS の expose プラグイン

デモページ


jQuery TOOLS は、他にも沢山のプラグインが利用できるプラグインライブラリです。cdnjs でホスティングされているのでダウンロードも必要ありません。
※ 但し、jQuery は、1.7.1 が埋め込まれているので、他のバージョンの jQuery を使用するには cdnjs を使わずに 1.2.6 のライブラリのみを使用して特別な記述をする必要があります( 記事最後にあります )

配布サイト側で紹介されている 1.2.6 は古いのでバグがあり、そのままでは使用できないので注意して下さい、また、ドキュメントページからのダウンロードは壊れていてできないので GitHub からする必要があります

デモページでは、jQuery UI を使用していますが、jQuery TOOLS より後に jQuery UI を読み込まないと、jQuery UI が動作しないので注意して下さい。

ドキュメント
ダウンロードページ(GitHub)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tools/1.2.7/jquery.tools.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script>
// jQuery 初期処理
$(function() {

	// タブ
	$( "#mytabs" ).tabs({
		active: 0,
		show: { effect: "slide" },
		hide: { effect: "slide",direction: "right" }
	})
	.css({ margin: "30px 300px 0 30px" });

	// アコーディオン
	var target_acc = 0;
	if ( typeof(localStorage["old_active_acc"]) != 'undefined' ) {
		target_acc = parseInt(localStorage["old_active_acc"]);
	}
	$( "#acc" ).accordion({
		heightStyle: "content",
		active: target_acc,
		activate: function( event, ui ) {
			localStorage["old_active_acc"] = $( this ).accordion( "option", "active" );
		}
	});

	$(".expose").click(function() {
		$(this).expose({
			color: "#202020",
			opacity: 0.5,
			closeOnEsc: true
		});
	});

});
</script>




1.2.6 を使用した特別な記述
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
$.extend({browser:{version: 11,msie: (window.navigator.userAgent.toLowerCase()).indexOf("msie")>-1}});
</script>
<script src="http://cdn.jquerytools.org/1.2.6/all/jquery.tools.min.js"></script>

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/le-frog/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>


そもそも、1.2.6 の問題は、jQuery の新しいバージョンで廃止された、jQuery.browser を使用しているからなので、新しいバージョンでエラーにならないように、jQuery の名前空間に登録してから、1.2.6 を読み込みます。

使用されているのは、IE かどうかの判断と、IE が 6 より大きいかの判断なので、jQuery.browser.version には 11 をセットしています。

使用する jQuery に、jQuery.browser が存在するのであれば、この必要はありませんが、オリジナルは4年前で更新が止まっているので、jQuery TOOLS 全体を運用したいのであれば、jQuery 対応は自分でしたほうが賢明だと思います。

GitHub からダウンロードする場合は、個別にソースコードを編集して pack して使用するといいと思います。

▼ toolbox.expose.js
	/* one of the greatest headaches in the tool. finally made it */
	function viewport() {
				
		// the horror case
		if ((window.navigator.userAgent.toLowerCase()).indexOf("msie")>-1) {
			
			// if there are no scrollbars then use window.height
			var d = $(document).height(), w = $(window).height();
			
			return [
				window.innerWidth || 							// ie7+
				document.documentElement.clientWidth || 	// ie6  
				document.body.clientWidth, 					// ie6 quirks mode
				d - w < 20 ? w : d
			];
		} 
		
		// other well behaving browsers
		return [$(document).width(), $(document).height()]; 
	} 

ダウンロードして書き換えて単独で使用すると、jQuery UI の後に読み込んでも動作しました


posted by lightbox at 2015-12-05 12:53 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月30日


tabIndent.js : テキストエリアでタブが使用できます。オリジナルを少し改造して、jQuery の名前空間に登録しました。

デモページ
 選択して
 TAB でインデント
 SHIFT+TAB で逆インデント

その他

● ESC でキャンセルされ、TAB で次のコントロールへ移動できるようになります。
● ENTER キーで改行を挿入すると、直前のインデントを引き継いだ位置になります。
● オプションで TAB のかわりに複数のスペースを使う事ができます

jQuery の内部に実装

オリジナルでは jQuery に依存しませんが、エレメントの指定が DOM になっていたので jQuery の名前空間に登録するように改造しました。

改造済みコード1(.min.js)
( オリジナルは圧縮されていないので、packer を使用しました ) 

改造済みコード2(.js)

メソッド

renderAll を使うとし、要素の class 属性に tabIndent を指定しているテキストエリアを対象とします。

remove と removeAll がありますが、remove の引数は エレメントのままです。jQuery で引き渡す場合は、$("#id")[0] か、$("#id").get(0) です。
<script>
// jQuery 初期処理
$(function() {

// ソースコードがスペースでインデントされている場合に使用する
//	$.tabIndent.config.tab = "    ";
	$.tabIndent.render("#text")

});
</script>





posted by lightbox at 2015-11-30 09:00 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月26日


何もかも回転する、jQuery の簡単なプラグイン実装

デモページ




どういう場面で使うかは、なかなか難しいですが $(document.body).find("*") なんかは手軽で使い勝手が良いと思います。あと、$([parent.document.body,document.body,$("#target")[0],$("#tabs-1")[0]]) なんかは狙い撃ち用です

ソースコード
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// jQuery 初期処理
$(function() {

	// プラグイン
	$.fn.extend({ 
		rotateAction: function(deg, duration, easing){
			var target = this;
			$({kakudo: 0}).animate(
				{kakudo: deg},
				{
					duration: duration,
					easing: easing,
					step: function(now) {
						target.css({
							transform: 'rotate(' + now + 'deg)'
						});
					}
				}
			);
		}  
	});

});
</script>

<input
	type="button"
	value="画像回転"
	onclick='$("#target").rotateAction(360,1000,"swing");'>

<input
	type="button"
	value="この IFRAME を回転"
	onclick='$(document.body).rotateAction(360,1500,"swing");'>

<input
	type="button"
	value="このタブのみ回転"
	onclick='$("#tabs-1").rotateAction(360,1500,"swing");'>

<input
	type="button"
	value="ウインドウ全体を回転"
	onclick='$(parent.document.body).rotateAction(360,1500,"swing");'>

<input
	type="button"
	value="全てを回転"
	onclick='$([parent.document.body,document.body,$("#target")[0],$("#tabs-1")[0]]).rotateAction(360,10000,"swing");'
	style="background-color:deeppink;color:white">

<input
	type="button"
	value="何もかも回転"
	onclick='$(document.body).find("*").rotateAction(360,10000,"swing");'
	style="background-color:deeppink;color:white">

<br><br><br>

<img
	id="target"
	src="https://lh5.googleusercontent.com/-kCYTSmTrJXs/URvMQy9ClqI/AAAAAAAARuw/5BTKTk2c_sw/s128/_img.png"
	style="border: solid 0px #000000">





posted by lightbox at 2015-11-26 13:46 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月25日


jQuery UI の タブ と アコーディオンで、スキンのチェック

デモページ


snowstorm.js や SyntaxHighlighter も タブに埋め込んで、各タブを横にスライドするアニメーションで見栄えを比較できます。スキンを好きに変更して、それぞれの特徴を比較して下さい。







タグ:jQuery UI jquery
posted by lightbox at 2015-11-25 23:24 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月24日


tableMagic で作成されたテーブルを fixedheadertable でヘッダと左端列を固定 / jQuery プラグイン

デモページ


プラグイン配布サイト

JSON からテーブル作成するのに、tableMagic を使用しています。そのテーブルに対して実行するのですが、その為に添付の CSS(defaultTheme.css) が必須なので注意して下さい。

IE でも実用になります

fixedTblHdrLftCol では IE で使い物になりませんでしたが、この fixedheadertable では軽快に動作します。ただ、列を固定できるのが左端の1列のみです。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<script src="tableMagic/js/jquery.tablemagic-min.js"></script>
<script src="fht/jquery.fixedheadertable.js"></script>
<link rel="stylesheet" href="fht/css/defaultTheme.css">



<link rel="stylesheet" href="css.php">
<style>
.trEven {
	background-color: #FFFFFF;
}
.trOdd {
	background-color: #F1F4F8;
}

#target table * {
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"MS Pゴシック",Verdana,Arial,Helvetica,sans-serif;
	font-size: 16px;
}
#target table {
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#target table td {
	padding: 15px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	white-space: nowrap;
}
#target table th {
	padding: 15px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
	white-space: nowrap;
}
</style>
<script>
// jQuery 初期処理
$(function() {

	$.get("syain.php?cond=" , function(data){

		$('#target').tableMagic(
			data,
			{
				firstColTd2Th: false
			}
		);

		customTable();

		$('#target table').fixedHeaderTable(
			{ 
				width: '700',
				height: '400',
				fixedColumn: true
			}
		);


	});



});

function customTable() {

		$("table").find("th").eq(6).css("text-align", "right");
		$("table").find("th").eq(7).css("text-align", "right");

		$("table").find("tr").each( function(){
			$(this).find("td").eq(6).css("text-align", "right");
			$(this).find("td").eq(7).css("text-align", "right");

			var kyuyo = $(this).find("td").eq(6).text();
			kyuyo = parseInt(kyuyo,10);
			kyuyo = kyuyo.toLocaleString();
			$(this).find("td").eq(6).text(kyuyo);

			var teate = $(this).find("td").eq(7).text();
			if ( teate != "" ) {
				teate = parseInt(teate,10);
				teate = teate.toLocaleString();
			}
			$(this).find("td").eq(7).text(teate);

		} );
}


</script>
</head>
<body>


<div id="target"></div>

</body>
</html>




posted by lightbox at 2015-11-24 16:30 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月20日


jQuery : Columns で作成されたテーブルを fixedTblHdrLftCol でヘッダと左列を固定( CSS カスタマイズ )

デモページ


せっかく Columns でスタイルはでき上がっているので、fixedTblHdrLftCol で使えるかどうか試してみました。

結果的に使えたのですが、IE11 ですとかなり重くて実用にはならないと思います。他のブラウザでは軽快に動作しますが、CSS でのチューニングは自動的にしてしまうのは無理のようです。

以下のサンプルコードは、Columns を主体としてチューニングしていますが、タイトルと列をうまく表示する為に、固定列の幅を個別に設定する必要がありました。また、どこでか解りませんが背景色に透過度を指定しているようなので、明示的に非透過にする必要がありました。

この手の処理は自分でも作った事がありますが、複雑なテーブルほど対応が難しくなると思います。
<style>
/* Columns のフッタを非表示 */
.ui-table-footer {
	display:none;
}

/* 崩れないようにタイトルに nowrap */
/* 透過しないように rgba の最後に 1 */
/* Columns の境界が表示されないように border: 0px; */
#columns .ui-table thead tr th,#columns2 .ui-table thead tr th {
	white-space: nowrap;
	background-color:rgba(220,220,220,1);
	border: 0px;
}
/* ヘッダと固定列の背景色 */
.fTHLC-outer-wrapper {
	background-color:rgb(220,220,220);
}


#columns .ui-table thead tr th:first-child,#columns2 .ui-table thead tr th:first-child {
	width: 91px;
	z-index: 1000;
}
#columns .ui-table tbody td:first-child,#columns2 .ui-table tbody td:first-child {
	width: 80px;
}

#columns2 .ui-table thead tr th:nth-child(2) {
	margin-left:-1px;
	width: 111px;
	z-index: 1000;
}
#columns2 .ui-table tbody td:nth-child(2) {
	width: 100px;
}



</style>
<script>
// jQuery 初期処理
$(function() {

	$.get("syain.php?cond=" , function(data){

		$('#columns,#columns2').columns({
			size: data.length,

			search: false,	// Columns の サーチ用ヘッダを非表示
			sortableFields: [],	// ソート列なし

			data: data, 
			templateFile: 'columns/templates/custom.mst'
		
		});

		customTable();

		// fixedTblHdrLftCol
		$('#columns .ui-table').fixedTblHdrLftCol({
			scroll: {
				height: '400px',
				width: '700px',
				leftCol: {
					fixedSpan: 1
				}
			}
		});
		$('#columns2 .ui-table').fixedTblHdrLftCol({
			scroll: {
				height: '400px',
				width: '700px',
				leftCol: {
					fixedSpan: 2
				}
			}
		});

	});


});

function customTable() {

		$("table").find("th").eq(6).css("text-align", "right");
		$("table").find("th").eq(7).css("text-align", "right");

		$("table").find("tr").each( function(){
			$(this).find("td").eq(6).css("text-align", "right");
			$(this).find("td").eq(7).css("text-align", "right");

			var kyuyo = $(this).find("td").eq(6).text();
			kyuyo = parseInt(kyuyo,10);
			kyuyo = kyuyo.toLocaleString();
			$(this).find("td").eq(6).text(kyuyo);

			var teate = $(this).find("td").eq(7).text();
			if ( teate != "" ) {
				teate = parseInt(teate,10);
				teate = teate.toLocaleString();
			}
			$(this).find("td").eq(7).text(teate);

		} );
}


</script>
</head>
<body>

<div id="columns"></div>

<br><br>

<div id="columns2"></div>

固定列が一つの場合は比較的簡単ではあります。th:first-child と td:first-child でサイズが約 11px 違う場合にこの場合はうまく動作しています。二つ以上の固定列にする場合、背景透過の影響で境界が透過されてしまうので、margin-left: -1px で強引に閉じる処理をしています

z-index は、背景非透過のうしろにスライドした内容を隠す為に、正しい重なりに変更する為に使用しています


関連する記事

jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法





posted by lightbox at 2015-11-20 18:28 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月19日


jQuery プラグイン : Columns と PHP の連携と、ドキュメントには書かれていないカスタマイズ方法

デモページ


jQuery プラグインの Columns は、JSON データを読み込むだけで上のような至れり尽くせりのテーブル要素による一覧表示を可能にします。

問合せテーブルの特徴

1) ページ処理( ページとページ )
2) ページ毎の行数変更
3) テーブル上のデータのリアルタイム検索
4) 列のタイトルをクリックしてソート

※ 特別なオプションを設定しなければ、3) と 4) は全ての列が対象となります

とても簡単な PHP との連携

PHP 側では、JSON で行の配列を返せば良いので、データベースの読み込み処理は、一括で簡単です。列名やデータの表示方法は、JSON のデータで決定されるので、SQL を変更する事によって自由自在に表示を変更できます。
<?php
header( "Content-Type: application/json; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

require_once("dbsetting.php");

$query = <<<QUERY
-- ***********************************************
-- SQL 開始
-- ***********************************************
select 

SYAIN.社員コード,
SYAIN.氏名,
SYAIN.フリガナ,
SYAIN.所属,
A.名称 as 所属名,
-- SYAIN.性別,
B.名称 as 性別,
SYAIN.給与,
ifnull(SYAIN.手当,'') as 手当,
ifnull(SYAIN.管理者,'') as 管理者,
ifnull(SYAIN2.氏名,'') as 管理者名,
ifnull(DATE_FORMAT(SYAIN.生年月日,'%Y/%m/%d'),'') as 生年月日

from 

社員マスタ SYAIN
left outer join コード名称マスタ A
on SYAIN.所属 = A.コード

left outer join 社員マスタ SYAIN2
on SYAIN.管理者 = SYAIN2.社員コード

left outer join コード名称マスタ B
on SYAIN.性別 = B.コード

where A.区分 = 2 and B.区分 = 1	and SYAIN.削除区分 is NULL
and SYAIN.氏名 like '%{$_GET['cond']}%'

order by SYAIN.社員コード

-- ***********************************************
-- SQL 終了
-- ***********************************************
QUERY;

$result = $connect->query($query); 
$row = $result->fetch_all(MYSQLI_ASSOC);

print json_encode($row);

?>

mysqli_result::fetch_all

ドキュメントにはっきり書かれていないカスタマイズ

ソースコードを読まないと解りませんが、『問合せテーブルの特徴』での4つの処理毎にイベントが用意されています。これらのイベントが発生すると、テーブルの表示が書き換わるのですが、HTML そのものを再構築するので外部からカスタマイズするには無理があります。そこで、以下の4つの定義済みイベントが必要になります。
1) pageHandler
2) sizeHandler
3) searchHandler
4) sortHandler
これらのイベントは、他のオプションプロパティと同じ部分で定義されているので、設定時のプロパティとして無名関数を定義する事によって、外部から処理する事が可能になります。 しかし、この中に書く処理には、デフォルトの処理があるので、外部で定義する場合もその処理は記述しなければなりのません。そして、そのデフォルトの処理は、ソースコードを読まないと具体的に知る事ができません。 ▼ 以下がその処理を含めた、デモ用の初期設定です。
$(function() {

	$.get("syain.php?cond=" , function(data){

		$('#columns').columns({
			data: data, 
			templateFile: 'columns/templates/custom.mst',
			showRows: [10, 20, 50],
			size: 10,
			sortableFields: ['社員コード','氏名'],
			searchableFields: ['所属'],
			pageHandler: function(){
				this.create();
				customTable();
			},
			sortHandler: function() {
				this.page = 1;
				this.create();
				customTable();
			},
			searchHandler: function(event) { 
				if(this.liveSearch) {
					this.create();
				} else {
					if(event.keyCode == '13') {
						this.create();
					}
				}
				customTable();
			},
			sizeHandler: function() {
				this.create();
				customTable();
			}
		
		});

		// プラグイン実装後の1回きりの処理
		customTable();

	});



});


this.create() がテーブルの再構築処理です。ですから、カスタマイズするのは、this.create() の後ろに自分の処理を行う必要があります。( this.create() の前に行う処理の場合は、オプションや内部データを直接変更する処理になると思います )

ここで行った『あとから CSS で右よせにしてカンマ編集』

テーブルなので、jQuery の find を使う事によって結構単純に目的の列の情報を変更する事ができます。以下の customTable 関数では、TH 部分と TD 部分を個別に設定しています
function customTable() {

		// 給与と手当
		$("table").find("th").eq(6).css("text-align", "right");
		$("table").find("th").eq(7).css("text-align", "right");

		$("table").find("tr").each( function(){
			// 給与と手当
			$(this).find("td").eq(6).css("text-align", "right");
			$(this).find("td").eq(7).css("text-align", "right");

			var kyuyo = $(this).find("td").eq(6).text();
			kyuyo = parseInt(kyuyo,10);
			// カンマ編集
			kyuyo = kyuyo.toLocaleString();
			$(this).find("td").eq(6).text(kyuyo);

			var teate = $(this).find("td").eq(7).text();
			if ( teate != "" ) {
				teate = parseInt(teate,10);
				// カンマ編集
				teate = teate.toLocaleString();
			}
			$(this).find("td").eq(7).text(teate);

		} );
}



説明不十分なテンプレート使用方法

デフォルトのテンプレートは、ソースコードに埋め込まれてしまっています。ですから、テンプレートをカスタマイズするには、templateFile プロパティを使用する必要があります。外部ファイルに用意されたテンプレートファイルは、以下の二つです。

custom.mst
default.mst

ソースに埋め込まれているものが、default.mst のようなので、custom.mst を使ってみると、どうやらバグのようで、カスタマイズされたフィールド( ページジャンプ ) が、Plugin オプションを使わないと動作しないようですが、用意されている gotopage.js を使ってもちょっと動かないようです。

そもそも、Plugin に関する説明が全くありませんが、使うとすると内部から呼び出されるイベントとして動作します。但し、テーブル再構築後にしか呼ばれないようなので、利用範囲が限定されます。

Plugin 内のイベントは二つしか無く、init と create で、init は最初に一度だけ処理されます。create を使って、狙った要素にイベントを作成する事ができると思いますが、通常のイベントオプションを使ったほうが汎用性があるように思います。

ただ、サンプルとして付加されている、ajaxpaging.js は、プラグイン内で イベントオプション を使用しており、『必要な時に必要だけデータを取得して表示』するという処理を実現しているように見えます。

テンプレートと画像の扱い

ページ処理用の画像が、テンプレートに直接パスが埋め込まれているので、実行中のページの中に images フォルダが必要である事になっています。images の場所が違う場合は、テンプレート内を直接変更する必要があります。

サーチ用の画像は CSS 内で使用されているので、CSS があるフォルダからの相対パスが正しければ表示されます

ドキュメント内の誤記

size のデフォルトが 10 と書かれていますが、実際は 5 です

oddRowClass のデフォルトが 'ui-table-rows-even' となっていますが、完全な誤りです。実際は(あたりまえですが)、ui-table-rows-odd になります。

even と odd は、偶数・奇数です。行の背景色を交互に変える為に一般的に使用される手法です

デモで使用しているテーブルの仕様

▼ 社員マスタ
列名 型名 最大桁 NULL 主キー
1 社員コード varchar 4 N 1
2 氏名 varchar 50    
3 フリガナ varchar 50    
4 所属 varchar 4    
5 性別 int      
6 作成日 datetime      
7 更新日 datetime      
8 給与 int      
9 手当 int      
10 管理者 varchar 4    
11 生年月日 date      
12 削除区分 varchar 1    

▼ コード名称マスタ
列名 型名 最大桁 NULL 主キー
1 区分 int   N 1
2 コード varchar 10 N 2
3 名称 varchar 50    
4 数値1 int      
5 数値2 int      
6 作成日 datetime      
7 更新日 datetime      



posted by lightbox at 2015-11-19 14:29 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月14日


IOS のようなスクロールバーインターフェイスを jQuery のプラグインとして実現する jQuery.NiceScroll

デモページ

▼ デモページのダウンロード



配布ページ(GitHub)

特徴その (1)

スクロールバーを非表示にして表示エリアをすっきりと。マウスが近づくとスクロールバーが現れます。スクロールは滑らかになり、キーボードからも操作できます( 矢印キー、pagup/down キー, home/end キー )

特徴その (2)

cdnjs.com でホスティングされているので、ダウンロードが必要ありません


特徴その (3)

DIV 等に指定する事によって、スクロール可能な表示エリアを容易に作る事ができます。また、オプションで最大表示するアイコンを表示して使う事もできます( その場合表示エリアをダブルクリックしても最大化されます )

▼ 最大化前


▼ 最大化後



特徴その (4)

とても簡単な設定
<script>
// jQuery 初期処理
$(function() {

	// DIV を固定サイズにして自動改行させています
	$( "#story,#story_box_zoom" )
		.css({
			width: "700px",
			height: "200px",
			whiteSpace: "pre-wrap"
		});

	// ページ全体( HTML ) と、DIV に対してデフォルトの実装
	$( "html,#story" ).niceScroll();

	// DIV に対して、最大化のオプション
	$( "#story_box_zoom" ).niceScroll( {boxzoom:true,scriptpath:''});
	

});
</script>

デモページ

※ 重要な注意事項
ホスティングされたものを使用する場合、最大化用のアイコンが使用できません。ダウンロードして手に入れるか、以下の画像を使って下さい。



この画像を使用するページと同じフォルダに置いて、scriptpath:'' とすると、カレントフォルダのものを使用します。URL を設定すれば固定位置の画像を使用できると思います( ソースを読んで確認しました )
その他 オリジナルサイトにたくさんのオプションが英語で書かれています。必要ならば、いろいろ調整できます( 例えば、scrollspeed ) Google 翻訳での表示 ライセンスは、MITライセンスです。 $("iframe") は、Google Chrome では動作しましたが、他のブラウザはうまく動かないかもしれません。IFRAME の内部で $("html") が無難です。
posted by lightbox at 2015-11-14 10:22 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

2015年11月13日


jQuery : 一つの 複数選択の SELECT 要素から二つのリストボックスを作成して、必要なグループ選択するプラグイン / multiselect.js と PHP との連携

multiselect.js ダウンロードページ



デモページ



jquery.multi-select.js の概要

画面からも解るとおり、全体の一覧より( この場合は右側 ) 必要なグループを作成する時に便利なコントロールです。HTML 上で作成するのは、一つの複数選択可能な SELECT 要素のみで、プラグインによって二つのリストボックスを横に並べたようなコントロールを作成してくれます。

OPTION 要素内に selected がある場合に、選択後のデータとして表示されます。それ以外はもう一つの一覧(残り全て)として表示されます。ですから、事前に選択データを用意するという事は、事前に OPTION 要素に selected を指定しておく事と同義です。

表示を JavaScript でリセットしたい場合は、jQuery 等で 元の SELECT 要素の内容を変更しておいて、プラグインの refresh メソッドを使用します
$('#select_item').multiSelect("refresh");
選択済みデータの処理 左側のタイトル部分にあるコンボボックスによって選択されたグループをサーバーから読み出して再表示するようになっています。コンボボックスのイベントでは、location.href に URL をセットしてリロードしています( キャッシュされないように、getTime を使用 )
	$("#syozoku").on("change", function(){

		location.href = "change.php?scode=" + $(this).val() + "&c="+ (new Date()).getTime();

	} );

カスタマイズ処理

クラスとして、ms-selectable と ms-selection があり、ms-selectable が選択するほうのリストボックスです。ですから、ここでは ms-selectable に float:right、ms-selection に float:left を設定して選択を右に持ってきています( デフォルトでは逆 )

また、このクラスを使って選択後のスクロールが表示される要素に対して、scrollTop( 10000 ) を実行して、選択後のスクロールを一番最後まで移動しています。選択後のリストボックスでは、一番最後にデータが追加されるので、デフォルトでは視認できないのでカスタマイズしています

change.php
<?php
require_once("../common.php");

session_start();
header( "Content-Type: text/html; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

require_once("dbsetting.php");

if ( $_GET['scode'] == '' ) {
	$_GET['scode'] = '0001';
}


?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/jquery/plugins/multiselect/jquery.multi-select.js"></script>
<link rel="stylesheet" href="http://winofsql.jp/jquery/plugins/multiselect/multi-select.css" type="text/css" />

<script>
$(function(){

	var option1 = "";
	var option2 = "";
	var option3 = "";

	if ( '<?= $_GET['scode'] ?>' == '0001' ) {
		option1 = '<option value="0001" selected>';
	}
	else {
		option1 = '<option value="0001">';
	}

	if ( '<?= $_GET['scode'] ?>' == '0002' ) {
		option2 = '<option value="0002" selected>';
	}
	else {
		option2 = '<option value="0002">';
	}

	if ( '<?= $_GET['scode'] ?>' == '0003' ) {
		option3 = '<option value="0003" selected>';
	}
	else {
		option3 = '<option value="0003">';
	}

	var syozoku = '<div class="header_item"><select id="syozoku" name="syozoku">'+ option1 +'営業部第一</option>'+ option2 +'営業部第ニ</option>'+ option3 +'営業部第三</option></select></div>';

	$('#select_item').multiSelect({
		cssClass: "select_item",
		keepOrder: true,
		selectableHeader: "<div class='header_item'>対象社員</div>",
		selectionHeader: syozoku,
		afterSelect: function(values){
			console.log( values[0] )
			console.log( "Select:" + $( "#select_item").children( "option[value='"+values+"']" ).text() )

			$("#ms-" + "select_item .ms-selection .ms-list").scrollTop(10000);
		},
		afterDeselect: function(values){
			console.log( values[0] )
			console.log( "Deselect:" + $( "#select_item").children( "option[value='"+values+"']" ).text() )
		}
	});

	$("#syozoku").on("change", function(){

		location.href = "change.php?scode=" + $(this).val() + "&c="+ (new Date()).getTime();

	} );

});
</script>

</head>
<body>
<style>
.header_item {
	padding: 5px;
	text-align: center;
	border: solid 1px #ccc;
	margin-bottom:2px;
	background-color: #eee;
}
.select_item {
	width: 600px;
}
.select_item .ms-selectable li.ms-elem-selectable, .select_item .ms-selection li.ms-elem-selection {
	padding: 10px;;
}
.select_item ul.ms-list{
  height: 300px;
}
/* 左右入れ替え */
.select_item .ms-selectable {
	float: right;
}
.select_item .ms-selection {
	float: left;
}

select {
	font-size: 16px;
}
</style>
<form
	method="get"
	id="target_form"
	target="my_ferame"
	action="change_update.php"
	accept-charset="utf-8">

	<input
		type="submit"
		name="send"
		id="send_check"
		value="更新"
		style='padding:5px;width:600px;margin-bottom:16px;'>

	<select 
		multiple
		id="select_item"
		name="select_item[]">

<?php

	// -------------------------------------
	// コンボボックス内容
	// -------------------------------------
	$query = <<< QUERY
select * from `社員マスタ`
QUERY;

	$result = $connect->query($query); 
	if ( !$result ) {
		die('クエリーに誤りがあります : ' . $connect->error );
	}
	
	while ($row = $result->fetch_array(MYSQLI_BOTH)) {
	
		$sentaku = "";
		if ( $row["所属"] == $_GET['scode'] ) {
			$sentaku = "selected";
		}

		print <<<DISPLAY
		<option value="{$row["社員コード"]}" $sentaku>{$row["氏名"]}</option>
DISPLAY;
	
	}

?>

	</select>

</form>

<br>
<iframe
	name="my_ferame"
	frameborder="1"
	scrolling="yes"
	width="600"
	height="200"></iframe>

</body>
</html>



change_update.php
<?php
session_start();
header( "Content-Type: text/html; Charset={$_SESSION["charset"]}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

require_once("dbsetting.php");

$list = "";
foreach ($_GET['select_item'] as $scode ) {

	if ( $list != "" ) {
		$list .= ",";
	}
	$list .= "'$scode'";

}

$query = <<< QUERY
update `社員マスタ` set 
	`所属` = '{$_GET['syozoku']}'
	,`更新日` = now()
 where
 `社員コード` in ({$GLOBALS['list']})
QUERY;

//$connect->query($query);

print "<pre>";
print $query;

print "\n---------------------------------\n";

print_r($_GET);
print "</pre>";


?>


関連する記事

jQuery プラグイン : multiselect.js の使用方法とカスタマイズ



posted by lightbox at 2015-11-13 15:09 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする

jQuery プラグイン mmenu( 左右からスライドインするメニュー ) を F1 キーと F2 キーに割り当てて、左右から二つのメニューを開く

リンクが間違っていてたので訂正しました(2015/11/13)
デモページ

デモページ内の薄い灰色の部分は、IFRAME です。
jQuery で、ページ内で F1 キー(HELP) を起動させないようにする / IFRAME 内も同時対応 で、F1 キーのヘルプ機能を抑制したので、かわりに jQuery プラグイン の mmenu でメニューを開くようにしています。( 開いている状態で F1 キーを押すと、メニューは閉じるようになっています )

mmenu は、本体のページに実装されるので、IFRAME の上に重なる形で開いたり閉じたりします。本来は、単一のページ上で使われる為か、メニューのリンクをクリックしてもメニューが閉じないので、後からメニューに対して処理できるように、mmenu の API を取得して使用しますF1 キーで、左側のメニューを開いた後、F2 で右側のメニューを開くと、自動的に左側のメニーは閉じます。これはもともとの動作ですが、通常とは違う形で元のページもスライドします。そして、メニーを閉じると元に戻るのですが、これも全て元々の動作です。

ライブラリは、CDN(cdnjs.com) でホスティングされているので、ダウンロードする事無く実装する事ができます。ダウンロードする場合は、配布ページよりダウンロード可能です。

▼ 配布ページ


ライセンスは、MIT ライセンスが使われていますが、『if you are going to use it in a commercial project, please donate.』とあって、商用の場合は寄付(donationware)をお願いしますとの事です。いわゆる、『カンパウェア』のようです
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=<?= $_SESSION["charset"] ?>">
<title>PHPテンプレート</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<?php
// *************************************
// mmenu 用の CDN ホスディング
// *************************************
?>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/js/jquery.mmenu.min.all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.5.3/core/css/jquery.mmenu.all.css">

<link rel="stylesheet" href="css.php">

<link rel="stylesheet" href="iframe_css.php">
<script src="iframe_js.php"></script>

<style>
<?php
// *************************************
// mmenu 用のスタイルのカスタマイズ
// *************************************
?>
.mm-title {
	color: black!important;
}
.mm_user_title {
	padding: 20px!important;
}
</style>
<script>
// mmenu に対しての処理用
var mmenu_api_left;
var mmenu_api_right;

$(function() {

	$("#mmenu_left").mmenu({
		navbar: {
			title: "オプションメニュー 左"
		},
		offCanvas: {
			position  : "left",
			zposition : "front"
		}
	});

	// mmenu に対して処理を行うオブジェクトを取得
	mmenu_api_left = $("#mmenu_left").data( "mmenu" );

	// メニューをクリックした時に、メニューを閉じる
	$(".mm_link_left").on("click",function(){
		mmenu_api_left.close();
	});


	$("#mmenu_right").mmenu({
		navbar: {
			title: "オプションメニュー 右"
		},
		offCanvas: {
			position  : "right",
			zposition : "front"
		}
	});

	// mmenu に対して処理を行うオブジェクトを取得
	mmenu_api_right = $("#mmenu_right").data( "mmenu" );

	// メニューをクリックした時に、メニューを閉じる
	$(".mm_link_right").on("click",function(){
		mmenu_api_right.close();
	});


// F1 キーで HELP を起動させないようにする
// ※ document のかわりに window でも動作するはずです(IFRAME内は window です)
// ※ $( "body" ) は不可です
	$( [document,$( "iframe" ).get(0).contentWindow] )
		// IE 用
		.on( "help", false )
		// IE 以外の一般処理用
		.on( "keydown", function(e){
			if ( e.keyCode == 0x70 ) {

				// F1 キーでメニューを開いたり閉じたりします
				if($('#mmenu_left').is(':visible')) {
					mmenu_api_left.close();
				}
				else {
					mmenu_api_left.open();
				}

				return false;
			}
			if ( e.keyCode == 0x71 ) {

				// F2 キーでメニューを開いたり閉じたりします
				if($('#mmenu_right').is(':visible')) {
					mmenu_api_right.close();
				}
				else {
					mmenu_api_right.open();
				}

				return false;
			}
		});

});

</script>
</head>
<body>
<div id="wrapper">
	<div id="head_unit">
		<form
			method="get"
			target="target_accept"
			action="accept_r.php">

			<input
				type="text" 
				name="tx1">

			<input
				type="button"
				value="リセット"
				style="background-color:white;"
				onclick="location.reload(true);">

			<input
				 type="submit"
				name="send"
				value="送信">

		</form>
	</div>
	<iframe
		src="accept_r.php"
		id="<?= $_SESSION["iframe_id"] ?>"
		name="target_accept"
		frameborder="0"
	></iframe>
</div>

<div id="mmenu_left">
<ul>
	<li class="mm_user_title">jQuery mmenu</li>
	<li><a class="mm_link_left" href="http://winofsql.jp/if_skeleton/lightbox99/pdf/pdf_out.php" target="target_accept">PDF</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー2</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー3</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー4</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー5</a></li>
	<li><a class="mm_link_left" href="#" target="target_accept">メニュー6</a></li>
	<li><a class="mm_link_left" href="accept_r.php" target="target_accept">初期ページ</a></li>
</ul>
</div>

<div id="mmenu_right">
<ul>
	<li class="mm_user_title">jQuery mmenu</li>
	<li><a class="mm_link_right" href="http://winofsql.jp/if_skeleton/lightbox99/pdf/pdf_out.php" target="target_accept">PDF</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー2</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー3</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー4</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー5</a></li>
	<li><a class="mm_link_right" href="#" target="target_accept">メニュー6</a></li>
	<li><a class="mm_link_right" href="accept_r.php" target="target_accept">初期ページ</a></li>
</ul>
</div>

</body>
</html>




posted by lightbox at 2015-11-13 14:56 | Comment(0) | IFRAME パッケージ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり