SQLの窓

2014年07月04日


jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う

この方法では、任意の集合に対して複数の条件を OR で処理を行う事が想定されます。
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6
.filter()

この .filter 例は、最も良く使う方法としての、セレクタでの選択例です。.filter は、対象となる jQuery オブジェクト集合の中で、さらに選択範囲を狭くするという機能です。その機能に対応して、.end によって filter の範囲選択を解除して元の jQuery オブジェクト集合 に戻します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	$( "#listitems li" )
		// **********************************
		// まず偶数だけを対象にします
		// **********************************
		.filter( ":even" )
		.css({ 
			"background-color": "#123456",
			"color": "#aaaaaa",
			"padding": "10px",
			"width": "300px"
		})

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 再度全体から奇数を対象にします
		// **********************************
		.filter( ":odd" )
		.css({ 
			"padding": "10px",
			"width": "300px"
		})
		.text("OK")

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 全てに対して、輪郭線と角丸を設定
		// **********************************
		.css({ 
			"border": "solid 1px #c0c0c0",
			"border-radius": "8px"
		})


});

</script>
<ul id="listitems">
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

jQuery のドキュメントでは、function を使用した例が多く掲載されています。function の中で条件を設定して、対象ならは true を return するように書かれています。これはすぐ理解できますが、DOM のリストと jQuery のオブジェクトを引数とした場合は少し解りづらいので以下のように具体例を作成しました。

elements とは、その意味の通りではありますが、ここでは配列として動作を確認しました。jQuery はそのままの意味で、セレクタで選択されたものが対象となりますが、セレクタを使うのであれば最初が filter の引数にすれば良いので、既に変数として存在するか、関数内で引数で渡されている事を想定すればいいと思います。
  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5
  • list item 6

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

$(function(){

	$( "#listitems2 li" )
		// **********************************
		// まず DOM で選択
		// **********************************
		.filter( [document.getElementById("d1"), document.getElementById("d2")] )
		.css({ 
			"background-color": "#123456",
			"color": "#aaaaaa",
			"padding": "10px",
			"width": "300px"
		})

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 再度全体から jQuery で選択
		// **********************************
		.filter( $("[id*=j]") )
		.css({ 
			"padding": "10px",
			"width": "300px"
		})
		.text("OK")

		// **********************************
		// 一旦、フィルタを解除します
		// **********************************
		.end()

		// **********************************
		// 全てに対して、輪郭線と角丸を設定
		// **********************************
		.css({ 
			"border": "solid 1px #c0c0c0",
			"border-radius": "8px"
		})


});

</script>
<ul id="listitems2">
  <li id="jquery1">list item 1</li>
  <li id="d1">list item 2</li>
  <li id="jquery2">list item 3</li>
  <li id="jquery3">list item 4</li>
  <li id="d2">list item 5</li>
  <li id="jquery4">list item 6</li>
</ul>


タグ:jquery
posted by lightbox at 2014-07-04 21:49 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")








要素(エレメント)を動的に作成するのは、DOM では document.createElement です。もちろんそれでも使えますが、jQuery では至極簡単に $("要素の記述") で作成されます。作成されただけでは画面に所属しないので( 表示されない )、.appendTo( 既に存在する要素 ) として親要素の1番目の要素として登録します。

その後は、必要な属性・値・CSS・イベント・前後の補正を追加して完成させます。
	// ************************************
	// a 要素を作成して、
	// anchorContent の子要素として追加する
	// ************************************
	$("<a></a>").appendTo( $("#anchorContent") )

		// ************************************
		// 属性として id と href と target の値をセット
		// ************************************
		.attr({
			"id": "anchorContent1",
			"href": "https://www.google.co.jp/",
			"target": "_blank"
		})

		// ************************************
		// テキストノードとしての値をセット
		// ************************************
		.text("Google")

		// ************************************
		// 表示関連の属性をセット
		// ************************************
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"text-decoration": "none",
			"color": "navy"
		})

		// ************************************
		// イベントをセット
		// ************************************
		.click(function(){
			console.log("アンカーがクリックされました");
		});


二つ目以降は、最初のアンカーに対して、.insertAfter する事によって繋いで行きます。ここでは、親要素が PRE なので、二つ目以降は改行する為に最後に .before("\n\n") を追加しています。
<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">

$(function(){

	// 通常リンク
	$("<a></a>").appendTo( $("#anchorContent") )
		.attr({
			"id": "anchorContent1",
			"href": "https://www.google.co.jp/",
			"target": "_blank"
		})
		.text("Google")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"text-decoration": "none",
			"color": "navy"
		})
		.click(function(){
			console.log("アンカーがクリックされました");
		});
	

	// ボタンがわり
	$("<a></a>").insertAfter($("#anchorContent1"))
		.attr({
			"id": "anchorContent2",
			"href": "#"
		})
		.text("ボタンのかわり")
		.css({
			"font-size": "20px",
			"font-weight": "bold"
		})
		.click(function( event ){
			console.log("アンカーがクリックされました1");

			window.open("https://translate.google.co.jp/?hl=ja&tab=iT");

			// クリックする事によって起こる # の機能をキャンセル
			event.preventDefault();
		})
		.before("\n\n");

	// jQuery UI でアンカーをボタン化
	$("<a></a>").insertAfter($("#anchorContent2"))
		.attr({
			"id": "anchorContent3"
		})
		.button()
		.text("jQuery UI でアンカーをボタン化")
		.css({
			"font-size": "20px",
			"font-weight": "bold",
			"padding": "10px"
		})
		.click(function( event ){
			console.log("アンカーがクリックされました2");

			window.open("https://www.google.co.jp/maps/preview?hl=ja");

			// クリックする事によって起こるかもしれない処理をキャンセル
			event.preventDefault();
		})
		.before("\n\n");

});

