Webアプリケーションを構築する上で、優れた操作性をもったUIは欠かすことができない。まるでデスクトップアプリケーションのようなインタフェースを持ったソフトウェアが数多く存在している。 Prototype.jsを使ったUIライブラリ そんなUIを構築するライブラリは数多いが、そのためだけのツールが多く、柔軟性にかけるものが多い。そこで優れたJavaScriptライブラリであるPrototype.jsをベースにしたPrototype UIを使ってみよう。 Prototype UIはPrototype.jsとScript.aculo.usを使ってWebアプリケーションにふさわしいインタフェースを提供してくれるJavaScriptライブラリだ。 Prototype.jsがベースという点において好き嫌いが分かれる所かもしれない。とは言え、Railsで標準で組み込まれていることもあり、利用されている
前回までにさまざまな演出効果を紹介してきた。今回からはScript.aculo.usのコンポーネントを紹介していきたい。最初はドラッグ&ドロップを実現するDraggableとDroppablesだ。 なお、Script.aculo.usのバージョンは、新年早々にリリースされた1.8.1である(CHANGELOG)。詳細はWikiページで確認していただきたい。なお、紹介するオプションはすべて省略可能だ。 要素をドラッグ可能にする new Draggable( IDもしくはDOMオブジェクト, { オプション } ); マウスのドラッグによって、要素の位置を移動できるようにする。ドラッグ中の要素はデフォルトで透明度が0.7に設定されるが、この動作はstarteffect, endeffectオプションを上書きすることで変更できる。 [主なオプション] 名称 値の内容 デフォルト revert
前回は基本的な演出効果を実現する方法を紹介した。今回はそれらを組み合わせて複合的な動きをする演出効果を紹介したい。Script.aculo.usのバージョンは引き続き1.8である。詳細はWikiページで確認していただきたい。 なお、オプション以外で省略可能な記述は[〜]で表す。オプションはすべて省略可能だ。また、画面上での動作を示すために、要素の元の大きさを点線で示す別の要素を重ねて表示させている(画像はInternet Explorer 7で実行したもの)。 表示済みの要素に動きを与える Effect.Shake( IDもしくはDOMオブジェクト, { オプション } ); または $( IDもしくはDOMオブジェクト ).shake( { オプション } ); 左右に揺れる。durationとdistanceを短く設定すれば、ブルブルと震えてあたかも首を「イヤイヤ」と横に振っている
Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト：パターンとライブラリで作るAjaxおいしいレシピ（4）（1/4 ページ） script.aculo.usの一歩進んだテクニック 今回紹介するscript.aculo.usは、以下のような機能を提供するAjax（JavaScript）フレームワークです。 ビジュアルエフェクト ドラッグ＆ドロップ DOM操作 オートコンプリート スライダー 単体テスト prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。 今回はscripot.aculo.usのエフェクト機能に焦点を絞り、より突っ込んだ使い方を紹介していきます。 ■ Ajaxの弱点を補う「エフェクト」の必要性 Ajaxを活用することで、画面全体を再描画せずに画面上の一部分のみを変更し
Script.aculo.usは、Thomas Fuchs氏を中心とするチームにより開発されているJavaScriptライブラリだ。MITライセンスが採用されており、2005年から公開を始め、執筆時点では11月に公開されたバージョン1.8が最新版になる。本稿では、そのバージョン1.8を使って(連載継続中にバージョンアップした場合はそちらに変更する可能性がある)、同ライブラリの基本を6回にわたって紹介しよう。 なお、Script.aculo.usを扱ううえでの必須知識となるPrototype.jsの使用法については、連載『いまからはじめるPrototype.js』で解説しているので、そちらをご覧いただきたい。 Script.aculo.usの概要 Script.aculo.usはPrototype.jsをベースに動作するライブラリだが、Prototype.jsが1つのファイルにすべての機能を
Sébastien Gruhier氏は4日(フランス時間)、Prototype UI beta 2を公開した。 Prototype UIは、Sébastien Gruhier氏やSamuel Lebeau氏らによって開発されたUIライブラリ。The MIT LicenseのもとPrototypeやscript.aculo.usをベースとして開発されている。今のところスキン対応のウィジェット、スキンやウィンドウに依存しない影つけ機能、動的なリサイズ機能、カスタムボタンへの対応などが実現されている。 Prototype UIは当初、Prototype Windowのリライト版として開発がはじまった。現在ではPrototype 1.6およびscript.aculo.us 1.8をベースとして、同氏の好みのコンポーネントを追加したUIライブラリとして仕上がってきているようだ。今回発表されたProt
script.aculo.usベースのクールなツールチップライブラリ「Effect.Tooltip」 2007年07月06日- Effect.Tooltip A simple tooltip build on top of Script.aculo.us requires: Prototype and Script.aculo.us script.aculo.usベースのクールなツールチップライブラリ「Effect.Tooltip」 次のようなカッコいいツールチップを簡単に実装できます。 使い方はscript.aculo.us 風で、次のように非常にシンプル！ new Effect.Tooltip(element, content, {title : 'title', className: 'class', offset: {x:0, y:0}}); これは便利ですね。 関連エントリ Ja
Spotlight-Like Search As You Type With CSS, AJAX & JS Dustin Bachrach Blog OS X has a lot of great effects. These are great building blocks for creating effects for the web. OS X の Tiger についてくるインクリメンタル検索機能のSpotlight機能をWebでも実現するためのCSS&HTML&JavaScriptサンプル。 次のようなインクリメンタルな検索機能をあなたのサイトにも実装できます。 Spotlight 自体の ユーザインタフェースが既によく考えられて作られていて、優れているので、サイトにも実装するとユーザビリティが上がることは間違いなさそう。 prototype.js と scriptaculou
script.aculo.usベースのリッチGUIコンポーネント作成JavaScriptライブラリ「Spinelz」 2007年01月31日- Spinelz - JavaScript libraries Spinelzはscript.aculo.us.をベースに開発されています。 Ajaxや、script.aculo.us.の持つアニメーション効果を最大限に活かした、ちょっと便利な機能を提供しています。 script.aculo.usベースのリッチGUIコンポーネント作成JavaScriptライブラリ「Spinelz」。 タブ、メニューバー、ナビゲーションパネル、カレンダー、グリッド、ツリービュー等リッチなコンポーネントを実現できます。 以下にいくつか紹介。 タブボックス メニューバー ナビパネル カレンダー グリッド ツリービュー コンポーネントはＣＳＳによってデザインされているため、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
