LightBoxライクに同一ページ内の要素をポップアップするライブラリ:phpspot開発日誌
Leightbox I've changed ParticleTree's lightbox functionality to allow the use of inline div's instead of AJAX calls. Very often I find that I want the data in the lightbox to be indexable by search engines and visible to people with screenreaders etc. 同一画面内でポップアップウィンドウを開くGreyBox というのを先日紹介しました。 GreyBoxはポップアップ内容をJavascriptとIFRAMEを使って動的にページにロードしていましたが、 LeightBoxではページ内HTMLに記述されている特定のdiv要素をLightBox風にポッ
Ajaxな有用コンポーネント集:phpspot開発日誌
TurboWidgets, presented by TurboAjax Group TurboWidgets are JavaScript client-side controls that provide a rich user-interface experience for AJAX-style web applications. 以前紹介した、AjaxなphpMyAdmin のページで、TurboWidgetsというAjax部品集がリリースされていたので紹介。 例えば、次のイメージはTurboGridというコンポーネント。かなりクオリティ高いです。 その他にも、次のようなプログレスバー(ぐんぐん伸びるイメージがカッコいい) 高品質なボタンコンポーネント集(一見デスクトップ風) ツリービュー(アイコン表示できる) タブコンポーネント(Appleのサイトっぽい) ドラッグアンドドロッ
scriptaculous のデモをローカルで実行する - 2nd life (移転しました)
http://rails2u.com/misc/scriptaculous/test/functional/ scriptaculous 1.5.2 が出ましたね。主な変更点は scroll の drag & drop がサポートされたとか。で、scriptaculousのサイトを見ても新機能のデモは載ってません。そんなときはローカルで動かして見るのがお手軽でオススメです。 方法はscriptaculousのパッケージに含まれる test/functional/index.html*1 を開くだけでOK。そこからリンクが張られているのでいろいろなデモ(test)を見ることができます。たとえば、今回1.5.2で実装された scroll の drag & drop 機能なら http://rails2u.com/misc/scriptaculous/test/functional/dragdr
秋元@サイボウズラボ・プログラマー・ブログ: Yahoo! UI Library はすごいね
via O’Reilley Radar Yahoo! UI Library で、Yahoo! が実際に使っている Javascript のライブラリ集が公開されている。 Yahoo! のどこでこんなユーザインタフェースが使われてるんだろう? と思うぐらい、サンプルで見せられる UI パーツは豊富だ。それぞれの “Example” を見てまわるだけでもおなかいっぱいだ。 コアユーティリティ アニメーション クロスブラウザ対応の XMLHttpRequest ラッパ DOM 操作 ドラッグアンドドロップ イベントハンドリング UI コントロール部品 カレンダー スライダー ツリー ドラッグアンドドロップなんかは、ファンタジースポーツで使われているのを見たことがあるので知っていた。複数のリスト間でアイテムの移動や並べ替えを行うときには使えるパーツだろう。 日本語カレンダーなんかも、いい感じで再利
Dampening, Buffering, OpenSearch, Ajax な Hack - naoyaのはてなダイアリー
ちょっと前に Six Apart の Anil Dash の blog で Web Development Trends for 2006 なんて話題があって、来年のウェブ開発トレンドはこれだ! なんてことを彼の独断でリストアップしてました。氏曰く AtomPP, XHTML, JSON, E4X, Ruby ... などなど。 このリストがほんとにトレンドになるかですが、Ruby は Rails の勢いがますます加速しているし、AtomPP は今年末に仕様が確定する他 RESTful なアプリケーション設計が注目を集めています。あと JSON が熱いのはいわずもがな...ということで結構いいところを突いてる気がします。 この中で聞きなれないれない言葉として Dampening と Buffering というのが出てきます。どちらも Rails を開発した DHH がいる 37signal
Free Dynamic DNS(DDNS) by POP3,IMAP4,FTP,HTTP-BASIC for Home Server, VPS | MyDNS.JP
www.hirax.net is not accessible... Sorry. I do not know why this site is not working. If you know Administrator of this site, please contact directly. You may be able to see it in Google cache. For administrator ... MyDNS.JP did not received IP address from you over One week. Please check your notify system. If you restart notification of IP address, MyDNS.JP will apply your IP address to DNS info
Selenium で Ajax アプリケーションをテスト
Selenium で Ajax アプリケーションをテスト 2005-12-01-2: [JavaScript] http://www.sooey.com/journal/2005/12/01/68/ Selenium の waitForValue と waitForCondition で Ajax のテストができるらしいというお話． - ref.: [2005-11-24-2] Selenium ver.0.5 勝手にまとめサイト [2005-05-27-2] Web アプリケーションテストツール selenium
最速インターフェース研究会 :: 実践JavaScriptリファクタリング
同じ事をやるにも、いろんな書き方があるわけでいかにして短くてわかりやすいコードを書くかというノウハウを紹介します。 例として"abcde"を80回繰り返した文字列を作るとして実際に自分のコーディングスタイルがどんな風に変化していったのか、という。 短くなるのは確かなんだけどわかりやすいかというと、人によるかもしれない。 グローバル関数を定義2年前なら、多分こういう具合だった。 //ふつうに関数として定義する function x(str,num){ var tmp = ""; for(var i=0;i<num;i++){ tmp += str; } return tmp; } x("abcde",80) Stringのメソッドとして定義1年前だとこんな感じ。 //Stringのメソッドとして定義する String.prototype.x = function(num){ var tmp
prototype.js v1.5.0 の使い方
それは何？ prototype.js は Sam Stephenson によって書かれた JavaScript ライブラリです。 この熟考の上記述された標準に準拠したコードは、Web 2.0 において特徴となるリッチでインタラクティブなウェブページを制作する際の重荷を、あなたの肩から取り去ってくれるでしょう。 もしこのライブラリを使ったことがあるなら、充実したドキュメントがこのライブラリの売りではないことに気がついたはずです。 私は他の開発者と同様に、ソースコードを読み、試行錯誤しながら prototype.js を理解しました。 自分が学んでいる間にメモを取り、それを他の人たちと共有することは価値があるのでは、と考えたのです。 加えて、このライブラリによって提供されているオブジェクト、クラス、関数、拡張機能についての 非公式リファレンス も提供しています。 ここで提供する例とリファレンス
YappoLogs: suggest_ajax.js - suggest.jsをAjaxなどに対応する等の拡張スクリプト公開
suggest_ajax.js - suggest.jsをAjaxなどに対応する等の拡張スクリプト公開 先月suggest.jsというGoogle Suggestっぽい物を簡単に作れるスクリプトが公開されました。 ちょろちょろっと自分の使いやすいようにカスタマイズしていたのですが、それを公開してみます。 最初はAjax化でもしようと思ってたですが、Ajax処理内蔵するのもいけてないので付けるのやめました。 ソースの中身は、全部なごりなのです。。。 suggest.jsの思想の真逆を行っているなんて事は気のせいです。 ソース suggest_ajax.js サンプル ajaxで補完リストを読み込む 主な変更点 補完リスト上でEnterキーを押して、選択肢の確定を行うことができる 補完リストの作成直前と、選択肢の確定後のそれぞれにフックを行うことができるregister_hook()メソッド追
川o・-・）＜2nd life script.aculo.usのファイルサイズを軽減
http://www.goodpic.com/mt/archives2/2006/02/ajax.html で紹介されてる通り、script.aculo.usは通常のロードではファイルサイズが100KBを超えます。しかし、それはフルでロードしたときの容量なのです。script.aculo.usはロードするパッケージを選ぶことができる*1ので必要な機能だけを選べば良いのです。例えば、たいていの場合はscript.aculo.usのeffects.jsだけしか使わなかったりするので <script src="/js/scriptaculous.js?load=effects" type="text/javascript"></script> とすればOK。これでファイルサイズは34KBに収まります。また、二つ以上のパッケージを選択したい場合は <script src="/js/scriptac
Ajax なライブラリを使いまくって、自分のサイトが重くなってしまったら：Goodpic
This shop will be powered by Are you the store owner? Log in here
最速インターフェース研究会 :: キー割り当て用ライブラリを作った
依頼を受けて作ってみた。 http://la.ma.la/roll.html http://la.ma.la/js/hotkey.js j,kでスクロールできる。 使いまわしがきくように他のライブラリに依存も影響もしないように作ってあります。Bloglinesのj,kでスクロールみたいなのを作りやすいようにするのが目的。ただsafariとかは何かかなり違うらしいので、そこらへんは良く知らない。あとOperaはデフォルトでワンキーショートカットが割り当てられてたりするので動くとは限らない。 全体に対してキーイベントを設定すると、フォームの入力ができなくなるっていう問題があるのでイベントの発生元がinput|textareaの場合は処理しないようにしてある。 追加したコードはこんな感じ。 var kb = new HotKey; kb.add(["j","2","down"], functio
Javascript（script.aculo.us）で、ブログをアニメーション・デザイン：Goodpic
This shop will be powered by Are you the store owner? Log in here
prototype.js 1.4.0 を読む
prototype.js 1.4.0 を読む 2006-01-06-5: [JavaScript] - prototype.js 1.4.0 を読む：prototype.js ～ base.js http://blog.hawklab.jp/item-21.html - prototype.js 1.4.0 を読む：base.js その 2 http://blog.hawklab.jp/item-23.html - prototype.js 1.4.0 を読む：base.js その 3 http://blog.hawklab.jp/item-30.html - prototype.js 1.4.0を読む：string.js http://blog.hawklab.jp/item-35.html - prototype.js 1.4.0を読む：enumerable.js http://blo
Realtime validation using Ajax
Posted by masuidrive Wed, 04 Jan 2006 21:45:00 GMT Ajaxなどを駆使して、入力値を動的にチェックするライブラリ、realtime validation を公開しました。 >> http://masuidrive.jp/validation 正規表現とメッセージを指定するだけで、入力した瞬間にユーザに対してガイドメッセージを表示させる事ができ、今までの様に画面遷移後にエラーが出て、ユーザがエラー位置を把握しづらいと言う事がありません。 これで、あなたのサイトも一気にWeb2.0！ なのに使い方は超簡単。 prototype.js とvalidate.js を自分のHTMLに読み込んで、下記の様に正規表現で表示するメッセージを指定するだけ。 Validator.register({ "#mail" : { "/^([^@\\s]+)@((?:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.ornithopter.jp/amachang/browser/browser.html
Javascriptを多様したクールなWebアプリ:mOOflex:phpspot開発日誌
JSON と Content-Type
www.guru4.net