使いやすい DHTML ポップアップなどを実現する「DragResize.js」を作りました - WebOS Goodies
本日は、現在製作中のツールの副産物としてできた、 HTML 要素をドラッグ・リサイズするライブラリをご紹介します。 DHTML でポップアップウインドウなどを実現するのに便利です。そんなライブラリいくらでもあるよ！と言われそうですが、けっこう頑張って座標補正などしていて、以下の特徴があります。 要素がドキュメントからはみ出さないように補正する。 ドラッグ中にスクロールしてもドラッグ位置がずれない。 要素が表示領域外に出たときは自動スクロール。 DragResize クラスを除き、グローバルな名前空間を汚染しない。 他のライブラリに依存せず、単独で動作する。 若干の制限はあるものの、概ねクロスブラウザで動作する。 なるべくデスクトップに近い操作性を得られるように工夫したつもりです。とくに利用制限などはありませんので、改変や商用アプリへの組み込みなど、ご自由にお使いください。ただし、動作保証な
コードのサイズを圧縮する! - dogmap.jp
YUI Compressor に一日の長があるようだ。 オリジナルをそのまま gzip 圧縮しても 23% まで小さくなるが、各圧縮ツールで圧縮後 gzip 圧縮すると、どのツールを使用しても 17% 〜 19% くらいのサイズになってしまうことが分かると思う。 これはもう、ツールで圧縮 & gzip圧縮 はやらなければ損ですね。 JavaScript の自動圧縮 これだけだと記事的につまんないので、自動圧縮を考えてみましょう。 Expiresヘッダを追加しよう!、コンポーネントを圧縮しよう!のときに作った add-expires.php を拡張してみます。 今回は圧縮ツールとして jsjuicer を採用。 ソースをダウンロードしてきて、コンパイルし add-expires.php と同じディレクトリに保存しておいてください。 <?php $file_found = false; if
IT戦記 - 一行で IE の JavaScript を高速化する方法
以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -
hori-uchi.com: OOなJavaScriptの勉強がてら、ボタンの2度押し禁止機能を簡単に実現するライブラリを作ってみました
OOなJavaScriptの勉強がてら、ボタンの2度押し禁止機能を簡単に実現するライブラリを作ってみました ちょっと時代に乗り遅れている気もしますが、最近prototype.jsをつかったOOなJavaScriptを書くのにはまっています。 今日はbindとbindAsEbentListenerの勉強がてら、これまたかなり昔話題になった「2度押し禁止ボタン」を実現するコードを書いてみました。 input.js 使い方はこんな感じです。 // prototype.jsとinput.jsをロードします。 <script type="text/javascript" src="/path/to/prototype.js"></script> <script type="text/javascript" src="/path/to/input.js"></script> <script type=
Prototype.js を使った JavaScript OOP 講座 #01
社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。 資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。 講義の内容は基本的にソース嫁。ソースレビュー形式。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・ オブジェクトを作ってみる。 var object = {};オブジェクトにメソッドとかプロパティを追加してみる。 var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
