memo.xight.org

日々のメモ

カテゴリ : JavaScript

4ページ目 / 全9ページ

Timeline - XMLを読み込んでライムラインを生成するウィジェット

Summary

上部が詳細ビュー.下部が俯瞰ビュー.
ドラッグすることでグリグリ動かすことが出来る.

Timeline is a DHTML-based AJAXy widget for visualizing time-based events.


Reference

SIMILE | Timeline
http://simile.mit.edu/timeline/

via

phpspot開発日誌 - 2006-07-03 - ドラッグしてグリグリ移動できるDHTMLスケジューラウィジェット
http://phpspot.org/blog/archives/2006/07/dhtml_2.html

wz_jsgraphics.js - JavaScript のクロスブラウザなベクタグラフィック描画ライブラリ

Summary

DrawingCanvas.js [2006-01-10-12]のようなライブラリ.

Reference

DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

Function Grapher Online
http://www.walterzorn.com/grapher/grapher_e.htm

via

DrawingCanvas.js 0.03 公開: Days on the Moon
http://nanto.asablo.jp/blog/2005/10/12/105647

JSide - JavaScript 統合開発環境

Summary

Java で開発された,オープンソースの JavaScript 統合開発環境.
ライセンスは GNU LGPL (GNU LESSER GENERAL PUBLIC LICENSE) Version 2.1

o シンタックス色付け
o ブレース対応明示
o JavaScript関数アウトライン
o 文法チェック
o Undo / Redo
o ソースコードの印刷機能

Reference

JSide : JavaScript IDE
https://jside.dev.java.net/

via

JavaScript統合開発環境 JSide 1.0 登場
http://journal.mycom.co.jp/news/2006/06/28/345.html

via ([2006-10-11]追記)

MOONGIFT - JSide
http://oss.moongift.jp/intro/i-2532.html

MOONGIFT - JSide レビュー
http://oss.moongift.jp/review/i-2533.html

JavaScript Library World Cup - JavaScriptライブラリの比較

Summary

Dojo,Prototype.js,Mochikit,Yahoo UI Libraryの基本的な使い方と利点/欠点を紹介.

Reference

The JavaScript Library World Cup [JavaScript & DHTML Tutorials]
http://www.sitepoint.com/article/javascript-library

via

phpspot開発日誌 - 2006-06-21 - Ajaxフレームワークでワールドカップ
http://phpspot.org/blog/archives/2006/06/ajax_15.html

overLIB - マウスオーバーによるツールチップ生成 JavaScriptライブラリ

Reference

overLIB
http://www.bosrup.com/web/overlib/

www.Javable.Jp - Notes:overLib リファレンス
http://www.javable.jp/notes/webscripts/overlibref.html

KANWAKYUDAI::Blog - 2004-01-14 - overLIBでツールチップ表示
http://guitar.jp/MT/archives/000181.php

via

Smarty入門 PHP5+テンプレート・エンジンでつくるMVCアプリケーション pp.200

きれいな独自フォームの生成方法

Summary

Niceform[2006-04-18-3]のような独自フォームを生成する方法.

Reference

maratz.com - 2006-06-11 - Fancy checkboxes and radio buttons
http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/

via

phpspot開発日誌 - 2006-06-19 - デフォルトのフォームをクールにカスタマイズする方法
http://phpspot.org/blog/archives/2006/06/post_85.html

dp.SyntaxHighlighter - ソースのハイライトができるJavaScriptライブラリ

Summary

クライアントでソースコードをハイライトできる、JavaScriptライブラリ。

対応言語

  ActionScript3
  Bash/shell
  C#
  C++
  CSS
  Delphi
  Diff
  Groovy
  JavaScript
  Java
  JavaFX
  Perl
  PHP
  PlainText
  PowerShell
  Python
  Ruby
  Scala
  SQL
  VisualBasic
  XML

Reference

Google Code - syntaxhighlighter
http://code.google.com/p/syntaxhighlighter/

Alex Gorbatchev - SyntaxHighlighter
http://alexgorbatchev.com/wiki/SyntaxHighlighter

