2006-07-24 Mon
Javascript Sound Kit - ActionScript Sound Object のラッパライブラリ
- Code Example
var mysound = new Sound(); mysound.loadSound("http://example.com/path/to/music.mp3", true); mysound.setVolume(30);
- Javascript MP3 Player Demo
http://jssoundkit.sourceforge.net/player.html
- API Test Page
http://jssoundkit.sourceforge.net/test.html
- Reference
SourceForge - Javascript Sound Kit
http://jssoundkit.sourceforge.net/
2006-07-20 Thu
parapara.js - マウスホイールで画像を切り替える
- Summary
マウスホイールを回転させ,画像を切り替えるライブラリ.
http://tatamilab.jp/~yuugo/parapara/ooi/parapara.js を参照.
- Source
<html> <head> <script type="text/javascript" src="path/to/parapara.js"></script> </head> <body> <img src="images/FILE_0001.jpg" onload="cacheTo(this,'images/FILE_0010')" /> </body> </html>
- Demo
http://tatamilab.jp/~yuugo/parapara/ooi/parapara.html
- Reference
たたみラボ - 2006-01-26 - マウスホイールでパラパラ写真
http://www.tatamilab.jp/rnd/archives/000105.html
たたみラボ - 2006-02-12 - iPodでパラパラ写真
http://www.tatamilab.jp/rnd/archives/000131.html
- via
phpspot開発日誌 - 2006-07-20 - マウスホイールでパラパラ写真
http://phpspot.org/blog/archives/2006/07/post_91.html
2006-07-19 Wed
Link Thumbnail - リンクをマウスオーバーでサムネイルを表示するライブラリ
- Summary
リンクをマウスオーバーでサムネイルを表示するライブラリ.
<html> <head> <script type="text/javascript" src="http://example.com/path/to/arc90_linkthumb.js"></script> <style type="text/css" media="screen"> .arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } .arc90_linkpicIMG { padding: 0 4px 4px 0; background: #FFF url(/tools/c/images/linkpic_shadow.gif) no-repeat bottom right; } </style> <script>arc90_linkThumbUseClassName = false;</script> </head> <body> <a href="http://example.com/" class="linkthumb">Popup</a> <a href="http://example.com/">No Popup</a> </body> </html>
- Demo
arc90 lab - tools - Link Thumbnail - Demo
http://lab.arc90.com/tools/linkthumb/
- Reference
arc90 lab - tools - Link Thumbnail
http://lab.arc90.com/2006/07/link_thumbnail.php
2006-07-19 Wed
BadgerFish - XMLをJSONに
- Reference
BadgerFish
http://badgerfish.ning.com/
- via
XMLをJSON形式に変換する「BadgerFish」
http://secure.ddo.jp/~kaku/tdiary/20060718.html#p11
2006-07-14 Fri
JavaScriptでリストをスクロール
- Summary
livedoor knowledge の質問がスクロールしている部分について.
gimmick.js を読んでみた.
function scrollTips(id, interval) { var tips = document.getElementById(id); removeWithoutElement(tips); var height = getPixcelValue(tips.style["height"]); var beforeLast = tips.childNodes.length - 1; var orgScrollTop = tips.scrollTop; if (orgScrollTop == (height * beforeLast)) { while (--beforeLast >= 0) { tips.appendChild(tips.removeChild(tips.firstChild)); } orgScrollTop = 0; tips.scrollTop = 0; } var i = 1; var scrollDelay = window.setInterval( function() { tips.scrollTop = orgScrollTop + i; if (++i > height) { clearInterval(scrollDelay); scrollDelay = 0; } } , interval); } function removeWithoutElement(node) { var child = node.firstChild; while (child) { var nextSibling = child.nextSibling; if (child.nodeType != 1) { node.removeChild(child); } child = nextSibling; } } function getPixcelValue(pixcel) { var px = pixcel.indexOf("px"); return (px == -1) ? pixcel: pixcel.substring(0, px); }
<html> <head> <style> .tips { line-height: 125%; height: 65px; overflow:hidden; } </style> </head> <body> <div id="tipsList" style="float:right;width:153px;height:65px;overflow:hidden;"> <div class="tips"><a href="#">1件目のコンテンツです。</a></div> <div class="tips"><a href="#">2件目のコンテンツです。</a></div> <div class="tips"><a href="#">3件目のコンテンツです。</a></div> <div class="tips"><a href="#">4件目のコンテンツです。</a></div> <div class="tips"><a href="#">5件目のコンテンツです。</a></div> </div> <script type="text/javascript"> window.setInterval("scrollTips('tipsList', 15)", 2000); </script> </body> </html>
- Reference
livedoor knowledge
http://knowledge.livedoor.com/
2006-07-13 Thu
mechanize.js - IEの遠隔操作用ライブラリ
- Reference
最速インターフェース研究会 :: IEの遠隔操作用ライブラリmechanize.js
http://la.ma.la/blog/diary_200607121903.htm
2006-07-11 Tue
DynamicTree - JavaScriptでツリー構造表示
- Summary
ツリーをエクスプローラ風に操作するJavaScript.
HTMLをインポートしたり,HTML,PHP,SQLにエクスポートが可能.
- Reference
DynamicTree example 2
http://code.gosu.pl/dl/mygosuMenu/demo/1.5/example2.html
code.gosu.pl
http://code.gosu.pl/
SourceForge.net: MyGosuClan
http://sourceforge.net/projects/mygosuclan/
2006-07-06 Thu
Json-lib
- Reference
Maven - Welcome to Json-lib
http://json-lib.sourceforge.net/
- via
オレンジニュース - 2006-07-03
http://secure.ddo.jp/~kaku/tdiary/20060703.html#p04
2006-07-06 Thu
OrderByColumn.js - prototype.js を用いた table の列でソートするJavaScriptライブラリ
- Reference
OrderByColumnデモ
http://skit.dip.jp/lab/js/order_by_column
- via
phpspot開発日誌 - 2006-07-06 - テーブルの列でソートするJavaScriptライブラリ
http://phpspot.org/blog/archives/2006/07/javascript_19.html
2006-07-05 Wed
Litebox - moo.fx を利用した 軽量な Lightboxエフェクト
- Refernece
Litebox- Same great taste, less calories
http://www.doknowevil.net/litebox/
- via
GIGAZINE - ファイルサイズわずか3KBのオーバーレイ効果「Litebox」登場
http://gigazine.net/?/news/comments/20060705_litebox/
2006-07-03 Mon
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
2006-07-03 Mon
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
2006-06-30 Fri
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
2006-06-27 Tue
YUIとSimpleAPIを利用したリンク先サムネイル表示
- Reference
[YUI] マウスオーバーでリンク先サムネイル表示
http://www.kawa.net/works/js/tips/yui-tooltips.html
- via
phpspot開発日誌 - 2006-06-27 - マウスオーバーでリンク先サムネイル表示
http://phpspot.org/blog/archives/2006/06/post_86.html
2006-06-26 Mon
iBox - lightbox.js 風エフェクトライブラリ
- Summary
MIT Open Sourceライセンス.
- Reference
iBox Test Page
http://www.ibegin.com/ibox/ibox-test.html
iBox / iBegin Blog (powered by evoBlog)
http://www.ibegin.com/blog/p_ibox.html
- via
GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」
http://gigazine.net/?news/comments/20060625_ibox_ajax/
2006-06-22 Thu
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
2006-06-22 Thu
LITBox - LightBox風リサイズ可能ダイアログ表示ライブラリ
- 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
2006-06-21 Wed
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
2006-06-21 Wed
Force Directed Graphs in Javascript - グラフを作成するJavaScriptライブラリ
- 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
2006-06-19 Mon
きれいな独自フォームの生成方法
- 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