SWFAddress is a small but powerful library that provides deep linking for Flash and Ajax. It's a developer tool, allowing creation of unique virtual URLs that can point to a website section or an application state. SWFAddress enables a number of important capabilities which are missing in today's rich web technologies including: Bookmarking in a browser or social website Sending links via email or
Web Kit DOM Class HierarchyGo to the graphical class hierarchy This inheritance list is sorted roughly, but not completely, alphabetically: AbstractView Attr CanvasGradient CanvasPattern CanvasRenderingContext2D CharacterData Comment Text CDATASection Counter CSSRule CSSCharsetRule CSSFontFaceRule CSSImportRule CSSMediaRule CSSPageRule CSSStyleRule CSSUnknownRule CSSRuleList CSSStyleDeclaration CS
超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」 2007年05月31日- TableKit TableKit is a collection of HTML table enhancements using the Prototype framework. 超簡単にソートやリサイズ、その場編集が可能なテーブルを作成できるJavaScriptライブラリ「TableKit」。 次のようなExcel風テーブルが簡単に作れます。 どれぐらい簡単か、というと、必要なJavaScriptを読み込んだあと、table の class に次のように値を指定するだけ。 <table class="sortable resizable editable"> 最低幅の指定など、動作に関するカスタマイズも豊富なオプションによって指定可能です。 こ
fValidator - Alone Simple form using fValidator フォーム値のチェックをJavaScriptで簡単かつクールに行う「fValidator」。 fValidator を使えば、次のように input エレメントの class 属性に 値を指定するだけで入力チェックの機構を実装できます。 <input id="exA_Id" class="fValidate['required']" name="id" type="text"> <input id="exA_cPassword" class="fValidate['required','=exA_Password']" name="cpassword" type="password" > JavaScript で入力チェックというと結構面倒なイメージがありますが、このライブラリを使ってしまえばHT
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
Showdown - Markdown in Javascript テキストをXHTMLに変換するJavaScript製「Markdown」ライブラリ。 次の画像を見てください。左の入力欄にテキストを入力すると、リアルタイムで右のウィンドウにHTMLに変換されたページが表示されます。 要は、Markdownとは、WIKIのような文字列変換を行うもののようですね。 ライブラリ自体はダウンロードして自分のツールに独自に組み込んだり出来そうです。 JavaScriptで出来ているということで、サーバに依存せず、アイデア次第で面白いもの/便利なものが作れるかもしれませんね。
JavaScriptでフォームの値をリアルタイムにバリデートするライブラリまとめ。 バリデートするライブラリも沢山でてきました。とここら辺で一度まとめておきました。 Really easy field validation (デモ) - 入力値がおかしいと、エラーメッセージをフェードインさせながら超クールに表示できます。 ※ ページの最後で使い方紹介(これは良いです) Remember the milk風の登録フォームも作れそう prototype.js依存。 Realtime validation using Ajax (デモ) - Ajaxなどを駆使して、入力値を動的にチェックするライブラリ Validate.js (デモ) - リアルタイムではないけど、入力値をチェックするためのライブラリ Tooltip for forms - 入力チェックではないけど、フォームの入力ヒントを出して
プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用し... プレゼンテーションに使用するスライド資料といったら、パワーポイントのようなソフトウェアで作るのが一般的ですが、最近は、ブラウザ上で動作するスライドショーを使用している方をセミナーなどで頻繁に見かけるようになりました。 このブラウザ上で動作するスライドは、(X)HTML + CSS + JavaScript で実現できます。スライド制作用 JavaScript ライブラリとしては、W3C で公開されている 「HTML Slidy」 が使いやすく有名ですが、個人的にもこの 「HTML Slidy」 を利用したスライドをどこかで使ってみようと思っていたところでしたので、いい機会ということで、テンプレートを作って公開してみることにし
■ onsubmit で disable にするやつ onsubmit で submit ボタンを disable にしてユーザビリティを良くする フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ? そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。 ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。 なので、書き直してみました。 var DisableSubmit = { init: function() { this.addEvent(window, 'load', thi
■ テキストフィールドのフォーカス時に背景色を変更する JavaScript 以下の JavaScript を読み込ませれば、フォームのテキストフィールドにフォーカスした時に、背景に色がつくようになります。今どのフィールドを選択しているのかが視覚的にわかるので便利。 mixi にこの機能がついていたんだけど、onfocus なんてのをいっぱい書いていて非効率的だと思ったので、読み込ませるだけで勝手に全部のフィールドに設定されるようなものを書いてみました。 window.onload = function() { var colorful = new ColorfulInput; colorful.set(); } function ColorfulInput() { this.skip = []; this.color = { 'blur': '', 'focus': '#EEEEEE'
■ フォームに入力を促すメッセージを出力する JavaScript input type="text" なフォームに最初から「ここに入力して下さい」みたいなメッセージを薄い色で表示させておいて入力を促すようなのありますよね。なんか、あれを、現実逃避気味に書いたので。 function inputDefault(elm, msg) { this.elm = elm; this.msg = msg; this.color = '#999999'; this.bgColor = '#F9FFF9'; } inputDefault.prototype.set = function() { this._cleared = false; this._defColor = this.elm.style.color; this._defBGColor = this.elm.style.background
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね?とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
Automatic colored rows - Example for BiteSize Standards テーブルの背景って次のイメージのように行ごとに交互に色分けされていると見やすいですね。 かといって、サーバサイドでアイテムを回して、1個1個設定するのも結構面倒だったりします。 リンク先のサンプルでは、JavaScriptを使って、trエレメントを探索し、交互にクラスを割り当てていくことで、自動でテーブルに色をつけてるようです。 これで、テーブルはシンプルにHTMLでコーディングでき、サーバサイドの技術なしで見やすいテーブルが作成できますね。
Link Indicator Link Indicator displays visually links within a page and links which have target attribute. Link Indicatorを使えば、 href="#name" のようにアンカーでリンクした先を視覚的に次のように表示できます。 クリックするとどこに飛ぶか、というのが予め分かるとちょっと安心できますね。 実装もHTMLとJavascriptのロジックは分離できるようなので、簡単でHTMLソースも見づらくならなくていいですね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く