via

phpspot開発日誌 - 2006-01-17 - Javascriptだけで各種プログラム言語コードを色分け表示する方法
http://phpspot.org/blog/archives/2006/01/javascript_2.html

振る舞い分離 JavaScript ライブラリ

behaviour.js

http://bennolan.com/behaviour/

Modified Behavior

behaviour.jsの改良版.
http://www.firelord.net/modifiedbehavior

document.getElementsBySelector

http://simon.incutio.com/js/getElementsBySelector.html

cssQuery

http://dean.edwards.name/my/cssQuery/

jQuery

http://jquery.com/

prototype.js

http://prototype.conio.net/

Reference

我的春秋: 振る舞い分離 JavaScript ライブラリ一覧
http://my-chunqiu.cocolog-nifty.com/html/javascript-behaviour.html
TECHMemo - 2005-12-31 - CSSのselectorとイベントハンドラの関連付け
http://d.hatena.ne.jp/dann/20051231/p5
fladdict.net blog - 2006-06-02 - jsがメッサ楽しくなるフレームワークjQuery(1)
http://fladdict.net/blog/2006/06/jsjquery1.html
JavaScript++かも日記 - 2006-06-02 - jQuery
http://jsgt.org/mt/archives/01/001088.html

via

我的春秋 - 2006-01-05 - JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/01/javascript_html_bc22.html
我的春秋 - 2006-06-10 - 続 JavaScript ソースが HTML から消える日
http://my-chunqiu.cocolog-nifty.com/blog/2006/06/_javascript_htm_d49c.html

JavaScriptでラスタスクロール,サイコロ回転エフェクト

Reference

Kawa.net - Animation.Raster - ラスタスクロールだ!
http://www.kawa.net/works/js/animation/raster.html
Kawa.net - Animation.Cube - サイコロ回転エフェクト (rotating cube animation)
http://www.kawa.net/works/js/animation/cube.html

via

@IT - Ajax うきうき Watch 第8回 “CGUI” 消費者が作り出すユーザーインターフェイスの時代
http://www.atmarkit.co.jp/fwcr/rensai/ajaxwatch08/01.html

指定した日時までの時間を表示するスクリプト "countdown.js" と使用法

Summary

YAPC::Asia 2006のカウントダウンで使われていたスクリプトを見てみた.

countdown.js

function toCountString(sec) {
	if (sec <= 0) {
		return '00:00:00';
	}
	var day = Math.floor(sec / (60*60*24));
	var hour = Math.floor(sec % (60*60*24)/(60*60)).toString().replace(/^(\d)$/, '0$1');
	var min = Math.floor(sec % (60*60*24) / (60) % 60).toString().replace(/^(\d)$/, '0$1');
	var sec = Math.floor(sec % (60*60*24)%60%60).toString().replace(/^(\d)$/, '0$1');
	return day + 'days ' + hour + ':' + min + ':' + sec;
}

function updateCountdown(id, m, c) { 
	var node = document.getElementById(id);
	if (!node) {
		return false;
	}
	for (var i = 0; i < node.childNodes.length; i++) {
		node.removeChild(node.childNodes[i]);
	}
	var count = toCountString(Math.floor((m - c)/1000));
	node.appendChild(document.createTextNode(count));
}


HTML

<script type="text/javascript" src="countdown.js">
<div id="countdown"></div>
<script type="text/javascript">
	updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date());
	setInterval("updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date())", 1000);
</script>


複数のカウントダウンに対応する

原始的にやってみると以下のようになる.
<div id="countdown-1"></div>
<div id="countdown-2"></div>
<div id="countdown-3"></div>
<script type="text/javascript">
	updateAllCountdown();
	setInterval("updateAllCountdown()",1000);
	
	function updateAllCountdown(){
		updateCountdown('countdown-1', new Date('June 22,2006 00:00:00'), new Date());
		updateCountdown('countdown-2', new Date('October 1,2006 00:00:00'), new Date());
		updateCountdown('countdown-3', new Date('March 18,2007 00:00:00'), new Date());
		return true;
	}
</script>