フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
テキストエリアとかリサイズ可能にする JavaScript
■ テキストエリアとかリサイズ可能にする JavaScript 好評の、読み込ませるだけシリーズ の6番目。 このスクリプトを読み込ませるだけで、ウェブ上にある TEXTAREA とかその他色々好きな要素がリサイズ可能なやつに大変身。とりあえずサンプル見るのが手っ取り早いです。 実際の動作サンプル テキストエリアの右下にマウスカーソルを持っていくとカーソル形状がかわるので、そのままドラッグするとサイズも変わります。 自分はグリモンスクリプトで快適なんですが、サービス提供側でこういう機能を提供してくれたら幸せな人が増えるんじゃね？とか思ったので作ってみました。 実際のリサイズ方法に関しては、愛用している Changing <textarea> Size のコードが大変参考になりました。ありがとうございます。 コードは次の通りです。 メイン部分。 var ElementResizer = {
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」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」:phpspot開発日誌
FitFlash - Smart Flash Resize Script FitFlash is a smart script that resizes your flash automatically if your browser window size is smaller or greater than your flash minimum desired size keeping it accessible independent of screen resolution. Flashムービーのサイズをブラウザ幅に応じて自動調整できるJSライブラリ「FitFlash」。 通常、Flashムービー(SWF)はブラウザに貼り付けた状態だと固定サイズとなっています。 このムービーサイズをJavaScriptで動的にうまく調節できるライブラリがFitFlashです。 FitFlashは次
テキストフィールドのフォーカス時に背景色を変更する JavaScript
■ テキストフィールドのフォーカス時に背景色を変更する JavaScript 以下の JavaScript を読み込ませれば、フォームのテキストフィールドにフォーカスした時に、背景に色がつくようになります。今どのフィールドを選択しているのかが視覚的にわかるので便利。 mixi にこの機能がついていたんだけど、onfocus なんてのをいっぱい書いていて非効率的だと思ったので、読み込ませるだけで勝手に全部のフィールドに設定されるようなものを書いてみました。 window.onload = function() { var colorful = new ColorfulInput; colorful.set(); } function ColorfulInput() { this.skip = []; this.color = { 'blur': '', 'focus': '#EEEEEE'
onsubmit で disable にするやつ
■ onsubmit で disable にするやつ onsubmit で submit ボタンを disable にしてユーザビリティを良くする フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ？ そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。 ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。 なので、書き直してみました。 var DisableSubmit = { init: function() { this.addEvent(window, 'load', thi
フォームに入力を促すメッセージを出力する JavaScript
■ フォームに入力を促すメッセージを出力する 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
■ カーソル位置のセルの上端と横端をハイライトする JavaScript 好評の、読み込ませるだけで動く JavaScript シリーズの5段目くらいです。このシリーズもたまってきたので、そのうちまとめます。 Excel とかの表計算ソフトって選択しているセルの列番号や行番号がハイライトされたりしてますよね？table タグ上であれと同じものを実現する JavaScript を書いてみました。 こんなようなテーブルを作らなくちゃいけない事になりそうなんだけど…。 実際には15×20くらいはあるので、チェックを入れる時にすごく使い辛そうですよね。なので、カーソルの位置がわかりやすくなるようにハイライト出来たら便利だろうと思ったんです。 実際の動作サンプル rowspan とか colspan を使って複雑にしていると、上端とか横端の位置を取得するのがやたらと面倒になってくるので、画面上のセル
[JS]ソートできるテーブルを実装するスクリプト10選 | コリス
単独使用のものから、jQueryなどのライブラリ併用まで、数値や文字・画像をソートできるテーブルを実装するスクリプト10選です。
入力文字数の制限を可視化する JavaScript
■ 入力文字数の制限を可視化する JavaScript 好評の、読み込ませるだけシリーズ の8番目。 maxlength 属性とかアプリケーション側とかでフォームの入力文字数を制限していても、ユーザにとっては自分が何文字くらい入力したかがわからないと不便そうなので、汎用的なのを作りました。 フォームにフォーカスが当たると、入力した文字数と入力可能な文字数が表示され、リアルタイムに更新されていきます。 動作サンプル コードは次の通りでして、prototype.js(1.5.0くらい) に依存してます。 var VisualLength = Class.create(); VisualLength.prototype = { initialize: function(attribute) { this.fields = ['INPUT', 'TEXTAREA']; this.attribute
Appleサイトの画像っぽく3Dで鏡面反射画像を作るJSライブラリ:phpspot開発日誌
Ajaxorized 3d image reflection with javascript week, this week an image reflection script, using unobtrusive javascript. Appleサイトの画像っぽく3Dで鏡面反射画像を作るJSライブラリ。 画像に次のようなエフェクトをかけることが可能です。 使い方は簡単で、次のように３ステップ。 prototype.js、scriptaculous、reflection.js(配布しているもの) を読み込み <div id="holder"><img></div> を定義 <script> new Reflect3D('holder'); </script> 黒の背景画像にも対応しているようです。 1枚の画像でも、雰囲気のある画像として表示させることが出来ますね。
拡大画像をスタイリッシュに見せるためのJavaScript&FLASHライブラリ『Magic Toolbox』 | 100SHIKI
サイトにある画像をユーザーが自由に拡大してみれるようにするためのライブラリがMagic Toolboxだ。 マウスオーバーすると拡大画像が現れたり、虫眼鏡のようなエフェクトを実現したりすることができる。JavaScriptとFLASHを利用しているようだ。 もちろんさまざまなパラメータで自分のサイトにあわせて見た目を調整することも可能だ。 商用サイトの場合は有料になるが、きちんとブラウザ互換も考えられており、ささっと導入したいときに便利だろう。有料ではあるが、カスタマーサポートのことを考えると結局は安上がり、ということにもなるかもしれない。 こういうスクリプトも品質が求められるようになってきたのかもしれませんね。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
