SQLの窓

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月16日


クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません

ダウンロードも何も必要ありません。jQuery も必要ありません。ただ、cdnjs より URL をコピーして『ページに埋め込むだけです』

配布サイトのオプションの説明

デモページ


ただ、そのままではあまりにも工夫が無いので、少しオプションを設定しています。
<style>
body {
	background-color:#000000;
}

@-webkit-keyframes snow-rotate {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes snow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes snow-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes snow-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.mysnow {
	color:#e0e0e0!important;
	-webkit-animation: 1.85s snow-rotate steps(8) infinite;
	-moz-animation: 1.85s snow-rotate steps(8) infinite;
	-o-animation: 1.85s snow-rotate steps(8) infinite;
	animation: 1.85s snow-rotate steps(8) infinite;

}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>
<img src="https://lh3.googleusercontent.com/-Chj58uY2pjs/Vht0XOX3l-I/AAAAAAAAcCs/ijZAwj3NNQY/s1000-Ic42/silver_a2.png">
<script>
snowStorm.excludeMobile = false;
snowStorm.animationInterval = 50;
snowStorm.flakesMax = 64;
snowStorm.className = "mysnow"
snowStorm.flakeWidth = 16;
snowStorm.flakeHeight = 16;
snowStorm.snowCharacter = '&#10052;';
</script>
二つの大きなカスタマイズ

もともとは、小さな点を使っで雪を降らしていますが、キャラクタを自由に変更できるので、もともとある雪の結晶のような "❄" を使用しています。キャラクタのサイズが倍になるので、幅と高さを変更しています。

さらに、CSS のアニメーションを使用して一つ一つの雪の結晶を回転させています。

モバイル対応

モバイルで動作させるには、以下の設定が必要です。厳密な違いは解りませんが、作者は『バッテリーに悪影響あり』とほのめかしておられます。
snowStorm.excludeMobile = false;

CPU にやさしく

以下の設定は不用意に CPU を使わないようになる事が期待できます

snowStorm.animationInterval = 50;
snowStorm.flakesMax = 64;


関連する記事

雪を降らす snowstorm.js の 特定 DIV 内での実装
【改造】雪を降らす snowstorm.js に 風向きを外部から設定できるオプションを追加しました




タグ:javascript cdnjs
posted by lightbox at 2015-11-16 20:40 | Comment(0) | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする

CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説

snowstorm.js という、雪を降らせるだけの スクリプトがあるのですが、少しカスタマイズして雪のキャラクタに ❄ を使って、一つ一つ廻すデモを作ってみました。

snowstorm の一つ一つを廻すデモ


▼ 以下本編

重要なのは、3つの部品に注目する事です。

@keyframes

これは、どのようなアニメーションをするかの定義で、根本的なものです。簡単な記述では、最初と最後を記述して( from to または 0% 100% ) としてその間を CSS に補完させます。

定義は、一つあればどこからでも参照できます。その際、コンテンツの animation で、@keyframes で指定した名前を指定します。

複数に変化を分割可能で、回転ですと 0% 100% でいいですが、複雑な変化を行う場合は、0% 20% 50% 100% のように変化の段階を指定できます。

animation

アニメーションする為の時間と、その時間をいくつに分割するかを指定します。また、名前を指定して、どのようなアニメーションをするかを決定します。ですから、@keyframes とはペアで記述する必要があります。

box-shadow

box-shadow を使って、回転している残像を一括で作成しています。丸く表示されているのは本体が border-radius: 50% で丸くなっているからで、本体は中心に描画されてその周りを複数の不透明度の違う円が並んでいます。それを回転する事によって、このようなアニメーションが実演されます。


<style type="text/css">
/*
  アニメーションの実体
  ※ フレームの最初と最後でどういう状態にするか
  ※ 同じアニメーションなら一つ定義して複数から参照する
*/
@-webkit-keyframes ajax-loader-rotate {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes ajax-loader-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-o-keyframes ajax-loader-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes ajax-loader-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* アイコン */
.ajax-loader-icon {

  /* 元の div の背景色( 意味が解るように着色/通常は指定しない ) */
  /* background-color: #e0e0e0; */

  /* テスト表示位置の調整 */
  margin: 20px;

  opacity: .8;		/* 単独では特に必要無い */
  display: block;	/* div はもともとブロック。他の要素用 */
  border-radius: 50%;	/* 元の形状を丸くする為 */

  font-size: 18px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
  width: 5px;		/* サイズ変更 */
  height: 5px;

  /* em を使うと、font-size にサイズを連動させる事ができる */
  /* width: .25em; height: .25em; */

  /* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
  box-shadow:
    0 -.4em       0 0 rgba(50,0,0,1),
    -.28em -.28em 0 0 rgba(50,0,0,.75),
    -.4em 0       0 0 rgba(50,0,0,.50),
    -.28em .28em  0 0 rgba(50,0,0,.25)
  ; 

/*
  アニメーションのフレームの秒数といくつに分解するか
  たまたま、8つに分解していい感じになっている様子
  0.85s も適当。一周するのに必要な時間
*/
  -webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
  -moz-animation: .85s ajax-loader-rotate steps(8) infinite;
  -o-animation: .85s ajax-loader-rotate steps(8) infinite;
  animation: .85s ajax-loader-rotate steps(8) infinite;

}

/* テスト用の大きな DIV */
.ajax-loader {

  /* 元の div の背景色( 意味が解るように着色/通常は指定しない ) */
  /* background-color: #e0e0e0; */

  /* テスト表示位置の調整 */
  margin: 100px;

  opacity: .8;		/* 単独では特に必要無い */
  display: block;	/* div はもともとブロック。他の要素用 */
  border-radius: 50%;	/* 元の形状を丸くする為 */

  font-size: 150px;	/* 位置指定を em でしているので、ここを変更すると半径変更 */
  width: 40px;		/* サイズ変更 */
  height: 40px;

  /* em を使うと、font-size にサイズを連動させる事ができる */
  /* width: .25em; height: .25em; */

  /* box-shadow による影の複数作成 : 位置と色と不透明度を指定 */
  box-shadow:
    0 -.4em       0 0 rgba(50,0,0,1),
    -.28em -.28em 0 0 rgba(50,0,0,.75),
    -.4em 0       0 0 rgba(50,0,0,.50),
    -.28em .28em  0 0 rgba(50,0,0,.25)
  ; 

/*
  アニメーションのフレームの秒数といくつに分解するか
  たまたま、8つに分解していい感じになっている様子
  0.85s も適当。一周するのに必要な時間
  @keyframes と名前でリンク
*/
  -webkit-animation: .85s ajax-loader-rotate steps(8) infinite;
  -moz-animation: .85s ajax-loader-rotate steps(8) infinite;
  -o-animation: .85s ajax-loader-rotate steps(8) infinite;
  animation: .85s ajax-loader-rotate steps(8) infinite;

}
</style>

<div class="ajax-loader-icon"></div>
<div class="ajax-loader"></div>
box-shadow については、以下を参照

 CSS3 : box-shadow の影分身の解説

 jQuery のスライダーで box-shadow の影分身の効果をリアルタイムに確認する


IE10 の @keyframes

@keyframes rule (Internet Explorer)



タグ:CSS3
posted by lightbox at 2015-11-16 02:29 | CSS3 | このブログの読者になる | 更新情報をチェックする

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 パッケージ | このブログの読者になる | 更新情報をチェックする
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 ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり