SQLの窓

2014年06月26日


input 要素と id 属性のみで、jQuery ボタンテンプレート

input 要素のみ決定しておいて、参照する為に id 属性だけセットしたものを、jQuery でボタンとして使う為のコードテンプレートです。

チェックボックスとラジオボタンが、label 要素を要求するようなので、.after() しているところ以外は全て通常の追加設定になっているはずです。

※ .buttonset() は、ボタンの形状をグルーブ化するだけで、ラジオボタンとしての機能は、name 属性でグループ化されます。
※ 最初のボタン以外には、jQuery UI が必要です

実際問題、チェックボックスとラジオボタンの性能には疑問が残ります。クリックに正しく反応しない場合があるようなのでお勧めできません(ラベルのテキスト部分で起こるようです)



<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/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 type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {

	$("#buttonContent1")
		.attr("type", "button")
		.val("ボタン1")
		.css({
			"font-size": "20px",
			"padding": "10px 40px 10px 40px",
			"background-color": "orange",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			alert("ボタン1がクリックされました");
		});

	$("#buttonContent2")
		.attr("type", "button")
		.button()
		.val("ボタン2")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			alert("ボタン2がクリックされました");
		});

	$("#buttonContent3")
		.attr("type", "checkbox")
		.after("<label for='buttonContent3'>")
		.button({ label: "トグルボタン" })
		.click(function(){
			alert( $(this).prop("checked") );
		});

	$("#radio1")
		.attr({ type: "radio", name: "my_radio" })
		.after("<label for='radio1'>")
		.button({ label: "選択1" })
	$("#radio2")
		.attr({ type: "radio", name: "my_radio" })
		.after("<label for='radio2'>")
		.button({ label: "選択2" })
	$("#radio3")
		.attr({ type: "radio", name: "my_radio" })
		.after("<label for='radio3'>")
		.button({ label: "選択3" })
	$("#radio").buttonset();


});
</script>

<input id="buttonContent1">
<input id="buttonContent2">
<input id="buttonContent3">

<br><br>

<div id="radio">
<input id="radio1">
<input id="radio2">
<input id="radio3">
</div>


posted by lightbox at 2014-06-26 00:15 | jQuery | このブログの読者になる | 更新情報をチェックする

2014年06月13日


jQuery のアナログ時計( 2個 )

※ 大きさの調整サンプルを作る為に2個の時計を実装しました

▼ 実行時の画像です



元記事

jQuery のアナログ時計
(オリジナルの CSS3Clock が不完全なので改良したコードです)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<style type="text/css">
#position_wrapper {
	position: relative;
	width:600px;
	height:600px;
	border:1px solid #c0c0c0;
}

#clock {
	position: absolute;
	left:0px;
	top: 100px;
	width: 200px;
	height: 200px;
	background-image: url(http://winofsql.jp/image/clockface.jpg);
	background-size:contain;
	list-style: none;
	background-repeat:no-repeat;
	display:none;
}

#sec, #min, #hour {
	position: absolute;
	width: 10px;
	height: 200px;
	top: 0px;
	left: 95px;
	background-size:contain;
}

#sec,#sec2 {
	background-image: url(http://winofsql.jp/image/sechand.png);
	z-index: 3;
}

#min,#min2 {
	background-image: url(http://winofsql.jp/image/minhand.png);
	z-index: 2;
}

#hour,#hour2 {
	background-image: url(http://winofsql.jp/image/hourhand.png);
	z-index: 1;
}

#clock2 {
	position: absolute;
	left:200px;
	top: 100px;
	width: 400px;
	height: 400px;
	background-image: url(http://winofsql.jp/image/clockface.jpg);
	background-size:contain;
	list-style: none;
	background-repeat:no-repeat;
	display:none;
}

#sec2, #min2, #hour2 {
	position: absolute;
	width: 20px;
	height: 400px;
	top: 0px;
	left: 190px;
	background-size:contain;
}


</style>

