ナビゲーション・メニューまとめ - DesignWalker
jsmap - JavaScriptによる都道府県入力補助
Q - なぜ、全国地図にしないのですか? 4つほど理由があります。 ポップアップが場所をとりすぎるから 現在、地図部分は185x120pxにおさめていますが、標準的なモニタ解像度ではこの辺が限界です。 キーボード操作時の押下回数を減らすため jsmapがフォーカスするのはSugarCRMなどのWEBアプリです。使い切りのWEBフォームと違い、慣れによるスピードアップが望めるUIである必要があります。 多言語対応のため 日本は47都道府県なので、かろうじて可能だと思う方もいるかもしれませんが、これがイギリス(現在製作中)とかでは100を超えます。 認知的限界のため これも重要。ぱっと見て探せる数というのは、15や20がせいぜいです。 ただ、上記の話とは別に、地方選択用の全国図はあってもいいと考えていますので、それは将来のバージョンで。 Q - 地図はもっと詳細化/単純化しないのですか? 詳細
日付入力を便利にするカレンダー/日付ピッカー集:phpspot開発日誌
Fantastic, Free Calendar and Datepicker Scripts - Six Revisions Web applications often require a calendar or datepicker functionality. 日付入力を便利にするカレンダー/日付ピッカー集。 日付だけのものから、Googleカレンダーみたいなカレンダーウィジェットまで、いろいろとあるようです。 Calendar: a Javascript class for Mootools MooMonth Monket Calendar Datejs Vista-like Ajax Calendar 全部見る これだけあれば、日付入力には困らなさそうですね。
全てのtextareaを自動的にリサイズするJavaScriptとGreasemonkey (Kanasansoft Web Lab.)
(function(){ var addEvent= function(element,eventName,handler){ if(element.addEventListener){ element.addEventListener(eventName,handler,true); }else{ element.attachEvent("on"+eventName,handler); } } addEvent( window, "load", function(){ var getLength= function(str){ return str.length+str.replace(/[\x0-\xff]/g,"").length; } var sort= (function(getLength){ var _getLength=getLength; return function(
標準のINPUTを拡張してフォーム入力を便利にする「inputEx」:phpspot開発日誌
inputEx Documentation - Examples 標準のINPUTを拡張してフォーム入力を便利にする「inputEx」。 input 入力の際に、数値Onlyや、Validate機能、色入力機能、オートコンプリートを提供して、フォーム入力をより便利にするものです。 色入力 メールアドレスバリデーション。ＵＲＬやパスワードなんかもあり 階層型のツリーデータを入力 うまく導入してフォームのユーザビリティに役立てたいですね。 関連エントリ JavaScript製のフォームバリデータライブラリいろいろ 超クールなカレンダー型日付入力補助用JSライブラリ
指定したHTMLエレメントをローディング中にする際に便利な「busy.js」:phpspot開発日誌
busy.js (loading indicators) busy.js 1.0 allows you to add/remove loading indicators to html elements on your webpages 指定したHTMLエレメントをローディング中にする際に便利な「busy.js」。 例えば、div 要素全体に次のようにローディング中にすることが出来ます。 デモはこちら - 要素をクリックでローディング状態にすることが可能 オーバーレイで要素自体の色も変わるため、ローディング中であることがよく分かるようになっています。 関連エントリ グレーアウト表示ライブラリ:glayer.js 様々なLightBox風ダイアログを超簡単に作れるJavaScriptライブラリ「Control.Modal」
ブラウザ上で動く12のリッチテキストエディター:phpspot開発日誌
9 of the best Rich Text editors reviewed ブラウザ上で動く12のリッチテキストエディター。 ブラウザ上でリッチテキストを編集する、というのは当たり前になりましたね。 というわけでライブラリも一杯でてます。 NiceEdit Kupu TinyMCE Kevin Roth RTE FCKEditor YUI Editor WebWiz RichTextEditor CodePlex Rich Text Editor - ASP.net XStandard prototype.jsでクロスブラウザなWYSIWIGエディタ jWYSIWYG NicEdit 沢山あるものですね。
超クールなカレンダー型日付入力補助用JSライブラリ:phpspot開発日誌
Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements Calendar is a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. 超クールなカレンダー型日付入力補助用JSライブラリ。 次のような個性的なカレンダーで入力補助が可能です。 オシャレでかわいいカレンダー スタイルされたクールなカレンダー 写真入りのカレンダー mootoolsを使っていて次のように初期化するだけで簡単に使えるみたい myCal1 = new Calendar({ date1: 'd/m/Y' }, { direc
JavaScript製のフォームバリデータライブラリいろいろ:phpspot開発日誌
CSSgallery.info Javascript form validators When we use forms, we need somehow to validate the data user input. JavaScript製のフォームバリデータライブラリがいろいろ紹介されています。 Realtime validation using Ajax ( フォームの入力値をリアルタイムにバリデーション「Realtime validation」 ) LiveValidation ( JavaScriptでリアルタイム値チェックを簡単に行える「LiveValidation」 ) JSValidate ( prototype.jsベースのリアルタイムバリデートJSライブラリ「JSValidate」 ) validator.js - Client-side form validatin
NicEdit - WYSIWYG Content Editor, Inline Rich Text Application
What is NicEdit? NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser. NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing. Take boring textareas like this one in your application A Full featured rich text editor in your application i
openWYSIWYG 日本向けカスタム版 - ryuzi_kambe の？Ｄ
Web, HTML Editor, OSS, LGPLhttp://fx2.jp/misc/js/wysiwyg.jsせっかく LGPL らしいのでフォントリストをメイリオやヒラギノに置き換えて、hr ボタンもくっつけたカスタマイズ版置いておきます（リンクやテーブルは無効にしてありますが使いたい方はソース冒頭でボタンのコメントアウトをはずしてください）hr.gif は、本体には入ってないのでここから落として icons フォルダに放り込んでみてください。http://fx2.jp/misc/js/hr.gif関連：ryuzi_kambe の？Ｄ - 軽快に動作するWYSIWYGエディタJavaScript （openWYSIWYG） - youmos
MOONGIFT: » prototype.jsベースのカレンダー「protocalendar.js」:オープンソースを毎日紹介
よく、誕生日の入力などでドロップダウンリストから選ばせるものがあるが、あれほど入力が面倒なものはないと思っている。テキストボックスにそのまま数字で入れた方がよっぽども手軽だ。 とは言え、入力チェックやユーザビリティを考えるとそれもお勧めはできない。手軽で、さらに正確な入力が促せる方法としてこれをお勧めしたい。 今回紹介するオープンソース・ソフトウェアはprotocalendar.js、prototype.jsベースのカレンダー入力ライブラリだ。 protocalendar.jsはテキストボックスにフォーカスが当たるとカレンダーが表示されるライブラリだ。良くあるものだが、prototype.jsベースなのと、何より日本製というのが特徴だ。 日本製の嬉しい点としては、休日に対応している点だろう。ハッピーマンデーにも対応しているので、数年後の休日も表示されるのが素晴らしい。 さらに多言語対応によ
バナー画像の3倍の効果をあげたテキストリンク（powered by beBit） | SiMPLE*SiMPLE
バナー画像の3倍の効果をあげたテキストリンク（powered by beBit） November 6, 2007 3:41 PM written by Gen Taguchi ※ 今回の記事は「ウェブサービスインターフェース勉強会」でのbeBit社のプレゼンから。 今回ご紹介するのはレシピサイト、Cookpad.comの事例です。Cookpad.comでは有料会員（月額300円）があるのですが、その会員数が伸び悩んでいました。 そこでbeBit社に相談するのですが、それまではかわいいバナーをどーんとサイドバーに貼っていました。 ↑ なかなかかわいらしいバナーです。凝っていますよね。 しかしユーザビリティ調査をしてみると、そのバナー広告がほとんど見られていないことがわかりました。最近は「広告＝邪魔なもの」というイメージがありますよね。 そこでbeBit社ではこのバナーのかわりに次のテキスト
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
Zoomify — Zoomable web images!
Zoomify HTML5 Express delivers fast zoom-and-pan viewing — for every image, everywhere! Includes everything you need: drag-drop image Converter, intuitive Viewer, built-in Toolbar, and Navigator! Everything in Express plus powerful features for web designers and developers including 120 HTML parameters, Bookmarking, Tours, Watermarks, Slideshows, Hotspots, Animations, and more — plus complete Java
[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート | コリス
「a href」を使用したリンク箇所のアイコンを、リンク先やmailtoやPDF・画像などそれぞれごとにアイコンを変更するスタイルシートのサンプル紹介です。 外部リンクでアイコンを変更する場合 a[href^="http://"]{ background:transparent url(../images/external.png) center rightright no-repeat; display:inline-block; padding-right:15px; } 判別する箇所のサンプル -mailto a[href^="mailto:"] 判別する箇所のサンプル -PDF a[href$='.pdf'] 判別する箇所のサンプル -圧縮ファイル a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] 判別する箇所のサンプル -画像
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://youmos.com/news/openwysiwyg
https://www.openwebware.com/products/openwysiwyg/
IBM Developer
IDEA * IDEA