</script>

<pre id="anchorContent"></pre>




タグ:jquery
posted by lightbox at 2014-07-04 14:54 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

2014年07月03日


jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます

二つ並んでいるボタンと DIV をクリックすると、それぞれが click イベントによって、ピンク色になります。

一番下のボタンは、それらの定義済みの click イベントを一行で全て呼び出しています。但し、その時に色コードを渡しているので、結果としてピンクでは無く濃い灰色に変化します。

※ この場合の一括用セレクタは "[id*=target]" です。
※ パラメータは配列で渡し、イベント側でその数ぶんの仮引数を定義します。


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

$(function(){

	// 拡張パラメータにより、単独か trigger か判断できます
	$( "#target1" ).click( function( event, color ) {
		console.log( $( this ).val() );
		if ( color ) {
			$(this).css("background-color", color  );
		}
		else {
			$(this).css("background-color", "#ffc0c0"  );
		}
	});

	// 拡張パラメータにより、単独か trigger か判断できます
	$( "#target2" ).click( function( event, color ) {
		console.log( $( this ).val() );
		if ( color ) {
			$(this).css("background-color", color  );
		}
		else {
			$(this).css("background-color", "#ffc0c0"  );
		}
	});

	$( "#div_target" )
		.css({
			width: "300px",
			height: "30px",
			border: "1px solid #000000",
			"border-radius": "8px"
		})
		// 拡張パラメータにより、単独か trigger か判断できます
		.click( function( event, color ) {
			console.log( "クリックされました" );
			if ( color ) {
				$(this).css("background-color", color  );
			}
			else {
				$(this).css("background-color", "#ffc0c0"  );
			}
		});

	// **************************************************
	// trigger で呼び出した場合は、拡張パラメータを使用
	// するようにしているので単独でクリックした時と色が
	// 違います
	// **************************************************
	$( "#all" ).click( function() {
		// id に target の文字列を含む要素の click イベントを呼び出す
		$( "[id*=target]" ).trigger("click", [ "#c0c0c0" ] );
	});

});

</script>

<input type="button" id="target1" value="この文字を表示するボタン1">
<input type="button" id="target2" value="この文字を表示するボタン2">
<div id="div_target"></div>
<br>
<input
	type="button"
	id="all"
	value="上のコンテンツの click イベントを呼び出すボタン">
jQuery ドキュメント : .trigger


posted by lightbox at 2014-07-03 10:52 | メソッド:jQuery | このブログの読者になる | 更新情報をチェックする

2014年07月02日


jQuery でボタンを作成して、this でボタンのカスタム属性を参照する方法のバリエーション

▼ こちらのツールの『サンプル』ボタンで表示されるウインドウの『属性の参照』で実行できます


DOM でなにもかも実装しようとすると、とても時間コストがかかりすぎます。jQuery を使用すると、それを大幅に削減できますが、だからと言って DOM の仕様を無視する、または覚えないのは問題があります。

全て jQuery で書いたほうが説明は簡単ですが、少なくとも data-* 属性ではどちらも理解して使えるようにしておいたほうがいいと思います。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">

$(function(){

	// ボタン
	$("#button_control")
		.attr({
			"type": "button",
			"data-my-data": "カスタム属性"
		})
		.val("ボタン")
		.css({
			"font-size": "20px",
			"background-color": "orange",
			"font-weight": "bold",
			"border-radius": "10px"
		})
		.click(function(){
			console.log("ボタンがクリックされました");

			// 以下の4つは全て my_button を表示します
			console.log( this.name );
			console.log( $(this)[0].name );
			console.log( $(this).prop("name") );
			console.log( $(this).attr("name") );

			// 以下の4つは全て カスタム属性 を表示します
			console.log( $(this).data("my-data") );
			console.log( $(this).attr("data-my-data") );
			console.log( this.dataset.myData );
			console.log( $(this)[0].dataset.myData );

			// 以下の4つは全て 新しい属性 を表示します
			console.log( $(this).data("your-data") );
			console.log( $(this).attr("data-your-data") );
			console.log( this.dataset.yourData );
			console.log( $(this)[0].dataset.yourData );
		});

});

</script>

<input
	id="button_control"
	name="my_button"
	data-your-data="新しい属性">
click イベントの中で参照される this は DOM です。


posted by lightbox at 2014-07-02 23:50 | 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 終わり