<script type="text/javascript">
function set_time() {
	var hours = new Date().getHours();
	var mins = new Date().getMinutes();
	var seconds = new Date().getSeconds();

	var hdegree = hours * 30 + (mins / 2);
	var hrotate = "rotate(" + hdegree + "deg)";
	$("#hour,#hour2").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate, "transform" : hrotate});

	var mdegree = mins * 6;
	var mrotate = "rotate(" + mdegree + "deg)";
	$("#min,#min2").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate, "transform" : mrotate});

	var sdegree = seconds * 6;
	var srotate = "rotate(" + sdegree + "deg)";
	$("#sec,#sec2").css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "transform" : srotate});

}

$(function() {
	set_time();
	$("#clock,#clock2").show();
	setInterval( function() {set_time();}, 1000 );
});

</script>

<div id="position_wrapper">
<ul id="clock">	
	<li id="hour"></li>
	<li id="min"></li>
	<li id="sec"></li>
</ul>

<ul id="clock2">	
	<li id="hour2"></li>
	<li id="min2"></li>
	<li id="sec2"></li>
</ul>

</div>



タグ:jquery javascript
posted by lightbox at 2014-06-13 11:52 | jQuery | このブログの読者になる | 更新情報をチェックする

2014年03月16日


IEでも動作します : jQuery で、FORM の accept-charset を動的に変更して UTF-8・EUC-JP・SHIFT_JIS に対して同時送信


IEは、accept-charset だけでは動作しません

厳密に言うと、accept-charset だけで動作するのは UTF-8 のみです。他のキャラクタセットでも動作させるには、document.charset も同時に変更して同じにする必要がありました。

で、余談として FORM 内に submit という id を持つボタンを作って実行すると、jQuery の submit が動作しなくなるという現象が起きました。これも、他でも起こっている事をインターネット上で既に見かけていました。

送信直前に変更している内容

1) PHP に渡す為の hidden フィールドの値
   ( これで新しいページのキャラクタセット決定 )
2) どの IFRAME に送るかを決める target 属性
3) 変換先のキャラクタセットである accept-charset属性
4) IE の場合だけ、document.charset を変更して、送信後には元に戻す

以下のコードを見ていただいたほうが、解りやすいと思います。結局、HTML での操作は無理があります。スクリプトで変更する事によって全てのブラウザで動作するはずです。( ただ、IE11 でのエミュレーションでしかテストしていないので、実際の IE8 等の動作はまだ未確認です )
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script type="text/javascript">

$( function() {
	$('#submit').click(function() {
		// IE 判定用
		var userAgent = window.navigator.userAgent.toLowerCase();
		var saveCharset = document.charset;

		// UTF-8 で utf8 IFRAME に送信
		$('#charset').val("utf-8");
		$('#target').attr("target", "utf8");
		$('#target').attr("accept-charset", "UTF-8");
		$('#target').submit();

		// EUC-JP で ujis IFRAME に送信
		$('#charset').val("EUC-JP");
		$('#target').attr("target", "ujis");
		$('#target').attr("accept-charset", "euc-jp");
		if (userAgent.indexOf("msie") > -1 || userAgent.indexOf("trident/7.0") > -1) {
			document.charset = 'euc-jp';
		}
		$('#target').submit();

		// SHIFT_JIST で sjis IFRAME に送信
		$('#charset').val("SHIFT_JIS");
		$('#target').attr("target", "sjis");
		$('#target').attr("accept-charset", "shift_jis");
		if (userAgent.indexOf("msie") > -1 || userAgent.indexOf("trident/7.0") > -1) {
			document.charset = 'shift_jis';
		}
		$('#target').submit();

		// IE の場合だけ元に戻す
		if (userAgent.indexOf("msie") > -1 || userAgent.indexOf("trident/7.0") > -1) {
			document.charset = saveCharset;
		}
	});
});

