memo.xight.org

日々のメモ

カテゴリ : JavaScript

8ページ目 / 全9ページ

Drag & Drop for Images and Layers

Summary

  画像をマウスで動かすことが可能.
  Shift を押しながら画像をドラッグするとサイズ変更可能.

Reference

  JavaScript: DHTML Library, Drag & Drop for Images and Layers
  http://www.walterzorn.com/dragdrop/dragdrop_e.htm
  Drag&Drop for Images and Layers: Interface of the JavaScript Library
  http://www.walterzorn.com/dragdrop/api_e.htm

via

  cl.pocari.org - 2005-03-02
  http://cl.pocari.org/2005-03-02.html#2005-03-02-13

JavaScript Programming

Summary

  alert によるデバッグは面倒なのでデバッグメッセージの表示を挿入することをためらうようになる.
  デバッグメッセージを表示するようにすると便利.
  

Reference

  eto.com - 2005-03 - JavaScript Programming
  http://eto.com/d/0503.html#JavaScript_Programming
  eto.com - 2005-02 - JavaScript debug
  http://eto.com/d/0502.html#JavaScript_debug
  JavaScript のチョット便利な debug 方法
  http://homepage1.nifty.com/kuraman/js/debug.html

via

  www.textfile.org - 2005-03-03
  http://www.hyuki.com/tf/200503#i20050303122155

JavaScript でデザインパターン

Reference

  指向性メモ - 2005-02-23 - JavaScriptでデザインパターン
  http://ishikawa.arielworks.com/memo/2005/02/23/053637
  指向性メモ - 2005-02-24 - JavaScriptでデザインパターンその2
  http://ishikawa.arielworks.com/memo/2005/02/24/020708
  指向性メモ - 2005-02-24 - JavaScriptでデザインパターンその3
  http://ishikawa.arielworks.com/memo/2005/02/24/090533

via

  読書記録ChangeLog - 2002-02-25
  http://dkiroku.com/2005-02-25-19.html

Amazon の画像置換

Summary

chalow で Amazon の画像置換を利用してみる.

amazon.js

function replaceImage(img) {
	if (img.width == '1' && img.src.match(/\.01\./)) {
		img.src = 'http://images-jp.amazon.com/images/G/09/x-locale/detail/thumb-no-image.gif';
		img.width = 98;
		img.height = 140;
	} else if (img.width == '1') {
		img.src = img.src.replace('.09.','.01.');
	}
}


cl.conf

  - 各 head タグ内に記述
<script src="path/to/amazon.js" type="text/javascript"></script>


  - amazon リンクの作成プラグインを変更
<img src="/path/to/image" onload="replaceImage(this)" />


Reference

  hail2u.net - 2004-05-30 - Amazon の画像置換 #2
  http://hail2u.net/blog/coding/air_2.html

Kupu - WYSIWYG XHTML Editor

Summary

  JavaScript による WYSIWYG なXHTMLエディタ.
  右クリックからCut, Copy, Paste, Create link, Create image, Add table の操作が可能.
  日本語も入力可能.

Reference

  OSCOM Kupu - Kupu WYSIWYG XHTML Editor
  http://kupu.oscom.org/

via

  Open Alexandria - 2005-01-21 - Kupu
  http://www.openalexandria.com/item_410.html

JavaScript でインクリメンタル grep 検索

Summary

  JavaScriptでinput要素のonkeyup属性を利用してインクリメンタル grep 検索を実現.

検索対象とする各行を <span class="line">...</span> で囲っておいて,
pattern にマッチした以外の行を非表示にするという手法を取っている


JavaScriptのソース (元ソース)

function grep (pattern) {
	try {
		regex = new RegExp(pattern, "i");
		spans = document.getElementsByTagName('span');
		for (i = 0; i < spans.length; i++) {
			e = spans[i];
			if (e.className == "line" && e.innerHTML.match(regex)) {
				e.style.display = "inline";
			} else {
				e.style.display = "none";
			}
		}
	} catch (e) {
		// 正規表現の文法エラーを無視する
	}
}


HTMLのソース - インクリメンタル grep 検索 (元ソース)

<form>
<input type="text" name="pattern" onkeyup="grep(this.value)">
</form>


HTMLのソース - grep 検索 (元ソース)

<form onsubmit="grep(this.pattern.value); return false;">
<input type="text" name="pattern">
</form>

Reference

  いやなブログ - 2004-11-04
  http://namazu.org/~satoru/blog/archives/000008.html

via

  読書記録ChangeLog - 2004-11-04
  http://dkiroku.com/2004-11-04.html#2004-11-04-15

JavaScript で複数箇所のキーワードをハイライト

Summary

  キーワードにマウスカーソルを載せると,複数箇所に出現するキーワードが一斉にハイライトされる
  大きなページで反応が鈍くなるらしく,途中の処理をキャッシュすることで軽減させている.
  これはおもしろい.

JavaScriptのソース (元ソース)

highlightColor = "yellow";
backgroundColor = "white";

var cache;
function initCache () {
	cache = new Array();
	spans = document.getElementsByTagName('span');
	for (i = 0; i < spans.length; i++) {
		name = spans[i].className;
		if (!cache[name]) {
			cache[name] = new Array();
		}
		cache[name].push(spans[i]);
	}
}

function hlclass (name, flag) {
	if (!cache) {
		initCache();
	}
	for (i = 0; i < cache[name].length; i++) {
		cache[name][i].style.backgroundColor = (flag ? highlightColor : backgroundColor);
	}
	return true;
}


HTMLのサンプル (元ソース)

<span class="x" onmouseover="hlclass('x', 1)" onmouseout="hlclass('x', 0)">x</span>
<span class="x" onmouseover="hlclass('x', 1)" onmouseout="hlclass('x', 0)">x</span>
<span class="y" onmouseover="hlclass('y', 1)" onmouseout="hlclass('y', 0)">y</span>
<span class="y" onmouseover="hlclass('y', 1)" onmouseout="hlclass('y', 0)">y</span>


Reference

  いやなブログ - 2004-10-29
  http://namazu.org/~satoru/blog/archives/000007.html

via

  たつをのChangeLog - 2004-10-29
  http://chalow.net/2004-10-29.html#2004-10-29-5

クリックするとExplorer風のツリーメニューを表示する

Summary

  ExplorerのようなツリーメニューをJavaScriptで実現する.
  スタイルシートのdisplayプロパティを操作することで実現する.
表示する場合 display:block;
表示しない場合 display:none;
- Reference
  JavaScript例文辞典 - マウス / イベント編 - [07] クリックするとツリーメニューを表示する (入れ子 / ネスト)
  http://www.openspc2.org/reibun/javascript/mouse/007/