- Reference
Ryan J Lowe's Dev Blog - 2006-06-13 - LITBox
http://www.ryanjlowe.com/?p=9#
- via
phpspot開発日誌 - 2006-06-21 - LightBox風リサイズ可能ダイアログ表示ライブラリ:LITBox
http://phpspot.org/blog/archives/2006/06/lightboxlitbox.html
- 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
- Reference
kylescholz.com :: blog: Force Directed Graphs in Javascript?
http://www.kylescholz.com/blog/2006/06/force_directed_graphs_in_javas.html
Jolt 開発Blog:タグの関連性を図で見るサンプルを作ってみた
http://blog.jolt.jp/2006/06/post_41.html
- 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
- Reference
HTML Slidy
http://www.w3.org/Talks/Tools/Slidy/
- Reference
Javascript Programming Conventions
http://dojotoolkit.org/js_style_guide.html
MochiKit - StyleGuide
http://trac.mochikit.com/wiki/StyleGuide
Collection & Copy - MochKit - スタイルガイド
http://d.hatena.ne.jp/brazil/20060615/1150324291
- Summary
h1,h2,h3,h4 などの ヘッダタグから自動的に目次を生成.

- Reference
QuirksMode.org - JavaScript - TOC script
http://www.quirksmode.org/dom/toc.html
Ppk on 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
- 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
- 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
- Reference
wg:Bubble Tooltips
http://web-graphics.com/mtarchive/001717.php
- via
phpspot開発日誌 - 2006-06-06 - 吹き出し方式のツールチップテキスト作成JavaScriptライブラリ
http://phpspot.org/blog/archives/2006/06/javascript_14.html
- Reference
Ajax : WebDesigning 2006年5月号サンプル
http://www.openspc2.org/JavaScript/Ajax/WebDesigning/200605/
- 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)); }
<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>
- Source
function linkthumb(){ var nophoto = 'http://img.simpleapi.net/img/nophoto.gif'; var img = document.createElement('img'); img.src = nophoto; img.onmouseout = function(){ img.src=nophoto; img.style.display='none'; }; img.style.position = 'absolute'; img.style.cursor = 'pointer'; img.style.display = 'none'; document.body.appendChild(img); var d = document.getElementsByTagName('div'); for (var j = 0 ; j < d.length ; j++){ if (d[j].className != 'body') continue; var a = d[j].getElementsByTagName('a'); for (var i = 0 ; i < a.length ; i++){ if (!a[i].href.match(/^http:/)) continue; if (a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue; a[i].onmouseover=function(e){ var link = this.href; var thumb = 'http://img.simpleapi.net/small/'+link; img.onmouseover=function(){ img.src=thumb; img.style.display='block'; }; img.onclick = function(){ location.href=link; }; if(document.all){ img.style.left = document.documentElement.scrollLeft + event.x + "px"; img.style.top = document.documentElement.scrollTop + event.y + "px"; }else{ img.style.left = e.pageX + "px"; img.style.top = e.pageY + "px"; } img.src = thumb; img.style.display = 'block'; }; a[i].onmouseout = img.onmouseout; } } } if(window.addEventListener){ window.addEventListener('load',linkthumb,false); } else if(window.attachEvent){ window.attachEvent('onload',linkthumb); } else { window.onload=linkthumb; }
if(a[i].href.match("^http://www\.example\.org/path/to/dir/")) continue;
- Reference
Lightbox JS v2.0
http://www.huddletogether.com/projects/lightbox2/
- Source
Rounded("div#nifty","#377CB1","#9BD1FA"); // この1行だけで要素を角丸にすることが可能
- Reference
tcervo.com - 2004-01-01 - Opening a link in a new window - the valid way
http://tcervo.com/?p=18
- via
hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel="external"を使うのが美しいと思う。
http://hori-uchi.com/archives/000424.html
- Summary
target="_blank" を使わないで新しいウィンドウでリンクを開くための手法.
Behaviour.js を利用すればより簡単,かつHTMLを汚さずに実装可能.
Sample
- Source
var myrules = { '.popup' : function(el){ var href = el.getAttribute('href'); if (href){ el.onclick = function(){ window.open(href); return false;} el.onkeypress = function(){ window.open(href); return false;} } } }; Behaviour.register(myrules);
<script type="text/javascript" src="behaviour.js"></script> <a href="index.html">Normal</a> <a class="popup" href="index.html">Pop up</a>
function toReadableNumber(str){ var ret = Math.floor(str).toString(); ret = ret.match(/./g).reverse().join(""); ret = ret.replace(/(\d{3})/g,"$1,"); ret = ret.match(/./g).reverse().join("").replace(/^,/,""); return ret; }
- Summary
PHP で フォームの値を配列として受け取りたい場合,
以下のように記述するが,JavaScript で値を受け取る場合にちょっと面倒.
document.forms[0].hoge[1].value;
document.forms[0].elements["hoge[1]"].value;
document.getElementById('hoge1').value;
document.forms[0].elements[1].value;