</script>
<pre>
▼ JavaScript による送信ボタン
<input id="submit" type="button" value="送信">
<form id="target" method="post" action="http://winofsql.jp/charset.php">
▼ 本来は非表示ですがテストなので readonly(送信すると3回使われるので表示されるのは SHIFT_JIS)
<input type="text" id="charset" name="charset" readonly>
<textarea
	style='width:400px;height:100px;'
	name="text"
>あいうえお</textarea>
</form>
▼ utf-8
<iframe style='width:400px;height:100px;' name="utf8"></iframe>
▼ euc-jp
<iframe style='width:400px;height:100px;' name="ujis"></iframe>
▼ shift_jis
<iframe style='width:400px;height:100px;' name="sjis"></iframe>
</pre>

▼ charset.php
<?php
header( "Content-Type: text/html; Charset={$_POST['charset']}" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=<?= $_POST['charset'] ?>">
</head>
<body>
<pre>
<?= $_POST['text'] ?>
</pre>
</body>
</html>




▼ JavaScript による送信ボタン

▼ 本来は非表示ですがテストなので readonly(送信すると3回使われるので表示されるのは SHIFT_JIS)
▼ utf-8 ▼ euc-jp ▼ shift_jis



posted by lightbox at 2014-03-16 00:13 | jQuery | このブログの読者になる | 更新情報をチェックする

2014年03月14日


jQuery : jQuery のイベント内の jQuery オブジェクトと DOM オブジェクト( prop と attr と getAttribute と setAttribute と removeAttribute )















イベント内の this は?

jQuery のイベントの中で this を参照すると、それは DOM オブジェクトを参照します。ですから、jQuery オブジェクトとして扱う為には $(this) と記述するわけですが、そこから再度 DOM オブジェクト を参照したい場合は $(this)[0] か、または、$(this).get(0) と記述する事になります。
jQuery のイベントの中で this が  DOM オブジェクト である事は、
this === document.getElementById("obj_check_bt1")
が真となるので明白です。
this.disabled これは、JavaScript のプロパティとして disabled 属性を参照しています。ですから、this.disabled は true に設定する事によって使用不可となります。プロパティとしての動作は融通がきいて、"disabled" や "" をセットしても適宜解釈されて正しく動作します this.setAttribute setAttribute の場合は、プロパティの動作と違って最初の this.setAttribute("disabled","disabled") や this.setAttribute("disabled","true") は意図した動作になりますが、この使用不可を解除するには this.setAttribute("disabled","false") や this.setAttribute("disabled","") では無く、this.removeAttribute("disabled") を実行する必要があります $(this).prop と $(this).attr jQuery のこれらのメソッドは、上記の二つの DOM 操作の代替と考えてよいのですが、jQuery では当初 setAttribute の動作と同様な動きをしていました、しかし、1.6 あたりから、失敗が起こらないように改良されています。但し、prop と attr での 値の読み出しの結果は、prop は true か false で、attr は、undefined か disabled です。この値は、DOM で正しく操作した時と少し違っていますが( null と disabled ) jQuery のほうが結果の値としては直感的にわかり易くなっていると思います。
<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>

<input id="obj_check_bt1" type="button" value="実行">
<script type="text/javascript">

$("#obj_check_bt1").click( function() {
	if ( this === document.getElementById("obj_check_bt1") ) {
		console.log( "一致 : イベント内の this は DOM です。" );
		// ですから、このボタンを disable にするには
		this.disabled = true;
	}
});

</script>

<input id="obj_check_bt2" type="button" value="実行">
<script type="text/javascript">

$("#obj_check_bt2").click( function() {
	if ( $(this)[0] === document.getElementById("obj_check_bt2") ) {
		console.log( "一致 : jQueryオブジェクトから DOM 参照(1)" );
		// jQueryオブジェクトで disable(1);
		$(this).prop("disabled", false );
		console.log( $(this).prop("disabled") );
		$(this).prop("disabled", true );
		console.log( $(this).prop("disabled") );
	}
});

</script>

<input id="obj_check_bt3" type="button" value="実行">
<script type="text/javascript">

$("#obj_check_bt3").click( function() {
	if ( $(this).get(0) === document.getElementById("obj_check_bt3") ) {
		console.log( "一致 : jQueryオブジェクトから DOM 参照(2)" );
		// jQueryオブジェクトで disable(2);
		$(this).attr("disabled", false );
		console.log( $(this).attr("disabled" ) );
		$(this).attr("disabled", true );
		console.log( $(this).attr("disabled" ) );
	}
});

</script>

<input id="obj_check_bt4" type="button" value="実行">
<script type="text/javascript">

$("#obj_check_bt4").click( function() {
	console.log( this.getAttribute( "disabled" ) );
	this.setAttribute( "disabled", "disabled" );
	console.log( this.getAttribute( "disabled" ) );
	this.setAttribute("value","setAttribute で状態を変える事はできないので、removeAttribute を実行" );
	this.removeAttribute("disabled");
	console.log( this.getAttribute( "disabled" ) );
});

</script>


posted by lightbox at 2014-03-14 23:23 | jQuery | このブログの読者になる | 更新情報をチェックする

2013年10月17日


JSON オブジェクト記述と、jQuery を使用したボタンイベントの一括登録

ページのトップレベルで定義される変数は、window["変数名"] で参照する事ができます。

ここでは、変数に対して直接 JSON を記述していますが、外部で定義したテキストを jQuery のajax で取得して JSON オブジェクトを使用するともっと自由度の高いイベント登録をする事ができます

▼ JSON 文字列変換例
alert( JSON.parse('{"abc":"こんにちは"}').abc );
<script>
if ( !window.jQuery ) {
	document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");

}
</script>
<script>

var event_lst = {
 "target_a" : function() {
	alert(this.id);
	// this はイベントを起こした要素
	console.dir(this);
 },
 "target_b" : function() {
	alert(this.id);
 },
 "target_c" : function() {
	alert(this.id);
 },
 "target_d" : function() {
	alert(this.id);
 },
 "target_e" : function() {
	alert(this.id);
 }
};


$(function(){
	$( ".event_lst" ).each(function(index) {
		// this は参照した DOM
		$( this ).val(this.id);
		// event_lst の function をイベントに登録
		// var event_lst は トップで定義しているので、
		// window["event_lst"] で参照できます
		$( this ).click( window[this.className][this.id] );
	});
});
</script>
<input class="event_lst" type="button" id="target_a"><br>
<input class="event_lst" type="button" id="target_b"><br>
<input class="event_lst" type="button" id="target_c"><br>
<input class="event_lst" type="button" id="target_d"><br>
<input class="event_lst" type="button" id="target_e"><br>

▼ 実際の実行








タグ:jquery
posted by lightbox at 2013-10-17 15:26 | jQuery | このブログの読者になる | 更新情報をチェックする

2013年06月11日


jQuery と フォームチェックと 未入力チェック( String.trim )

今は、Native で、String.trim はあるはずですが、一応。
( 漢字スペースも対象です )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
if(!String.prototype.trim) {
	String.prototype.trim = function () {
		return this.replace(/^\s+|\s+$/g,'');
	};
}

$(function() {

	$('#frm').submit(function() {

		if ( $("#name").val().trim() == "" ) {
			alert("未入力です");
			$("#name").focus();
			$("#name").select();
			return false;
		}

		if ( $("#name").val() == "123456" ) {
			alert("エラー時選択テスト");
			$("#name").focus();
			$("#name").select();
			return false;
		}

	});

});
</script>
<form
	id="frm"
	method="post"
>
<div id="input_box">
	名前<br />
	<input type="text" name="name" id="name" value="" /><br />
	コメント<br />
	<textarea name="comment" id="comment"></textarea><br />
	<input type="submit" name="send" value="投稿" /><br />
</div>
</form>


関連する情報

String.prototype.trim()



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

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

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

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

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


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

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

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

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

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



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

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり