HTMLの任意のElementをDrag & DropできるようにするためのJavaScriptライブラリです。Drag & Drop以外の機能はありませんが、その分ロジックが簡潔なので、様々な用途にソースコードを改良しやすいと思います。 また、インスタンスを生成するだけでDrag & Dropできるようになるので、お手軽です。 Draggable.jsをロードします。 <script type="text/javascript" src="./Draggable.js"></script> 動かしたいElementのスタイルをposition:absoluteに設定します。 <div id="tutorial" style="position:absolute;">Tutorial</div> 引数にElementのIDを渡してDraggableオブジェクトをnewします。 <scrip
こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l
こんにちは!やまもと@テスト番長です。 TestingGeekという耳障りの良い名前のサイトをご存知でしょうか? 総合的にテストの話を取り扱っており、それでいて読みやすいサイトです。 そこのTemplatesのコーナーにWeb Application Testing Checklist という便利そうなものがありましたので、日本語にしてみました。 ちょっとそのままだと物足りない感がありますが、テストポリシー作成の叩き台に使ってみるのも良さそうですね。 この手のリストを他にもご存知の方がいらっしゃれば、是非ご一報ください。 1. 機能テスト 1.1 リンク 1.1.1 記載された通りの先に遷移するか 1.1.2 どこからもリンクされないページは存在しないか 1.1.3 全ての外部リンク 1.1.4 参照しているサイトおよびメールアドレスはハイパーリンクになっているか? 1.1
イメージ切り抜きのためのインタフェースを提供するJavaScriptライブラリで、prototype.jsやscript.aculo.usを使っています。 写真上をマウスカーソルでドラッグすると枠が破線で作成され、囲んだ領域の座標とサイズを取得し、トリミングすることができます。カーソルキーによる移動にも対応しているので微調整も可能、実にすごい。 詳細は以下の通り。 ダウンロードは以下から。 DEfusion.org.uk >> JavaScript Image Cropper UI, using Prototype & script.aculo.us デモは以下から。実際にドラッグして切り抜きを体験できます。 DEfusion.org.uk >> Demo >> Prototype JavaScript Image Cropper UI 操作感覚が通常のアプリケーションとほとんど差異がない
FlexアプリにFlashの視覚効果を取り入れるには?:現場で使えるFlex実践テクニック(2)(1/2 ページ) 前回はFlexアプリケーションで使える多彩な画面遷移方法について解説しました。今回は、Flashの表現力をFlexアプリに取り入れ、さまざまな視覚効果を得る方法について解説します。 実際に動かせるサンプルも掲載したので、その効果を“体験”してみてください。 SWFならではの表現力でユーザビリティを向上する Flexアプリケーションの実行形式はFlashと同じSWFですので、FlexアプリケーションにFlashの表現力を取り入れることができます。 派手な見掛けを重視したアニメーションをFlexで作る意義を見いだすのは難しいですが、よく練られた、適度な視覚効果はユーザビリティの向上に非常に効果があります。 ■ ビヘイビア機能とは何か? 特に、インタラクティブな機能を簡単に実装する
Ext File Upload Form Widget Example by Saki リアルタイムにファイルをアップロード可能なExtベースJavaScriptライブラリ 「Add」でファイルを選んで↑ボタンでファイルをその画面上でアップロードしてくれます。 現状では、ダウンロードリンクやバックエンドプログラムのダウンロードリンクはないので手動で解析する必要がありそうですが、なかなかこれはカッコいいですね。 関連エントリ FlashとAjaxを使った使いやすいファイルアップロードライブラリ「FancyUpload」 SWFUpload アップロードの進捗を表示しつつアップロードするサンプル
Apollo改めAIRプログラミング入門(1) AIRアプリはドラッグ&ドロップでこんなことまで! クラスメソッド 横田聡 2007/7/12 2007年6月11日、Adobe AIR(Adobe Integrated Runtime)の公開ベータ版がAdobe Labsのサイトよりリリースされました。いままでApolloというコードネームでしたが、今後AIRという名前になります。 編集部注:今回より、連載「Apolloプログラミング入門」は本連載「Apollo改めAIRプログラミング入門」にリニューアルしました。この連載をより深く理解するためには、連載「Apolloプログラミング入門」も併せてご覧ください。 連載中に新しいバージョンが出ましたので、AIRベータ版の新機能をご紹介しようと思います。今回は、ドラッグ&ドロップに注目して2つのサンプルを作成します。 デスクトップとドラッグ&ドロ
Deziner FolioBlog Archive dfGallery 1.003b Flashを使った超高機能クールフォトギャラリー「dfGallery」 dfGalleryを使えば次のようなフォトギャラリーを簡単に作れるようです。 右下のボタンでフルスクリーン表示することも出来るようで、他のスライドショーギャラリーと違って便利。 やはり写真は大きなサイズで見たいですね。 動作がFlashなので非常になめらかに表示されます。 Flickrの写真を読み込めたり、プリントスクリーンを許可/非許可する設定にできたり、リキッドレイアウトだったり、バックグラウンドサウンドをMP3で再生できたりと、スライドショーアプリの決定版か?と思われるほど高機能。写真の読み込みはXMLで読み込めるので簡単ですね。 スライドショーアプリを実装するならこれだ、と思わせられる程の品質に驚きでした。
※ スクリーンショットは全て公式サイトデモより。 最近はJavaScriptで入力チェックを行うサイトも増えてきた。もちろん、サーバサイドでのチェックを欠かすことはできないが、クライアントサイトでチェックできると、その場ですぐに入力訂正が促せるのでユーザビリティが高い。 各入力チェックはもちろん、入力フォームをさらに便利にしてくれるライブラリがこれだ。 今回紹介するオープンソース・ソフトウェアはwForms、JavaScriptフォームライブラリだ。 wFormsではJavaScriptによる入力チェックをはじめとする各種ライブラリが提供される。入力の際にヒントを表示するもの、フォーカスが外れた時にその場でチェックを行うもの、ウィザード形式に入力を促すものもある。 また、複数回一気に入力する事ができるようにする動的フォーム等、便利なライブラリもある。各スクリプトは個別に分かれているので、必
Windoo usage template Windoo demonstration and template usage pagemooToolsを使ったクールなウィンドウ作成ライブラリ「Windoo」。 次のようなクールなブラウザ内ウィンドウを作成することが出来ます。 作成できるウィンドウは、閉じたり、リサイズしたり、最大化などのウィンドウとしての機能は備えているようです。 コーディングもWindoo BuilderというWEBツールを使えば実装用のJavaScriptコードも簡単に作成することが出来ます。 ライブラリを配布する際にこういった仕組みがあるとより便利に使えますね。 カスタマイズできる部分が多いので色んな場面で使えそうです。
This domain may be for sale!
Toggler Toggler is currently just a proof of concept to mimic the functionality found in desktop programs like Adobe Photoshop ドラッグ&ドロップで複数チェックボックスの一括チェックを可能にする「Toggler」。 Togglerを使えばマウスをクリックして上からドラッグするだけでチェックボックスの一括チェックが可能になります。 使い方も次のように簡単です。 var toggle = new Toggler('elementId'); toggle.start(); // start the toggler (enabled by default) toggle.stop(); // stop the toggler これは便利ですね。
gmailでメールを書くとき、添付するファイルを選んでからしばらくすると、いつの間にか添付ファイルがアップロードされています。 添付するファイルを選ぶと、はじめファイル名が表示されていたのが 自動的にアップロードされて、名前とファイルサイズが表示されています! 実は、あまり名前も聞かなくなった Google Page Creator がリリースされたときにいちばんびっくりしたのはページの右下にこのgmailの自動アップロードとよく似たしくみがあったことでした。で、さっそく解析してマネしてみたことがあります。今回はgmailでその仕組みを見てみます。 ちなみにその Google Page Creator には、ログインすると右下にこんな ファイルをアップロードするのに使う部分があります。 gmailの場合、メールが自動保存されるタイミングでアップロードされているかんじでしたが、こっちのはBr
※ 画面は公式サイトのサンプルより Webサービスでは色々な情報を入力する。会員登録の類は良くあるものだろう。丹念に入力し、送信ボタンを押してしばらく待つと、入力エラーの文字列。これではやる気がなくなってしまう。 JavaScriptでチェックできれば、その場ですぐにエラー判定ができ、分かりやすい。しかし、入力するパターンは様々にある。必須チェック以外、たとえば入力パターン等に対応しようと思うと開発は大変だ。そこでこれの出番だ。 今回紹介するオープンソース・ソフトウェアはfValidator、入力チェックを行うJavaScriptライブラリだ。 fValidatorは必須チェックに加え、パターン入力にも対応させることができる。たとえば、YYYY/MM/DD等の入力のみを可能にする事で、Microsoft Accessの入力フォームのように入力形式を強制できる。メールアドレスやURLのような
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く