■No10_テーブルのソート

例）テーブルのソート

テーブルのソートを行う


var last_sort;

function sortRow(th,idx){
 var sec=th.parentNode.parentNode;
 var x=new Array, rows=sec.rows, N=rows.length-1;
 var marker=document.createElement('tbody');
 for(var i=0; i<N; ++i)
  x[i]=Object(rows[i+1].cells[idx].firstChild.nodeValue), x[i].row=rows[i+1];
 x.sort();    // XXX: 不安定なソート
 if(last_sort==idx) {x.reverse(); idx=-idx;}
 sec.parentNode.replaceChild(marker,sec);
 for(var i=0; i<N; ++i) sec.appendChild(x[i].row);
 marker.parentNode.replaceChild(sec,marker);
 last_sort=idx;
}

参考URL
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-notes/sort_rows.html

■No9_MacのDockライクなメニュー

例）メニュー

MacのDockライクなメニューをJavaScriptで実現

作成方法はいたって簡単です。
Fisheye Menuからダウンロードしたfisheye.jsとfisheye-menu.cssをhead内に書き込みます。

<link rel="stylesheet" type="text/css" href="http://yourdomain/fisheye-menu.css">
<script src="http://yourdomain/fisheye.js" type="text/javascript"></script>

さらにメニューに表示したい画像を以下のように記述します。

<ul id="fisheye_menu">
<li><a href="リンク先"><img src="画像パス" alt=""><span>説明</span></a></li>
<li><a href="リンク先"><img src="画像パス" alt=""><span>説明</span></a></li>
	<!-- 以下画像分 -->
</ul>

また表示したい画像とは別に、_smallという名の小さい画像を用意する必要があります。
例）表示画像がicon.gifであればicon_small.gifが必要になります。

参考URL
http://marcgrabanski.com/code/fisheye-menu/

■No5_ドラッグできるメモウィンドウ

ドラッグできるメモウィンドウ例

WEB内にメモを表示。
ドラッグする事もでき、さらにcookyに書き込むので、ＷＥＢページを消しても、残っている。

例は、ＨＴＭＬ内にスクリプトを全て記載しているので、
表示させたＨＴＭＬをダウンロードすれば、デスクトップ上でも起動する。

■No4_正規表現

【Javascriptの場合】
■例
if( strName.match( /[^｡-ﾟァ-ンA-Za-z　\s*＊ーｰ<>]+/ ) ) {
 漢字が入力されている
}

■説明

strName ⇒　調べたい文字が入力された変数

・正規表現は、/[   ]+/　で囲む

・　^　⇒マッチしないという意味

・　｡-ﾟ　⇒　半角カナの濁音などを含めた表現

・ ァ-ン　⇒　全角カナ

・ A-Za-z ⇒　全角、半角アルファベット

・ \s　⇒　スペース

その他は、そのまま記載

【JSP(JAVA)の場合】

■例
    Pattern searchPattern = Pattern.compile("[a-z A-Z 0-9 ァ-ン ｡-ﾟ /*＊-ｰー#]+");
    Matcher searchMatcher = searchPattern.matcher(name);
    if (!searchMatcher.find()) {
 　漢字が入力されている
    }

■説明

name ⇒　調べたい文字が入力された変数

・正規表現方法は、JavaScriptと同様

■No3_エクスプローラ風ツリー

エクスプローラ風ツリー例

WEB上でエクスプローラ風ツリーを表示させる。
以下使用方法

add(①，②，③，④，⑤，⑥，⑦，⑧，⑨，⑩)

①ユニークＮｏ
②親のユニークＮｏ
③表示される名称
④ﾘﾝｸＵＲＬ
⑤タイトル
⑥表示されるＵＲＬのターゲット（ウィンドウ名）
⑦閉じた時のアイコンパス
⑧開いた時のアイコンパス
⑨表示時に開くかどうか（true/false)
id Number Unique identity number.
pid Number Number refering to the parent node. The value for the root node has to be -1.
name String Text label for the node.
url String Url for the node.
title String Title for the node.
target String Target for the node.
icon String Image file to use as the icon. Uses default if not specified.
iconOpen String Image file to use as the open icon. Uses default if not specified.
open Boolean Is the node open.

参考ＵＲＬ
http://youmos.com/news/dtree

download