Script.aculo.usの使い方
この記事のURL
Script.aculo.usのコントロールでWebアプリケーションをもっと使いやすく - japan.internet.com デベロッパー
インプレイスエディタっていうんだ。
ProtoSafe encapsulates/modifies Prototype and all included files. Increases compatibility with 3rd party scripts by keeping Prototype out of the global namespace, as much as possible, and by subclassing the Array object to avoid for-in loop pollution.prototype.jsと他のライブラリを同時に利用することを可能にするライブラリ。
After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just hacks of another. None of them truly supported all of the features we needed and those that were close could not be easily adapted without a bottle of Prozac near by.という熱い不満の元に作られてたようです。 モーダルがいいのか悪いのかってのはまだよくわかんないや。
A Javascript / CSS crossfader script | BrandSpankingNew
これいいですね。写真とか使ったらいいかも。
OnMouseで止まるともっといいんだけどなあ。
日本語の説明はこちらです。
A showroom of nice looking simple downloadable DHTML and AJAX scriptsDHTMLとAJAXのサンプルなどを集めたサイト。 既に知っているのも結構あるのですがこうやってまとまっていると意外と便利かも。
この記事では、Ajax と XML でサーバーと通信する以下の 5 つのウィジェットを紹介します (オープン・ソースのものもあれば、ライセンス付きのものもあります)。
JavaScriptで線や円、四角形などの図形を描画するためのライブラリ「wz_jsgraphics.js」にしてもグラフを書くのは面倒だ。
This article define the layout of the exploiting factors of web attacks ie where the JSON framework is compromised.The article is consistent in explaining the pros of the web attack related to JSON.誰か日本語にしてくれ。
Ajaxアプリケーション開発用のライブラリは数多くありますが、Java開発者がすんなり入っていきやすいのはDWR（Direct Web Remoting）でしょう。本記事では、MyEclipseを使ってDWRの簡単なサンプルを開発しながら、DWRの面白さを解説します。クライアント側のHTMLに結構JSファイルを読み込ませなきゃいけないので、JSファイルのサイズなんかが気になる。
JSONは「JavaScript Object Notation」の略であり、Webアプリケーションに役立つ軽量型のデータ交換フォーマットです。テキストベースのフォーマットなので読み書きが簡単で、さらにプログラムで容易に解析できる正規構文を備えています。基本的にはJavaScriptのサブセットであり、詳しくは後で説明しますが、XML 以上に構文の解析が容易です。とてもわかりやすいJSONの説明。
qooxdoo is an advanced open-source JavaScript-based GUI framework.GUIフレームワーク、なんですね。 にしてもメインのJSファイルが940KBもあるとそう簡単には利用できないな。
一方で、XMLでデータをやり取りできる利点を生かせば、当然ながらWebサービスとの効果的な連携も現実的なものになってくる。今回は、Ajaxアプリケーションにおいてよく用いられる「JSON」と呼ばれるデータ形式について解説しよう。JSONに関する初心者向け説明。 サンプルはPHPコード
Lightbox.jsや、Livedoor Readerのフィード追加画面のような、背景全体をグレーアウト表示させるためのライブラリです
Prototype Window Class : Samples
Javascriptを使ってブラウザの中にウィンドウを表示したりダイアログボックスを出したりするサンプルです。
Vitamin Features ｻ Serving JavaScript Fast
JavaScriptファイルやCSSを速く配信するPHPベースなTIPSです。
内容が長いんであれなんですけど、とりあえずサイトの色合いが好きなのでブックマークしておきます。
Dynamic Drive DHTML Scripts- Ajax Tabs Content script
タブ・インタフェース用のAjaxというかJavaｓｃriptライブラリです。
いつか必要になるかもしれません。
Ajax but no JavaScript
オープンソースなAJAX Webフレームワークです。
JavaScriptなしでリッチなUIが実現できるそうです。
おもしろいです。
Agile Partners weblog ｻ iPhoto-like image resizing using Javascript
スライダーで写真の大きさが変化します。
3spots: Ajax Highlight, Link & Email: Deepquote • • •
Webページでどっかを選択したまま実行するとURL作成ページを表示し、URLを作成するとそこにアクセスすると引用した部分がイエローエフェクトで表示されるというURLを作成するブックマークレットです。
実際にURLを作成するのは以下のサイトです。
基本的におもしろいですね。
Dynamic Drive DHTML Scripts- Drop-in content box
サイトを訪れたときに絶対見せたいDIVエリアをドロップ形式で表示させるためのスクリプトです。
回数のコントロールもできます。
というか、これをなんて表現したらいいのかがよくわからない。
好きなページのJavaScriptオブジェクトを参照するブラウザのBookmarklet
使用しているJavaScriptオブジェクトを表示するブックマークレットです。
script.aculo.usを使って机とか床に反射したような効果をイメージに追加するスクリプトです。
あ、うまく使えば相当いい感じになるんだろうなあ。
Javascript Entry - Cody Lindley: ThickBox - One box to rule them all.
LightBox.jsのような感じで背面を暗くして写真を表示するためのJavaｓcriptの違ったインプリメンテーション。
画像だけじゃなくてHTMLなども扱えるようです。
JQueryというライブラリと一緒に使うとおもしろいらしいです。
From DHTML to DOM scripting - an example of how to replace outdated JavaScript techniques.
JavaScript + DOMのお勉強のページです。
長いけどきっと役にたつんだろうなあ。
Vivabit | The Web's Bollocks | Introducing DOM Builder
えっと、DOMでエレメントを作ったり消したり定義したりするときにcreateElementsとかsetAttributesなんかを使うわけですが、そういうのが面倒な人用のJSライブラリです。
そんなわけで使い方、というか記述方法がめちゃくちゃオリジナルなんですけど、理解できれば作成するコードはシンプルになっていいかもしれません。
でも、ドキュメントがないのでよくわかんないや。
サイドバーに貼れるRSSリーダーなんだけど、リンクリストっぽい感じで使えます。OPMLを読み込んでるようです。
最初からOPMLを展開したJSを配信するのとどっちがいいんだろうなあ。まあ、汎用性は分けた方がいいのは確かだけど。
DOMinclude - Kissing Pop-Ups good-bye
JavaScriptで、ポップアップウィンドウのようなものをブラウザ内に表示するためのスクリプトです。
こういうやり方がこれからなんだろうな、と思いつつ、せっかくポップアップ広告を防ぐようになったのできっと広告もこの手法を使ってくるに違いない。
Programming - Dollar E: A document.createElement Wrapper - Arantius.com
createElement のラッパーなわけで、わあこれいいなあ、と思いながら読んでいたらコメントでMochikitのやり方のほうがエレガントだ、という意見もあり、両方試してみることに。
JavaでJSON使ってJavaScriptでDHTMLなページを作る時のミドルウェアです。
XML-RPCというプロトコルがありますけど、そのXMLの部分がJSONになっているわけです。
COMETというAJAXをもっと細かくした、つうか擬似プッシュかなんかでAJAXを使う時のうまい方法の説明記事です。
で、具体的にどうするのかがいまいちわからなかったりするわけだ。
Reusable Javascript Libraries from JavascriptToolbox.com
JavaScriptのツールボックスというかライブラリです。
なんか使えるのがあるといいですね。
Dependent Select Boxesってのがいいかもしれないけど、もっと違うやり方があるかもしれない。
Suckerfish HoverLightbox | Monday By Noon
写真のサムネイルをレイアウトし、それをDIVの中にいれ隠し、テキストリンクにonMouseOverで表示させサムネイルにonMouseOverしたら拡大表示する、っていう見せ方のサンプルです。
MouseOverじゃなくてhoverなのか？
Nifty Corners Cube - freedom to round
角丸な四角を作成するCSSとかJavaScriptの決定版ともいえるサイトだと思います。
ありとあらゆるパターンがあるかと思われます。
今度からこれ使おうっと。
Simon Willison: My ETech JavaScript tutorial
Simon Willison氏によるETechでのJavaScriptチュートリアルのプレゼン資料です。
dhtmlxGrid - sortable Javascript DHTML grid with rich script API
ソーティング可能なテーブルのJSライブラリ。
ホントにあとは印刷系だけですね。
JavaScript Tabifier automatically create an html tab interface
HTMLをほとんど書き換えなくてもタブ化を可能にするJavaScriptです。
タブ化したい部分のDIV部分にclass="tabbertab" title="タブ名称"を付け加えてあげればOKです。
素晴らしいです。
クリックしなくてもマウスを重ねるだけでクリックしたようにするJavaScriptです。
function forall(elem, func) {
if (elem.childNodes) {
var cs = elem.childNodes;
for (var i = 0; i < cs.length; i++) {
forall(cs[i], func);
}
}
func(elem);
}
forall(document, function(elem) {
if ((elem.tagName) && (elem.tagName == 'A')) {
var clicktimer = -1;
var colortimer = -1;
var oldcolor = elem.style.color;
function fade() {
elem.style.color = 'rgb('+elem.fadecolor+', '+elem.fadecolor+', 255)';
elem.fadecolor += 25;
colortimer = setTimeout(fade, 100);
}
elem.onmouseover = function() {
clearTimeout(clicktimer);
clearTimeout(colortimer);
clicktimer = setTimeout(function() {
document.location = elem.href;
}, 1000);
elem.fadecolor = 0;
fade();
};
elem.onmouseout = function() {
clearTimeout(clicktimer);
clearTimeout(colortimer);
elem.style.color = oldcolor;
};
}
});
このスクリプトをページ内に書いておけばOKです。
リンク先にはBookmarkletもあります。
Truncate HTML Text with JavaScript Automatically
指定した文字数を超えたら自動で隠すJavaScriptです。
<p id="truncateMe">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer. Etiam venenatis. Sed ultricies, pede sit amet aliquet lobortis, nisi ante sagittis sapien, in rhoncus lectus mauris quis massa. Integer porttitor, mi sit amet viverra faucibus, urna libero viverra nibh, sed dictum nisi mi et diam. Nulla nunc eros, convallis sed, varius ac, commodo et, magna. Proin vel risus. Vestibulum eu urna. Maecenas lobortis, pede ac dictum pulvinar, nibh ante vestibulum tortor, eget fermentum urna ipsum ac neque. Nam urna nulla, mollis blandit, pretium id, tristique vitae, neque. Etiam id tellus. Sed pharetra enim non nisl.</p><script type="text/javascript">
var len = 100;
var p = document.getElementById('truncateMe');
if (p) {var trunc = p.innerHTML;
if (trunc.length > len) {/* Truncate the content of the P, then go back to the end of the
previous word to ensure that we don't truncate in the middle of
a word */
trunc = trunc.substring(0, len);
trunc = trunc.replace(/\w+$/, '');/* Add an ellipses to the end and make it a link that expands
the paragraph back to its original size */
trunc += '<a href="#" ' +
'onclick="this.parentNode.innerHTML=' +
'unescape(\''+escape(p.innerHTML)+'\');return false;">' +
'...<\/a>';
p.innerHTML = trunc;
}
}</script>
moo.fx is a super lightweight (3 kb) javascript effects library that can add snazz to any website with less than 5 minutes work. It is cross-browser (yes, IE too), fast and light, and does a marvelous job of making you look smart.